FC2ブログのFacebookのOGP対応と、好きな画像が必ず表示される方法。 | 貧乏貴族の優雅な生活

FC2ブログのFacebookのOGP対応と、好きな画像が必ず表示される方法。

最後まで読んでくれてありがとう!よかったらシェアもお願いします(´・ω・`)

※2014年9月にWordPressに移行しました!

FC2ブログのFacebookのOGP対応と、好きな画像が必ず表示される方法。
めずらしく技術的な話です。
当ブログをFacebookOGPに対応させました。

OGPの設定自体は簡単ですが、 記事の一番上の画像が引用されるようにするのは大変でしたのでメモを残しておこうと思います。

1.OGPとは
2.FC2ブログ向けOGPコードと、その問題点
3.必ず記事一番上の画像が引用されるようにする方法

1.OGPとは

オー‐ジー‐ピー【OGP】.

《open graph protocol》ウェブページの内容を簡易的に明示するため、HTMLに付与される記述の仕様。URL、ウェブサイトの内容説明、サムネイルなどの付加情報が、外部のSNSなどで利用される。

goo辞書

簡単に言うと、FacebookなどのSNSで共有した時に、カッコよく表示されるようになるってことです。(ざっくり)

2.FC2ブログ向けOGPコードと、その問題点

FC2ブログ向けのOGPコードを掲載します。
詳細な解説は、こちらがわかりやすかったです。
FC2ブログをFacebookのOpen Graph protocol(OGP)に対応させる : Web Memo.SE

追加① htmlタグに以下のコードを追加する。



<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="<%template_language>">



<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="<%template_language>" xmlns:og="http://ogp.me/ns#" xmlns:fb="http://www.facebook.com/2008/fbml">

追加② headタグ内に以下のコードを追加する。



<-- OGP -->;
<!-- facebook -->
<meta property="fb:admins" content="FacebookのユーザID" />
<meta property="og:site_name" content="<%blog_name>" />
<meta property="og:image" content="画像のURL" />
<!--index_area-->
<meta property="og:title" content="<%blog_name>" />
<meta property="og:type" content="blog" />
<meta property="og:url" content="ブログトップページのURL" />
<meta property="og:description" content="ブログの紹介文" />
<!--/index_area-->
<!--permanent_area-->
<meta property="og:title" content="<%sub_title>" />
<meta property="og:type" content="article" />
<meta property="og:url" content="<%url>blog-entry-<%pno>.html" />
<meta property="og:description" content=
"<!--topentry--><%topentry_discription><!--/topentry-->" />
<!--/permanent_area-->
<!-- End of OGP -->

ただこの記述だとイマイチなところがあって、Facebookでシェアした時に表示される画像が固定になってしまいます。
対策としては、OGPのコードでわざと画像を指定しないという方法があります。

画像を指定しない場合、Facebookが自動で3つほど画像をピックアップしてくれて、シェアした時に1つを選ぶ形になります。
しかし、3つとも検討違いな画像をピックアップする時があり、完全な方法ではありません。

3.FC2ブログで、必ず記事一番上の画像が引用されるようにする方法

常に記事の一番上の画像が引用されるようにしたかったので、解決方法を考えてみました。
FC2ブログが便利な変数を用意していれば良かったのですが、残念ながら無いので画像の方に工夫することにしました。

ステップ1
○記事の一番上に掲載する画像のファイル名は、拡張子を必ず「~.jpg」にする。

○記事の一番上に掲載する画像のファイル名は、「固定名称 + 記事の通番」の形にする。
例えば、記事の一番上に表示する画像は名前を「”pic” + 記事の通番 + ”jpg”」にするということです。

この記事のトップの画像だと「pic85.jpg」になっています。

ステップ2
以下のコードをOGPに追加します。



<!--index_area-->
<meta property="og:image" content="トップページがシェアされたとき用の画像のURL" />
<!--/index_area-->
<!--permanent_area-->
<!--topentry-->
<meta property="og:image" content="ファイルアップロード先のアドレス/pic<%topentry_no>.jpg" />
<!--/topentry-->
<!--/permanent_area-->

<!--index_area-->~<!--/index_area-->で囲まれたところは、
トップページでのみ適用される部分でなので、固定の画像にします。
私はロゴの画像を指定しています。

<!--permanent_area-->~<!--/permanent_area-->で囲まれたところは、個別記事で適用される部分です。
変数<%topentry_no>は、記事の通番に置き換わってくれます。
これで個別記事ごとに違う画像が指定されます。

OGPの設定が正確にできたかは、以下のサイトへ行って確認したいページのURLを入力することで確認できます。
FacebookのOGPデバッガー

記事の一番上の画像が引用されるようにする方法、ちょっと苦しい小細工になってしまいました。
しかし、FC2ブログがいつか対応してくれるまでの一時しのぎだと思えばアリではないでしょうか?
少しでも何かの役にたてばうれしく思います。

当ブログのFacebookページを作成しました。
良かったらこの機会に是非いいねをお願いします。

以上。


関連書籍

最後まで読んでくれてありがとう!よかったらシェアもお願いします(´・ω・`)