最近になってやっと、まともにブログが起動し始めたので、
いつFBやTwitterでシェアされるかわからん！（妄想）という事で
自分の記事のシェアをテストしてみたところ、見栄えと内容がものすごくアレな事になってたので、BloggerにおけるOGPタグの設定を必死こいてやってみました。
そもそも、OGPタグってなんぞや。という人はこちら
http://webdesignerwork.jp/web/facebookogp/
今回はテンプレートを直接編集してOGPタグを仕込みますので
マイブログ > テンプレート > HTMLの編集
を選択して、ソースを直接編集します。
(なにかあった時の為に不安ならバックアップをとっておきましょうネ)
１． まず、htmlタグを編集
<html b:version='2' class='v2' expr:dir='data:blog.languageDirection' xmlns='http://www.w3.org/1999/xhtml' xmlns:b='http://www.google.com/2005/gml/b' xmlns:data='http://www.google.com/2005/gml/data' xmlns:expr='http://www.google.com/2005/gml/expr'>
の部分を
<html b:version='2' class='v2' expr:dir='data:blog.languageDirection' xmlns='http://www.w3.org/1999/xhtml' xmlns:b='http://www.google.com/2005/gml/b' xmlns:data='http://www.google.com/2005/gml/data' xmlns:expr='http://www.google.com/2005/gml/expr' prefix='og: http://ogp.me/ns#'>
に編集
２．ホーム画面用のOGPタグを記述
(ブログのトップページ用ですので、不必要なら飛ばして可)<b:if cond='data:blog.pageType == "index"'>
<meta property='og:type' content='blog'/>
<meta expr:content='data:blog.pageTitle' property='og:title'/>
<meta name='description' content='ブログ全体の説明'/>
<meta property='og:description' content='ブログ全体の説明'/>
</b:if>
３．個別記事用のタグを記述
(こっちが本命)<b:if cond='data:blog.pageType == "item"'>
<meta property='og:type' content='article'/>
<meta expr:content='data:blog.pageName + "｜" + data:blog.title' property='og:title'/>
<meta property='og:description' expr:content='data:blog.metaDescription'/>
</b:if>
４．共通タグの記述
<meta property='og:url' expr:content='data:blog.url'/><meta property='og:site_name' expr:content='data:blog.title'/>
<meta property='og:locale' content='ja_JP'/>
５．Descriptionの設定
さて、これだけだと実は肝心のサイトの説明文にあたる部分が抜け落ちてます。あるサイトではhtml内の最初の<p>タグでかこまれた文章が買ってに出るからいいよーと書いてありましたが、せっかくなので効果的なdescriptionを入れたい所。
と、言うわけでちゃんと設定します。
・Bloggerの管理画面から 設定 > 検索設定 > メタタグのところで『検索向け説明を有効にしますか？』で『はい』をチェック
・説明分はあえて空で(ここで書くと余計なページにまで同一の説明文が入るので)
・上記設定をONにした状態で、個別記事の編集画面を開くと、右のサイドバーに「検索演算子」という項目が増えているので、その項目を開き、説明文を入力
・記事の更新
以上で、いい感じにDescriptionが記事に挿入されると思います。
１つ注意点は必ず「記事を書く毎に検索演算子の項目を埋める」事。
面倒臭さは増しますが、これもより効果的にシェアされる為と思って、一手間賭けましょう。
６．og:imageの設定
共有時にサムネイルとして表示される画像の指定をします。
手順４の共通タグに
<meta property='og:image' content='画像のURL'/>
と入れれば、表示したい画像を指定する事ができますが
画像パスを決め打ちしてしまうと、どの記事でも同じサムネイル画像が表示されてしまいます。
別にそれでもいいっちゃいいのですが、ここはせっかくなので、記事ごとに効果的に画像を切り分けたいという事で、ここでも一手間
とはいえ、コンテンツ内の画像を持ってくるのもかなり困難なので、
RSSから最初に使われてる画像を抜き出してくるWEBサービスを使わせてもらう事にします。
http://rrvf.blogspot.jp/2011/10/blogger-ogp-og-image.html
簡単に説明すると、記事のURLの前にサービスの指定されたURLをくっつける事で、
記事で最初に使われてる画像のパスを返してくれるというベリーナイスなAPIです！
実際のタグはこうなります
<meta expr:content='"http://bloggerspice.appspot.com/postimage/" + data:blog.url' property='og:image'/>
注意点は手順４の共通部分ではなく、手順３の記事別のタグ群の中に追加してください。
また、あくまで有志で提供して頂いてるサービスなので、何かの拍子に急に消えるor動かなくなるという事も考えられますので、注意しておいて下さい。
７．FBでさあ確認
さぁここまでちゃんとできていれば、SNSシェアは完璧にいい感じに仕上がってる（ハズ）です。FBの投稿欄にURLを貼り付けて表示を確認してみましょう！
おまけ．もし表示がおかしかったら？
さて、FBでURL貼っつけて表示確認したものの、どうにもおかしい、もしくは画像やコメントが気に入らないってな感じで中身を修正・変更したのに、FBで何回やっても表示がかわらないよー！！って方は
https://developers.facebook.com/tools/debug/
ここを開いてURLを記入してデバックしてみましょう！
キャッシュがクリアされて、FBの表示が最新のものとなるはずです。
参考にさせて頂いたすばらしいリンク
http://r14g.blogspot.jp/2012/10/blogger-ogp.html
http://r14g.blogspot.jp/2011/04/bloggermeta-description.html
http://rrvf.blogspot.jp/2011/10/blogger-ogp-og-image.html
http://zenback.itmedia.co.jp/contents/www.marineroad.com/staff-blog/4088.html
http://web-tan.forum.impressrd.jp/e/2013/12/17/16623
0 件のコメント:
コメントを投稿