MTタグ逆引き辞典

記事のog:imageに任意の画像を指定する

Facebookなどでシェアする場合に表示されるog:imageですが、記事を公開した際に任意の画像を表示させたい場合があります。

表示される優先順位としては、カスタムフィールドで指定した画像>記事の1枚目の画像>サイト(ブログ)全体の共通の画像といったようにしておくと、必ず画像が表示されるようになり運用も楽になります。
実際に、テーマRimoではこの実装をしていますのでご参照ください。

テンプレート記述例

アーカイブ・テンプレートの「記事」のhead内に記述する場合

<meta property="og:image" content="<mt:If tag="CustomFieldValue" identifier="blog_entry_ogp_image">
<mt:CustomFieldAsset identifier="blog_entry_ogp_image"><$mt:AssetThumbnailURL width="1200"$></mt:CustomFieldAsset>
<mt:Else><mt:EntryAssets type="image" sort_order="ascend" limit="1"><$mt:AssetThumbnailURL width="1200"$><mt:Else><$mt:BlogURL encode_html="1"$>common/images/noimage-1200.png</mt:EntryAssets>
</mt:If>">

まず、mt:If tag="CustomFieldValue" identifier="blog_entry_ogp_image" (※blog_entry_ogp_imageは作成した画像カスタムフィールドの識別子)では、カスタムフィールドに値があるかどうかの条件分岐を指定しその後 mt:CustomFieldAsset identifier="blog_entry_ogp_image" でカスタムフィールドの画像のサムネイルを表示します。

カスタムフィールドの画像がない場合に mt:EntryAssets type="image" sort_order="ascend" limit="1 で、記事内で最初にアップロードされた画像が指定されます。

画像がまったくない場合は最後に記述されたサイト(ブログ)共通の画像が表示されるようになっています。

使用したMTタグはこちら

Movable Type.net は無料トライアルが可能です。
Web制作者の方で、デモや評価利用をご希望の場合は、制作者向け評価ライセンスをご利用ください。

無料トライアル 資料ダウンロード 制作者向け評価ライセンス