MovableType.net 逆引き辞典

応用

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

記事を公開した際に、Facebookなどでシェアすると表示される画像がog:imageです。
このog:imageを任意の画像に変更します。
まずはog:image用の画像のカスタムフィールドを用意します。

続いて、MTタグを設定します。

使用するMTタグ

カスタムフィールドに設定された画像は、mt:CustomFieldAssetmt:AssetThumbnailURLを使って表示できます。
しかし、実際の運用では、カスタムフィールドが空の場合も考えられます。
そのため、mt:Ifを使い
「カスタムフィールドが空の場合には、記事内の1枚目の画像を使う」
「どちらも無い場合はサイト(ブログ)に用意した画像を使う」
と設定するとよいでしょう。
表示される優先順位は カスタムフィールドで指定した画像 > 記事の1枚目の画像 > サイト(ブログ)の画像 となります。
いくつかのベーステーマでは実際にこの実装をしていますのでご参照ください。

記述サンプル

記述

<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"
で、記事内で1つめにアップロードされた画像が指定されます。

どちらにも画像がない場合は、最後に記述された
<$mt:BlogURL encode_html="1"$>common/images/noimage-1200.png
に振り分けられ、サイト(ブログ)共通の画像が表示される仕組みです。