<p>MovableType管理下にあるブログのOGPを記事ごとに設定する方法です。</p>
<div class="code-block-container"><pre><code>MTクラウド版
バージョン 7
</code></pre></div><h2 id="1)-%E8%A8%98%E4%BA%8B%E3%81%AE%E3%82%AB%E3%82%B9%E3%82%BF%E3%83%A0%E3%83%95%E3%82%A3%E3%83%BC%E3%83%AB%E3%83%89%E3%82%92%E8%BF%BD%E5%8A%A0%E3%81%99%E3%82%8B">
<a class="header-anchor-link" href="#1)-%E8%A8%98%E4%BA%8B%E3%81%AE%E3%82%AB%E3%82%B9%E3%82%BF%E3%83%A0%E3%83%95%E3%82%A3%E3%83%BC%E3%83%AB%E3%83%89%E3%82%92%E8%BF%BD%E5%8A%A0%E3%81%99%E3%82%8B" aria-hidden="true"></a> 1) 記事のカスタムフィールドを追加する</h2>
<p><img src="https://storage.googleapis.com/zenn-user-upload/3d07337932fa-20220905.png" alt loading="lazy" class="md-img"></p>
<p>個別OGPを設定したいブログ（子サイト）のカスタムフィールド＞新規をクリックして、<br>
新しいカスタムフィールドを作成します。<br>
今回はシステムオブジェクトを「記事」に<br>
種類は「画像」にします。</p>
<p>ベースネームとテンプレートタグの命名はプロダクトのルールに従いましょう。</p>
<h2 id="2)-%E8%A8%98%E4%BA%8B%E6%8A%95%E7%A8%BF%E3%82%92%E7%A2%BA%E8%AA%8D%E3%81%99%E3%82%8B">
<a class="header-anchor-link" href="#2)-%E8%A8%98%E4%BA%8B%E6%8A%95%E7%A8%BF%E3%82%92%E7%A2%BA%E8%AA%8D%E3%81%99%E3%82%8B" aria-hidden="true"></a> 2) 記事投稿を確認する</h2>
<p>記事投稿時に追加したカスタムフィールドが設定されているか確認します。<br>
<img src="https://storage.googleapis.com/zenn-user-upload/6154fcb3fae0-20220905.png" alt loading="lazy" class="md-img"><br>
大丈夫そうですね。</p>
<h2 id="3)-1%E3%81%A7%E8%A8%AD%E5%AE%9A%E3%81%97%E3%81%9F%E3%83%86%E3%83%B3%E3%83%97%E3%83%AC%E3%83%BC%E3%83%88%E3%82%BF%E3%82%B0%E3%82%92%E3%83%A2%E3%82%B8%E3%83%A5%E3%83%BC%E3%83%AB%E3%81%AB%E7%B5%84%E3%81%BF%E8%BE%BC%E3%82%80">
<a class="header-anchor-link" href="#3)-1%E3%81%A7%E8%A8%AD%E5%AE%9A%E3%81%97%E3%81%9F%E3%83%86%E3%83%B3%E3%83%97%E3%83%AC%E3%83%BC%E3%83%88%E3%82%BF%E3%82%B0%E3%82%92%E3%83%A2%E3%82%B8%E3%83%A5%E3%83%BC%E3%83%AB%E3%81%AB%E7%B5%84%E3%81%BF%E8%BE%BC%E3%82%80" aria-hidden="true"></a> 3) 1で設定したテンプレートタグをモジュールに組み込む</h2>
<p>記事のHTMLを出力しているテンプレートモジュールに、先ほど作成したテンプレートタグを組み込みます。<br>
<img src="https://storage.googleapis.com/zenn-user-upload/78fc24c625ea-20220905.png" alt loading="lazy" class="md-img"><br>
デザイン＞テンプレート＞該当モジュールの<code>&lt;head&gt;&lt;/head&gt;</code>内に以下を追加しました。</p>
<div class="code-block-container"><pre><code>&lt;mt:If tag="EntryOgpImage"&gt;
 &lt;mt:EntryOgpImageAsset&gt;
  &lt;meta property="og:image" content="&lt;$mt:AssetURL$&gt;"&gt;
 &lt;/mt:EntryOgpImageAsset&gt;
 &lt;mt:Else&gt;
  &lt;meta property="og:image" content="デフォルトで表示したいOGPのURL"&gt;
&lt;/mt:If&gt;
</code></pre></div><p>今回は<code>&lt;meta property="og:image" content=""&gt;</code>にカスタムフィールドの画像アセットを出力したいので、</p>
<div class="code-block-container"><pre><code>&lt;mt:テンプレートタグ名Asset&gt;
 &lt;$mt:AssetURL$&gt;
&lt;/mt:テンプレートタグ名Asset&gt;
</code></pre></div><p>でラップします。<code>&lt;$mt:AssetURL$&gt;</code>はアセットのURLを呼ぶファンクションタグですが、正しい文脈で使わないと再構築エラーが起こったり、思った値が出力できないので気をつけましょう。</p>
<p>さらに記事別のOGPがある時はそれを呼ぶけれど、何も指定がない時はデフォルトのOGPを呼びたいので、<code>&lt;mt:if&gt;</code>で分岐させることにしました。</p>
<p>###　参考<br>
<a href="https://www.movabletype.jp/documentation/reference/" target="_blank" rel="nofollow noopener noreferrer">Movable Type公式リファレンス</a></p>


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

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

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

Discussion