2023年7月よりアップデートされた Ranklet4 公式ドキュメント（https://ranklet4.com/docs/meta）内 「サムネイル化とその回避」に、最新の方法が掲載されています。詳細は公式ドキュメントをご確認ください。
以前の記事で、サイトのページをランキング形式で表示する Ranklet の設置方法を紹介しました。
今回は MovableType.net 上で、Ranklet で表示される記事一覧の画像の容量をコントロールする方法をご紹介します。
Ranklet のランキングは、この活用ブログのようにタイトルの脇に画像も表示できますが、
通常は記事のOGP画像などが自動的に表示されます。
ただその場合、Facebook で推奨されているOGP画像のサイズが横幅1200px以上と比較的大きく、それを縮小して表示させることになるため、画像の容量が大きくなってしまうことがあります。
例えばランキングを10位まで表示させた場合、1200pxの画像を10個読み込むことになり、閲覧速度にも大きく影響を与える場合があります。
そこで、Ranklet の仕様である meta情報 に ranklet:image の情報を追加すれば、それを優先して見に行くようになる、という点を利用します。
これにより、例えば横幅120pxの画像を指定すれば画像の容量がとても小さくなり、閲覧速度向上が見込めます。
テーマによって若干違いますが、具体的な方法として今回は MEDIAテーマ の記事に対応する方法をご案内します。
- デザイン＞テンプレートのアーカイブ・テンプレートから記事をクリックし編集画面を開く
- header の中の meta情報 に og:image が記述されている行があるので、記述内容をその行より前にコピーする
※ Ranklet では同様の情報は先に読み込まれた方が優先されます
- その中のタグで次の部分を変更する
property="og:image"の部分をproperty="ranklet:image"に変更する
<$mt:AssetThumbnailURL width="1200"$>のwidthを120にする。これにより横幅が120pxで画像がリサイズされる
これで表示される記事が Ranklet のランキングで表示される際に、120pxの小さなサムネイル画像が表示されます。
※Rankletの情報更新頻度はプランによって違います
他のテーマでも og:image が指定されている場合は基本的に同様の手順で実現できますので、是非 Ranklet をお使いの方はお試しいただければと思います。
