Movable Type サムネイル画像, アイキャッチ画像の指定方法

MTでの、OGP画像タグで指定するサムネイル画像の指定方法です。

社内では、Teamsを利用してリモート会議や情報交換をしているのですが、先日、Teamsで自分のブログサイトのURLを張り付けたところ、サムネイル画像付きの見出しが表示されました。

Teamsのこの振る舞いは知っていましたが、いざ自分のサイトのURLで表示されたサムネイル画像が、その記事の内容に合っていないと思い、サムネイル画像の指定を見直しました。

元々私は、SNSを利用していないので (オイっ!)、OGPタグに無頓着だったこともありますが、ITの仕事をしている者として、個人ブログのサムネイル画像が相応しくないというのも格好が悪いので、意図したサムネイル画像が選択されるようにテンプレートを修正しました。

まず最初に、なぜこのような状態になってしまっているのか？ですが、

当サイトは、Movable Type 6.7.x を使用しています。

使用しているテーマはクラシックブログですが、インデックステンプレートやアーカイブテンプレート、モジュールやシステムテンプレート、ウィジットなど、全て自分で書き換えたオリジナルのものです。

MTのすべてに精通しているわけではないので、レイアウトを考えて作る際に、Pico や Rainier なども参考に、見比べて調整しながら現在に至ります。

この時に、記事アーカイブのテンプレートのヘッダ部分に、Rainier のものを真似て、あまり良く考えずに持ってきたところが原因でした。

Rainier の記事アーカイブのテンプレートは、ヘッダ部分に次のタグがあります。

...
    <meta property="og:image" content="<mt:EntryAssets type="image" limit="1"><$mt:AssetThumbnailURL height="320" square="1" encode_html="1"$><mt:Else><mt:Assets type="image" tag="@SITE_ICON" limit="1"><$mt:AssetThumbnailURL height="320" square="1" encode_html="1"$><mt:Else><$mt:SupportDirectoryURL with_domain="1" encode_html="1"$>theme_static/rainier/img/siteicon-sample.png</mt:Assets></mt:EntryAssets>">
...
    <link itemprop="image" href="<mt:EntryAssets type="image" limit="1"><$mt:AssetThumbnailURL height="320" square="1" encode_html="1"$><mt:Else><mt:Assets type="image" tag="@SITE_ICON" limit="1"><$mt:AssetThumbnailURL height="320" square="1" encode_html="1"$><mt:Else><$mt:SupportDirectoryURL with_domain="1" encode_html="1"$>theme_static/rainier/img/siteicon-sample.png</mt:Assets></mt:EntryAssets>">

meta property="og:image" content=" ..ここ.. " と、

link itemprop="image" href=" ..ここ.. " の箇所では、中身はどちらも同じものになっています。

"og:image" content=" .. " が、サムネイルになるOGP画像になりますね。

なんだか長くて理解するのが嫌になりますが、この部分を見やすいようにばらしてみると次の様になります。

<..="
<mt:EntryAssets type="image" limit="1">
  <$mt:AssetThumbnailURL height="320" square="1" encode_html="1"$>
<mt:Else>
  <mt:Assets type="image" tag="@SITE_ICON" limit="1">
    <$mt:AssetThumbnailURL height="320" square="1" encode_html="1"$>
  <mt:Else>
    <$mt:SupportDirectoryURL with_domain="1" encode_html="1"$>theme_static/rainier/img/siteicon-sample.png
  </mt:Assets>
</mt:EntryAssets>
">

※参考: この部分の Movable Type テンプレートタグリファレンス
MTEntryAssets
MTAssetThumbnailURL

この内容の条件を理解すると、

1. その記事の画像アイテムがあれば、その画像のサムネイルURLを取得。

2. (Else) 全ての画像アイテム内で、タグが "@SITE_ICON" のものがあれば、その画像のサムネイルURLを取得。

3. (Else) ./theme_static/rainier/img/siteicon-sample.png にする。

という順に、画像URLを取得することになります。

問題になるのは 1. で、limit="1" により、ソートされた順の最初の1件目、つまりファイル名順の先頭の画像ということになるのかな？

ファイル名順の最初の画像というと、ファイル名を 0 で始めるとか姑息な方法で、意図したものにできるかもしれませんが、スマートでは無いですね。（昔のMTのカテゴリ並び順はこのような姑息な方法を用いていましたね）

ソート対象を sort_by="created_on" (追加日) にすれば、最初に登録された画像、もしくは降順ソートにすれば最後に登録した画像にすることができますが、サムネイル画像をあとで変えたいとかを考えると、現実的ではありません。

では、他の手として、応用できる答えになるものが、2. にあります。

2. では画像に対してタグの一致条件があります。これを、全ての画像アイテムではなく、その記事アイテムに対して行うものにして、一番最初の条件にすれば、意図した画像をサムネイル画像にさせることができます。

画像に付けるタグ文字列は "EntryThumbnail" としました。少し他の修正もしたものが、次のような条件になります。

<..="
<mt:EntryAssets type="image" sort_by="created_on" sort_order="descend" limit="1" tags="EntryThumbnail">
  <$mt:AssetThumbnailURL width="320" square="1" force="1" encode_html="1"$>
<mt:Else>
  <mt:EntryAssets type="image" sort_by="created_on" sort_order="descend" limit="1">
    <$mt:AssetThumbnailURL width="320" square="1" force="1" encode_html="1"$>
  <mt:Else>
    <mt:Assets type="image" tag="@SITE_ICON" limit="1">
      <$mt:AssetThumbnailURL width="320" square="1" force="1" encode_html="1"$>
    <mt:Else>
      <$mt:BlogURL encode_html="1"$>siteicon.png
    </mt:Assets>
  </mt:EntryAssets>
</mt:EntryAssets>
">

新しく、最初の条件に、その記事の画像アイテム内で、タグが "EntryThumbnail" のものがあれば、その画像のサムネイルURLを取得。ということになります。

ソート対象は sort_by="created_on" (追加日) にして、ソート順は sort_order="descend" (降順) にしました。

画像は square="1" により 1:1の正方形、width="320" で幅 320px 指定になるので、320 x 320 の画像が生成されます。force="1"により、元画像が 320 に満たない場合は、320 に引き伸ばされます。

AssetThumbnailURL では、width と height の両方を指定すると、縦横比を維持して縮小された画像で出力することが出来ますが、サムネイルは正方形の画像が必要になります。

仮に正方形では無いサムネイルを用意しても、読み取り側（Teamsなど）で、結局は正方形にされてしまうので、最初から正方形の画像になるように出力しておくのが良いです。

上記タグを一行にすると、

<mt:EntryAssets type="image" sort_by="created_on" sort_order="descend" limit="1" tags="EntryThumbnail"><$mt:AssetThumbnailURL width="320" square="1" force="1" encode_html="1"$><mt:Else><mt:EntryAssets type="image" sort_by="created_on" sort_order="descend" limit="1"><$mt:AssetThumbnailURL width="320" square="1" force="1" encode_html="1"$><mt:Else><mt:Assets type="image" tag="@SITE_ICON" limit="1"><$mt:AssetThumbnailURL width="320" square="1" force="1" encode_html="1"$><mt:Else><$mt:BlogURL encode_html="1"$>siteicon.png</mt:Assets></mt:EntryAssets></mt:EntryAssets>

というものになるので、

meta property="og:image" content=" ..ここ.. " と、

link itemprop="image" href=" ..ここ.. " の箇所に当てはまれば完了です。

あとは、各記事毎の画像アイテムで、画像のタグに EntryThumbnail を付けて登録し、記事アーカイブを再構築することで、意図した画像をサムネイルにすることが出来ます。

記事毎の画像アイテムで、EntryThumbnail のタグが付くものは一つになるようにしておくのが良いですが、使用したい画像が他の記事と被ってしまう場合は、妥協してその画像をサムネイルにするか、画像が被らないように別ファイルの画像を登録するなどが必要になります。

ここまで、サムネイル画像を意識していますが、アイキャッチ画像に応用する場合でも、同じ様に特定のタグを画像に与えておくことで対応出来ます。

タイトル下位置に、アイキャッチ用の画像を出力するようにテンプレートを調整しておけば、自動的にアイキャッチ画像を出力させることができます。

アイキャッチ画像の場合は、横長の長方形の画像になりますが、中央部分が正方形にくり抜かれても大丈夫なように画像を用意しておくと、サムネイルとアイキャッチの指定画像を同じもので使えますね。

以上、テンプレートを編集して、サムネイル画像を意図したものに指定する方法でした。

さて・・

すでにある記事に登録されている画像は、記事内の説明のための画像で、サムネイル画像を意識して登録した画像ではないので、サムネイル用に綺麗な画像を用意して修正するには時間が掛かりますが、地道に、気が向いたときにでも修正していこうかなと思います。