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

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

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

１．OGPとは
２．FC2ブログ向けOGPコードと、その問題点
３．必ず記事一番上の画像が引用されるようにする

１．OGPとは

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

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

２．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が自動で３つほど画像をピックアップしてくれて、シェアした時に１つを選ぶ形になります。
しかし、３つとも検討違いな画像をピックアップする時があり、完全な方法ではありません。

３．必ず記事一番上の画像が引用されるようにする

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

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

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

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

ステップ２
以下のコードを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-->

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

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

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