vanillaice (Akira)

vanillaice (Akira)

sampleSNSシェアに欠かせないOGP(おーぷん ぐらふ ぷろとこる) を含めたFC2でのシェアの仕方についてです

SNS共通の設定がOGPと呼ばれるものです
一体なんぞ? というのは
通常の単純なシェアというのは見た目がとっても寂しい物です
URLだけポーン みたいな (´・ω・`)
OGPを正しく設定していると表示がリッチになります
FBシェア表示例

facebook



Twitterシェア表示例

twitter



んで 毎度のことですが
私が配信しているテンプレートに限定したお話しです
一部は汎用的に使える方法ですが 基本的に「私のテンプレートでは」という限定的な説明ですー
どうやれば上記のような表示形式になるのか というお話しですね れっつごー (●'ω')ノ


OGPメタタグ設定について


OGPの設定は
<head>〜</head>
内で行います
他の箇所は不可です

私の過去テンプレでも導入はしてありますが
現在ではFC2が公式にこのOGP設定をサポートしていますので 以下をご確認ください

・テンプレートのソース内に

<meta property="og:site_name" 省略>
<meta property="og:title" 省略>
<meta property="og:type" 省略>
<meta property="og:url" 省略>
<meta property="og:description" 省略>


この5つが含まれている場合には削除してください
公式の方(ブログ個人設定)に切替えた方が良いと思います
公式の方は記事内にある最初の画像を抽出して表示することができますが テンプレ付随のOGPではできません
(私のテンプレ設定ではプロフィール画像が表示されるのがデフォルトになっていました)
全テンプレート 既にOGPは削除済みですが 古いバージョンをお使いの方は残っているかと思います
ってゆーかできれば最新バージョンにアップデートしてほしい ^^;

テンプレート内のOGPの有無のご確認が済みましたらブログ設定で改めてOGP設定を行います
やり方は以下をご参照ください

Facebookシェアの画像が出ない



Facebookシェアについて


FBについてはもう何もしなくて良いです
個人IDの記入も不要


Twitterシェアについて


こちらはFBと違い 個人アカウント名が必要です
そしてメタタグも2つ追加してください
個人アカウントが必要ですのでテンプレートに事前に入れておくことができません
従ってここは個人の任意設定となります

<meta name="twitter:card" content="summary"> 
<meta name="twitter:site" content="@Twitter ID">


Twitterのシェア表示形式は「Twitter card (ついったー かーど)」と呼ばれていますが
レイアウトを選ぶことができます
最も一般的なのはsummaryです
カードの種類を確認したい方はこちら ↓

https://dev.twitter.com/ja/cards/overview

@Twitter ID の部分はアカウント名です 表示名ではなく
アカウントには最初から@マーク付いてますよね それのことです


記述する場所ですが
<head>〜</head>
内に

<meta property="fb:app_id" content="15桁の数字">


という箇所がありますので その直下に書いてください
これでメタタグ設定は完了です

続きましてTwitterのvalidator(ばりでーた)にかけます
現在ではこれが認証も兼ねているようですので必ず行います

Card validator

ログインした状態でやってください
お好きな個別記事を開きアドレスバーからURLをコピーして指定箇所に記入してバリデート

sample


メタタグが正しく設定できていれば緑色の背景で認証されたことが示されます
何かしらの不備がある場合は赤背景
そして右の Log の部分で問題点を示唆してくれます

---------

以上がFacebookとTwitterでの OGPを利用したシェア設定です
テンプレートに付いているFB及びTwitterアイコン(私が付加しているもの)
そして ブログ設定から表示できる両SNS公式アイコン
どちらでも使えます

最後に
* ご質問頂きます際 *
head内情報にはFC2独自変数というのが含まれています
これは「コメント」と呼ばれるものによく似ていますが 全く別物です

コメント = ユーザーが任意で覚書のように記入できる
独自変数 = 勝手に書き換えたり 位置を変更するとページとしての意味を為さなくなる

独自変数 大変重要です
コメントも変数も同じく

<!--内容-->

この見た目ですのでややこしいですね (´・ω・`)
内容の部分が「日本語」の変数は存在しませんので
日本語である = コメントである
ことを示しますが コメントが日本語であるとも限らない(笑)
見分けるにはFC2変数を覚えて頂く他ありません
この独自変数はFC2エディターを通して一旦投稿されますと 実態変換されてしまいソース内には現れなくなります
ですから私がみなさんのページを右クリックでソース確認してもですね
独自変数のあった場所ですとか なにが書いてあったかなど わからなくなってしまうんです
スクリーンショットを取って頂くか ソース内容をコピーしてお伝え頂くか
(いずれも該当部分を含めその周囲のソース内容も含め)
いずれかの方法でお願いします

私のテンプレート以外の内容についてはお答えできません ごめんなさいね (*_ _)
関連記事

Comments 6

There are no comments yet.
abo  
すごく参考になりました

こんばんわ。
いつも、ちょこちょこと勉強させてもらってます。

この記事もすごく参考になりました。
ありがとうございます。ホント感謝です。

2016/01/13 (Wed) 02:06 | EDIT | REPLY |   
Akira  
To aboさん

コメントありがとうございます
そう言って頂けると励みになります。
ホントは「web一般」という形で書けると良いのですが。
なにせ未熟で申し訳ない ^^;

2016/01/13 (Wed) 19:27 | EDIT | REPLY |   
アメリカの真理先生  

ありがとうございました。
meta propertyと言うのがなかったのですが、<meta name=" ではじまるラインを全部削除して、
<meta name="twitter:card" content="summary">
<meta name="twitter:site" content="@Twitter ID">
を入れたら出来ました。

2016/06/19 (Sun) 08:15 | EDIT | REPLY |   
Akira  
To アメリカの真理先生さん

お役に立てたなら幸いです。

meta nameを代わりに削除されたということですが、
本ページ内の「meta propertyを削除〜」という手順はテンプレートに記載が「有った場合」にのみ生じるものです。
含まれていない場合にはなにもする必要はありません。
そして meta propertyとmeta nameは全く別物ですので、meta nameは削除しないようにお願いします。
既に削除されたということですから、元に戻しましょう。
公式テンプレートの「basic_white」をお使いになっている、というのを前提に

<meta name="author" content="<%author_name>" />
<meta name="description" content="<%introduction>" />

この2行を

<title><!--not_index_area--><%sub_title> - <!--/not_index_area--><%blog_name></title>

のすぐ「上」に追加修復してください。
meta nameのauthorはページの著作主を表し、meta nameのdescriptionはページの概要を表している重要なものです。
よろしくお願いします。

2016/06/19 (Sun) 14:18 | EDIT | REPLY |   
アメリカの真理先生  
To Akiraさん

お忙しいところ有難うございました。
追加しました。
ところで以下も前に削除したのですが、よかったのでしょうか。

<meta name="twitter:image" content="https://pbs.twimg.com/media/CY0QTyfUEAAS5ex.png">
<meta http-equiv="Content-Style-Type" content="text/css" />
<meta http-equiv="Content-Script-Type" content="text/javascript" />
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
お世話になります。

2016/06/27 (Mon) 16:20 | EDIT | REPLY |   
Akira  
To アメリカの真理先生さん

こんばんは (●'ω')ノ

<meta name="twitter:image" content="https://pbs.twimg.com/media/CY0QTyfUEAAS5ex.png">

これは特に問題ないです。

<meta http-equiv="Content-Style-Type" content="text/css" />
そして
<meta http-equiv="Content-Script-Type" content="text/javascript" />

この2つはソース内で使用される言語にカスケーディングスタイルシート(CSS 上記)とジャバスクリプト(JS 下記)がありますよ、という宣言です。
一応html4では記述しておくのが推奨ですので、テンプレートがhtml5でない場合には入れておくべきでしょうね。
アメリカの真理先生さんがご利用のテンプレはhtml4です。

<meta http-equiv="X-UA-Compatible" content="IE=edge" />

こちらはInternet Explorer(Microsoft社の旧ブラウザ)からの閲覧時、互換設定を有効に「しない」というものです。
互換設定を強制的に拒否してEdgeモード(標準)で閲覧してもらう必要がある際に記述します。
これは入れておいたほうが良いですね。
個人的に互換設定は大嫌いです(笑)
互換設定というのは何らかの事由で管理が為されていないページ、最新web記述に書き直しがされていない古いページなどを閲覧する際の一時的処置にすぎません。

-------

<head>〜</head>内にはページの根幹を成す重要な要素がたくさん詰まっています。
記載されていない内容については触らないようにお願い致します。

2016/06/27 (Mon) 20:26 | EDIT | REPLY |   

Leave a reply

テンプレートに関するご質問・不具合のご報告の際はご自身のブログアドレス記載必須です
ご質問の前に必ずお読みください ↓
FC2テンプレート ご利用時のお願い
2017.8.8 本日より10日ほど留守にしますのでお返事遅れます。すみません