Open Graph Protocolのog:imageを設定する

最近、よく耳にするOpen Graph Protocol。これをMovableTypeで利用するのは比較的簡単ですが、その中でog:imageの設定はちょっと手こずる事があるのではないかと思います。

現在、MovableTypeでは画像をアイテムとして管理が出来、ブログ記事ごとにアイテムの管理が出来るようになっています。ブログ記事に画像がアイテムとして登録してあれば<MTEntryAssets>タグを使う事で画像のURLなどを取得する事が出来ます。

<MTSetvarBlock name="ogimage"><MTEntryAssets sort_order="ascend" lastn="1"><$MTAssetURL$></MTEntryAssets></MTSetvarBlock>

<MTIf name="ogimage"><meta property="og:image" content="<$MTGetVar name="ogimage"$>" />
<MTElse><meta property="og:image" content="任意の画像のURL"</MTElse>
</MTIf>

上記のように設定する事で、ブログにアイテムとして登録してある画像を1枚取得してog:imageに設定してくれます。もし、ブログにアイテムが登録されていない場合は、<MTElse>で設定した「任意の画像のURL」がog:imageに設定されます。

これで、OGPの画像の設定は出来ます。もし、ブログ記事に画像がなくてもとりあえず任意の画像が表示されます。

ただし、MTにアイテム機能がなかった時からブログをやっている場合、アイテムとして画像が登録されていない記事もたくさんあると思います。あとから記事に該当する画像をアイテムとして登録してもいいですが、記事の数によってはかなり大変に作業になると思います。（多くの画像から該当する画像を探すことだけでも大変だと思います。MTの場合...。ブログ記事ごとに該当する画像をアイテムとして登録してくれるプラグインってあるのかな〜）

先ほどの通り、アイテムに画像がなくても任意の画像にブログのロゴなどを使えば、それなりに体裁は整えられますが、og:imageで設定された画像が一覧で表示されるような場合、同じ画像がずらずらと並んでしまい、ユーザーにとってわかりやすいとはいえないと思います。

そこで、ブログ記事から画像のURLを抜きだすプラグイン「MTGetsrcURL」の出番です。「MTGetsrcURL」を使うと、エントリーの中ではじめに現れる画像のURLを取得する事が出来ます。

<MTSetvarBlock name="ogimage"><MTEntryAssets sort_order="ascend" lastn="1"><$MTAssetURL$></MTEntryAssets></MTSetvarBlock>
<MTSetVarBlock name="getsrcbodyimg"><$MTEntryBody getsrcurl="1"$></MTSetVarBlock>
<MTSetVarBlock name="getsrcmoreimg"><$MTEntrymore getsrcurl="1"$></MTSetVarBlock>

<MTIf name="ogimage">
<meta property="og:image" content="<$MTGetVar name="ogimage"$>" />
<MTElseIf name="getsrcbodyimg">
<meta property="og:image" content="<$MTGetVar name="getsrcbodyimg"$>" />
<MTElseIf name="getsrcmoreimg">
<meta property="og:image" content="<$MTGetVar name="getsrcmoreimg"$>" />
<MTElse>
<meta property="og:image" content="http://www.honda-beat.jp/archives/images/top_image.jpg" />
</MTIf>

アイテムに登録してある画像を取得するのは、はじめに書いたサンプルと同じです。2つ目と3つ目の<MTSetvarBlock>タグでEntryBodyとEntryMoreの画像のURLを取得して「<$MTGetVar name="getsrcbodyimg"$>」と「<$MTGetVar name="getsrcmoreimg"$>」に代入してます。これらは<MTElseIf>を使っているので、画像がアイテムとして登録されていない時だけ書き出されます。

そして、画像がアイテムとして登録されていなくて、ブログ記事に画像が一枚も使われていないときに、最後の「<MTElse>」が機能して任意の画像である「http://www.honda-beat.jp/archives/images/top_image.jpg」がOGPのog:imageに設定されます。

ただし、この書き方だとEntryMoreの画像が使われるのは、画像がアイテムとして登録されていなくて、かつ、EntryBodyに画像がない場合だけなんですよね。og:imageには複数の画像を設定してもいいようなので、EntryBodyとEntryMoreから一枚ずつ設定できるように出来たら良かったのですが、自分のスキルでは無理でした。まぁ、追々、出来るようになれればいいかなと思っています。