応用
記事のog:imageに任意の画像を指定する
記事を公開した際に、Facebookなどでシェアすると表示される画像がog:imageです。
このog:imageを任意の画像に変更します。
まずはog:image用の画像のカスタムフィールドを用意します。
続いて、MTタグを設定します。
使用するMTタグ
カスタムフィールドに設定された画像は、mt:CustomFieldAssetとmt: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
に振り分けられ、サイト(ブログ)共通の画像が表示される仕組みです。