井上 研一 最近、ずっと気になっていたのが、INOCCU VISIONのURLをFacebookにシェアしたときに、表示されるサムネイル画像が変だということ。
例えば・・・
こんな感じなのですが、記事はPythonのことなのに、使われている画像がNagiosなんです。全然違うじゃないか！
これくらいの間違いなら甘っちょろいくらいで（十分ダメだけど）、凄い真面目なビジネス記事を書いたのに、出てきたサムネイルがモーニング娘。とかね。決してモーニング娘。は悪くないんだけど、いや、それは違うだろと。
WordPressが吐き出すオープングラフは悪くない（基本的に）
Facebookで使われるサムネイルの画像は、そのページのHTMLに書いてあるオープングラフ情報に依存しています。
WordPressでは、デフォルトでオープングラフを出力することはないのですが、Jetpackを入れるとオープングラフを出力するようになります。
画像については、og:imageという名前で値がセットされますが、使用される画像は投稿のサムネイル画像として指定されたものか、記事の中で使用されている画像が使われるようです。
よって、少なくとも、Jetpackが吐き出したog:image情報が全然違うものだった（上記例ではNagiosの画像）ということではありませんでした。
そんなときはFacebook Debuggerだ！
Facebookは、デバッガーというサービスを提供しています。
サムネイル表示のおかしくなった記事のURLを調べてみると、下記のようなエラーが出力されました。
解決する必要があるオープングラフの警告
og:image should be larger: Provided og:image is not big enough. Please use an image that’s at least 200×200 and preferably 1500×1500. (Maximum image size is 5MB.)
つまり、og:imageで指定した画像のサイズが200×200より小さかったので、それがダメだということのようです。
どうやって解決するか？
考えられる方法は、以下の2つです。
- 投稿のサムネイルに200×200以上の画像を使うようにして、そのままJetpackを使う
- 独自にオープングラフを出力して、og:imageに200×200以上の画像が自動的に使われるようにする
まぁ、ふつうは案1で良さそうですが、INOCCU VISIONには記事がたくさんあるし、サムネイル絡みでは独自の仕組みを導入しているので、案2で行くことにしました。
Jetpackからオープングラフを出力しないようにする
テーマのfunctions.phpに、下記の記述を行います。
remove_action('wp_head', 'jetpack_og_tags');
あとは、よしなに。
ここから先は完全にINOCCU VISION独自の対応なので詳しくは書きませんが、テーマのheader.phpにオープングラフを出力するための記述を追記しました。
画像は、投稿のサムネイルに指定したものか、記事の先頭にある画像から、自動的に200×200の画像を生成するようにして、それを使っています。
結果の確認
Facebookデバッガーで記事のURLを指定した調査した後、画面の一番下あたりに、「See exactly what our scraper sees for your URL」というリンクが出てきます。これをクリックすると、再調査が出来ます。先ほど見た警告が表示されなくなることを確認しましょう。