以前以下の記事で、サイトのページをランキング形式で表示する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をお使いの方はお試しいただければと思います。
