MovableTypeでFacebookとかTwitter Card用にOGPを設定してみる

Movable Type
2020.05.18

今更なんですが、Movable Type の記事とかウェブページとかにOGPを設定するテンプレートモジュールを作ってみました。

サイト制作の都度、アーカイブテンプレートに設定しているのがだるかったのでちょろっと作成。10年前にやっとけよ！って話ですね。

まぁ、かなり雑な作りですが、ちゃんと動いているような気がします。

テンプレートモジュールのコード

<mt:For regex_replace="/^[\ \t\r\n]+/mg","">

<mt:Ignore>----設定：デフォルトキャッチ画像----</mt:Ignore>
<mt:Var name="ImageURL" value="https://www.example.com/default.png">

<mt:Ignore>----設定：Twitter Card のタイプ(summary | summary_large_image)----</mt:Ignore>
<mt:Var name="TwitterCard" value="summary">

<mt:Ignore>----設定：Twitter ユーザー / ブランク(value="")にするとmetaタグ自体を出力しない----</mt:Ignore>
<mt:Var name="TwitterUser" value="@foo">
<mt:Var name="TwitterCreator" value="@foo">

<mt:Ignore>----記事とウェブページの場合、登録日の最も古い画像アセットを取得、なければデフォルトキャッチ画像を選択(sort_by と sort_order を変更すれば別の基準でアセットを取得できる。)----</mt:Ignore>
<mt:If name="page_archive">
  <mt:PageAssets type="image" sort_by="created_on" sort_order="ascend" limit="1">
      <$mt:AssetURL setVar="FirstAsset"$>
  </mt:PageAssets>
  <mt:If name="FirstAsset"><mt:Var name="ImageURL" value="$FirstAsset"></mt:If>
</mt:If>
<mt:If name="entry_archive">
  <mt:EntryAssets type="image" sort_by="created_on" sort_order="ascend" limit="1">
      <$mt:AssetURL setVar="FirstAsset"$>
  </mt:EntryAssets>
  <mt:If name="FirstAsset"><mt:Var name="ImageURL" value="$FirstAsset"></mt:If>
</mt:If>

<mt:Ignore>----output----</mt:Ignore>

<mt:If name="main_index">
  <meta property="og:type" content="website">
  <meta property="og:description" content="<$mt:BlogDescription$>">
  <meta property="og:title" content="<$MTBlogName$>">
  <meta property="og:url" content="<$mt:BlogURL$>">
  <meta property="og:image" content="<mt:Var name="ImageURL">">
  <meta property="og:site_name" content="<$MTBlogName$>">
  <meta property="og:locale" content="ja_JP">
  <meta name="twitter:card" content="<mt:Var name="TwitterCard">">
  <mt:If name="TwitterUser"><meta name="twitter:site" content="<mt:Var name="TwitterUser">" /></mt:If>
  <mt:If name="TwitterCreator"><meta name="twitter:creator" content="<mt:Var name="TwitterCreator">" /></mt:IF>

<mt:ElseIf name="page_archive">
  <meta property="og:type" content="article">
  <meta property="og:description" content="<$MTPageExcerpt$>">
  <meta property="og:title" content="<$mt:PageTitle$>">
  <meta property="og:url" content="<$mt:CanonicalURL$>">
  <meta property="og:image" content="<mt:Var name="ImageURL">">
  <meta property="og:site_name" content="<$MTBlogName$>">
  <meta property="og:locale" content="ja_JP">
  <meta name="twitter:card" content="<mt:Var name="TwitterCard">">
  <mt:If name="TwitterUser"><meta name="twitter:site" content="<mt:Var name="TwitterUser">" /></mt:If>
  <mt:If name="TwitterCreator"><meta name="twitter:creator" content="<mt:Var name="TwitterCreator">" /></mt:IF>

<mt:ElseIf name="archive_listing">
  <meta property="og:type" content="website">
  <meta property="og:title" content="<$mt:BlogName$><$mt:ArchiveTitle$>アーカイブ">
  <meta property="og:url" content="<$mt:CanonicalURL$>">
  <meta property="og:image" content="<mt:Var name="ImageURL">">
  <meta property="og:site_name" content="<$MTBlogName$>">
  <meta property="og:locale" content="ja_JP">
  <meta name="twitter:card" content="<mt:Var name="TwitterCard">">
  <mt:If name="TwitterUser"><meta name="twitter:site" content="<mt:Var name="TwitterUser">" /></mt:If>
  <mt:If name="TwitterCreator"><meta name="twitter:creator" content="<mt:Var name="TwitterCreator">" /></mt:IF>

<mt:ElseIf name="entry_archive">
  <meta property="og:type" content="article">
  <meta property="og:description" content="<$MTEntryExcerpt$>">
  <meta property="og:title" content="<$mt:EntryTitle$>">
  <meta property="og:url" content="<$mt:CanonicalURL$>">
  <meta property="og:image" content="<mt:Var name="ImageURL">">
  <meta property="og:site_name" content="<$MTBlogName$>">
  <meta property="og:locale" content="ja_JP">
  <meta name="twitter:card" content="<mt:Var name="TwitterCard">">
  <mt:If name="TwitterUser"><meta name="twitter:site" content="<mt:Var name="TwitterUser">" /></mt:If>
  <mt:If name="TwitterCreator"><meta name="twitter:creator" content="<mt:Var name="TwitterCreator">" /></mt:IF>
</mt:If>

</mt:For>

使用方法

対象は、main_index と、ウェブページ、記事、リストアーカイブの４つにしてあります。これら以外の場所では何も出力しません。mt:elseif で分岐してるので、不要な部分は削除したり、必要なものを追加してください。

冒頭の設定のところでデフォルトのキャッチ画像とTwitterのアカウントを手打ちしといてあげればOK。

テンプレートモジュールに適当な名前で登録し、<head>～</head>内に <mt:Include module=”モジュール名”> で呼び出して使用します。

なお、mt:For で無駄改行は削除してます。

また、escape=”html” とか、trim とかしてないので利用環境に合わせて、適宜MTタグにモディファイアを追加したほうが良いと思います。

ユーザーにカスタムフィールドを設定してTwitterアカウントを入力させておけば、記事を作成したユーザー毎にTwitterアカウントを変更することも可能ですね。上のコードをちょっと改造する必要がありますけれど。

スポンサーリンク

コメント