Zenn
📌

[MovableType] 記事ごとにOGPを出力する

2022/09/05に公開
CMS
Movable Type
tech

MovableType管理下にあるブログのOGPを記事ごとに設定する方法です。

MTクラウド版
バージョン 7

1) 記事のカスタムフィールドを追加する

個別OGPを設定したいブログ（子サイト）のカスタムフィールド＞新規をクリックして、
新しいカスタムフィールドを作成します。
今回はシステムオブジェクトを「記事」に
種類は「画像」にします。

ベースネームとテンプレートタグの命名はプロダクトのルールに従いましょう。

2) 記事投稿を確認する

記事投稿時に追加したカスタムフィールドが設定されているか確認します。

大丈夫そうですね。

3) 1で設定したテンプレートタグをモジュールに組み込む

記事のHTMLを出力しているテンプレートモジュールに、先ほど作成したテンプレートタグを組み込みます。

デザイン＞テンプレート＞該当モジュールの<head></head>内に以下を追加しました。

<mt:If tag="EntryOgpImage">
 <mt:EntryOgpImageAsset>
  <meta property="og:image" content="<$mt:AssetURL$>">
 </mt:EntryOgpImageAsset>
 <mt:Else>
  <meta property="og:image" content="デフォルトで表示したいOGPのURL">
</mt:If>

今回は<meta property="og:image" content="">にカスタムフィールドの画像アセットを出力したいので、

<mt:テンプレートタグ名Asset>
 <$mt:AssetURL$>
</mt:テンプレートタグ名Asset>

でラップします。<$mt:AssetURL$>はアセットのURLを呼ぶファンクションタグですが、正しい文脈で使わないと再構築エラーが起こったり、思った値が出力できないので気をつけましょう。

さらに記事別のOGPがある時はそれを呼ぶけれど、何も指定がない時はデフォルトのOGPを呼びたいので、<mt:if>で分岐させることにしました。

###　参考
Movable Type公式リファレンス

Discussion