MTでOGPの設定：Facebookでサムネールを表示させる方法

よくFacebookにリンクを貼ると、自動的にサムネールを表示してくれるではありませんか。いわゆる og:image を引っ張ってくれるわけですが、どうやら先日Facebook側のパーサーに変更があったらしく、読み込めなくなっていました。

原因究明をするためにはまず、FacebookのデバッガーにURLを打ちこんでエラー内容を確認します。するとなんと metaタグがbody内に記述されている、という解釈になっていました。原因はhead宣言が正常に行われていなかったことで、それに伴いそれまでプラグインを使って設定していたOGPを、本ブログに倣って以下に変更しました。

・エントリーアーカイブ用（パーマリンク）

<meta property="og:type" content="article">
<meta property="og:locale" content="<$mt:BlogLanguage setvar="blog_lang"$><mt:If name="blog_lang" eq="ja">ja_JP<mt:else><$mt:Var name="blog_lang"$></mt:If>">
<meta property="og:title" content="<$mt:EntryTitle encode_html="1"$>">
<meta property="og:url" content="<$mt:EntryPermalink encode_html="1"$>">
<meta property="og:description" content="<$mt:EntryExcerpt remove_html="1" encode_html="1"$>">
<meta property="og:site_name" content="<$mt:BlogName encode_html="1"$>">
<meta property="og:image" content="<mt:EntryAssets type="image" limit="1"><$mt:AssetThumbnailURL height="320" square="1" encode_html="1"$></mt:EntryAssets>">

・トップページ用

<meta property="og:type" content="blog">
<meta property="og:locale" content="<$mt:BlogLanguage setvar="blog_lang"$><mt:If name="blog_lang" eq="ja">ja_JP<mt:else><$mt:Var name="blog_lang"$></mt:If>">
<meta property="og:title" content="<$mt:BlogName encode_html="1"$>">
<meta property="og:url" content="<$mt:BlogURL encode_html="1"$>">
<mt:If tag="BlogDescription"><meta property="og:description" content="<$mt:BlogDescription remove_html="1" encode_html="1"$>"></mt:If>
<meta property="og:site_name" content="<$mt:BlogName encode_html="1"$>">
<meta property="og:image" content="<mt:Assets type="image" tag="@SITE_ICON" limit="1"><$mt:AssetThumbnailURL width="320px" square="1" encode_html="1"$></mt:Assets>">

・ウェブページ用

<meta property="og:type" content="article">
<meta property="og:locale" content="<$mt:BlogLanguage setvar="blog_lang"$><mt:If name="blog_lang" eq="ja">ja_JP<mt:else><$mt:Var name="blog_lang"$></mt:If>">
<meta property="og:title" content="<$mt:PageTitle encode_html="1"$>">
<meta property="og:url" content="<$mt:PagePermalink encode_html="1"$>">
<meta property="og:description" content="<$mt:PageExcerpt remove_html="1" encode_html="1"$>">
<meta property="og:site_name" content="<$mt:BlogName encode_html="1"$>">
<meta property="og:image" content="<mt:Assets type="image" tag="@SITE_ICON" limit="1"><$mt:AssetThumbnailURL width="320px" square="1" encode_html="1"$></mt:Assets>">

トップとウェブページではタグで@SITE_ICONと設定した画像をサイトアイコンとして表示させるようにしています。

エントリーページではアセットとして登録している画像ファイルを320px x 320pxのサムネールを登録しています。FBの仕様では200 x 200 px画像でいいはずなのですが、たまに読み込みにミスするために多少大きめとしました。

以上の設定をしたサイトがこちらです。

［wonderdriving］

実際のhtml記述（head宣言内、エントリーページ）でのOGPはこうなります。

［くまさんホイールが復活！？　今度はリラックマだ #TAS2014【ワンダードライビング】］

<meta property="og:type" content="article"> <meta property="og:locale" content="ja_JP"> <meta property="og:title" content="くまさんホイールが復活！？　今度はリラックマだ #TAS2014"> <meta property="og:url" content="http://wonderdriving.com/archives/2014/01/rilakkuma-tas2014.html"> <meta property="og:description" content=" くまさんホイールといえば、80年代に登場しその斬新さとデザインの奇抜さに度肝を..."> <meta property="og:site_name" content="ワンダードライビング[wonder driving]"> <meta property="og:image" content="http://wonderdriving.com/archives/assets_c/2014/01/DSC_1388-thumb-320x320-2059.jpg">