Rankletのサムネイルをイイ感じに差し替える

S3に静的WordPressを移してから束の間、
今日の午前中にGoogleのPageSpeed Insightsの結果を見て衝撃を受けました。

“うわっ…私のサイト評価低すぎ…”

どないなっとんねん、と思って詳細を見ると画像が完全にNG。

99%削減できるっておかしい。TinyPNGで圧縮してるしそこまで派手な警告は今までも無かった。最近追加したものでアヤシイものと言えば…

こ い つ ら だ 。

og:imageで指定している画像を、Ranklet側のCSSで無理矢理小さく表示している状態が↑。超イケてねぇ。10位まで表示したらどうなるんだ??これを何とか解決したのが、今回の記事の内容です。


■解決策:ranklet:imageでイイ感じの画像を参照する

同じ問題を解決している先人様がいらっしゃいます。

要は、og:imageの定義より前にranklet:imageでサムネにしたい画像を定義すれば良いと。これは非常に有難い・間違いない情報なのですが、如何せんやり方が分からない。静的化したhtmlを1つ1つ弄るのはあまりにも効率が悪すぎる。

そんならページ生成の際にphpでやればいいじゃん、という訳です。


■Open Graphのメタ情報を動的に書いてくれるプラグイン

静的な環境でも問題なく動いているので、私はSEO Ultimateプラグインを使用しています。色んな機能が付いているプラグインですがRobotメタタグの編集とOpen Graphの機能しか使ってません。

このプラグインはGUI上で好きなメタ情報を追加できる訳では無いので、プラグインのphpファイルを直接弄るしかありません。以下の方法は、似たようなOGプラグインであればある程度流用できると思います。


■Rankletのサムネに使う画像の用意

このためにわざわざ画像を用意するのは億劫だったので、使用しているテンプレートがデフォルトで吐いてくれている小さめの画像を使うことにしました。拘る人は頑張って用意して下さい。


■ranklet:imageが動的に生成されるようphpファイルを改変

編集するphpファイルはバックアップを取りましょう。後悔先に経たずです。

SEO Ultimateの場合、OGPの情報をhtmlヘッダーに書いてくれるphpファイルは以下のものです。

(中略)/wp-content/plugins/seo-ultimate/modules/opengraph/opengraph.php

こいつの挙動を簡単に書くと、

  • OGPに必要なmeta property(og:titleとかog:imageとか)は、キー配列($tags)で定義
  • 関数で動的に内容を決定
  • 定義完了後、$tagsを元に整形してひたすらヘッダーに出力

と言った感じです。つまり$tagsの中身にranklet:imageを紛れ込ませれば良い訳です。

$tagsの定義(厳密には$tags[og:image]の定義)が終わった直後に、以下の文をopengraph,phpに挿入します。

223 //Ranklet Image
224 if (isset($tags['og:image']))
225 $tags['ranklet:image'] = preg_replace('/.png$/', '-80x60.png', preg_replace('/-\d{3,}x\d{3,}/', '', $tags['og:image']));
226
227
228 //Sort tags because of Ranklet
229 krsort($tags);

(※左端は行番号です)

私の環境はこれでOKです。汎用性が低いので正直イケてないコードです。phpなんて触ったことが無い人間にはこれが限界です。WordPressの環境なら、少し弄れば応用できるはずです。何をやっているかは、次で具体的に説明します


■挿入コードの詳細

具体的な記事で説明します。マーラーの交響曲第1番の個人的名盤と言う記事を例に取ります。

SEO Ultimateプラグインを使うと、WordPressでアイキャッチ画像を設定している場合それがog:imageとして指定されます。その記事の場合、以下のような定義がhtmlヘッダーに書かれます。実際にページを開いて要素を見ればそうなっています。

<meta property="og:image" content="https://romantic-classic.tokyo/wp-content/uploads/2018/03/mahler1_all.png" />

一方、WordPressのGUI(メディア)から画像をアップロードすると、設定やテンプレートによってサムネイルが自動的に生成されます。私の環境の場合、mahler1_all.pngという画像をUPすると以下のサムネイルが生成されます。

$ ls -lh /var/www/html/wordpress/wp-content/uploads/2018/03/ | grep "mahler1_all"
-rw-r--r-- 1 apache apache 796K 4 1 15:28 mahler1_all-1080x600.png
-rw-r--r-- 1 apache apache 567K 4 1 15:28 mahler1_all-1260x350.png
-rw-r--r-- 1 apache apache 223K 4 1 15:28 mahler1_all-482x300.png
-rw-r--r-- 1 apache apache 329K 4 1 15:28 mahler1_all-700x321.png
-rw-r--r-- 1 apache apache 371K 4 1 15:28 mahler1_all-768x352.png
-rw-r--r-- 1 apache apache 409K 4 1 15:28 mahler1_all-800x367.png
-rw-r--r-- 1 apache apache 9.6K 4 1 15:28 mahler1_all-80x60.png
-rw-r--r-- 1 apache apache 388K 4 1 13:43 mahler1_all.png

(今はこんなに多く生成されません。ゴミが残ってました…)

Rankletのサムネイルとして、如何にも丁度いい画像(mahler1_all-80×60,png)があるため、今回はそれを使用することにします。

以上の状況をまとめると、$tags[ranklet:image]を$tags[og:image]を元に文字列置換(hoge-80×60.pngになるように)して定義すれば、動的にranklet:imageを生成できるようになります。それを一文でやっているのが225行目の1文です。

$tags['ranklet:image'] = preg_replace('/.png$/', '-80x60.png', preg_replace('/-\d{3,}x\d{3,}/', '', $tags['og:image']));

この1文で、

  • hoge-<3桁以上の数字>x<3桁以上の数字>.png → hoge.pngに置換
  • hoge.png → hoge-80×60.pngに置換して、それを$tag[ranklet:image]として定義

する事をやっています。hoge.pngを経由しているのは全部の画像ファイルを1つの命名形式にまとめたかったからです。こうしておけば、私の環境であればどんな画像(png)をアイキャッチ画像に指定しても、問題なくrankletのサムネイルがイイ感じになります。

他のjpgやgifファイルにも対応させたいなら、頑張って条件分岐文を書くか、もっとイケてる正規表現を使って置換して下さい。ちなみに余計な定義($tags[tmp:image]とかの宣言)をすると、それもまとめてhtmlヘッダーに吐かれてしまうのでやってはいけません。

ただしこのままだと、ranklet:imageがog:imageよりも後に定義されているため、出力されるhtmlにはranklet:imageがog:imageよりも後(下)に来てしまいます。これでは折角生成した意味がありません。そのため降順でキー配列をソートすれば、rank:imageの定義がog:imageよりも先に来るので、問題が無くなります。

krsort($tags);

■挿入コードの導入後

ranklet:imageの定義はバッチグー。og:imageよりも↑にちゃんと来ていますね。

 

Rankletの設定を少し弄るか数時間待てば、Rankletの表示にも問題なく反映されます。

 

PageSpeed Insightsの結果もイイ感じに。サイト評価低迷の原因はやっぱりRankletのサムネイルだったじゃないか…!

上乃木 燕二
クラシック音楽のブログを運営しています。後期ロマン派〜新ウィーン楽派がメイン。交響曲ネタが多目。オペラ・室内楽を扱うべく奮闘中。元トロンボーン奏者。チェロやりたい。マーラーとテンシュテットが心の師匠。