FacebookにURLをシェアした時に表示されるサムネイル画像が変な場合の対応策

最近、ずっと気になっていたのが、INOCCU VISIONのURLをFacebookにシェアしたときに、表示されるサムネイル画像が変だということ。

例えば・・・

Facebook opengraph miss

こんな感じなのですが、記事はPythonのことなのに、使われている画像がNagiosなんです。全然違うじゃないか!

これくらいの間違いなら甘っちょろいくらいで(十分ダメだけど)、凄い真面目なビジネス記事を書いたのに、出てきたサムネイルがモーニング娘。とかね。決してモーニング娘。は悪くないんだけど、いや、それは違うだろと。

WordPressが吐き出すオープングラフは悪くない(基本的に)

Facebookで使われるサムネイルの画像は、そのページのHTMLに書いてあるオープングラフ情報に依存しています。

WordPressでは、デフォルトでオープングラフを出力することはないのですが、Jetpackを入れるとオープングラフを出力するようになります。
画像については、og:imageという名前で値がセットされますが、使用される画像は投稿のサムネイル画像として指定されたものか、記事の中で使用されている画像が使われるようです。

よって、少なくとも、Jetpackが吐き出したog:image情報が全然違うものだった(上記例ではNagiosの画像)ということではありませんでした。

そんなときはFacebook Debuggerだ!

デバッガー  Facebook開発者

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つです。

  1. 投稿のサムネイルに200×200以上の画像を使うようにして、そのままJetpackを使う
  2. 独自にオープングラフを出力して、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」というリンクが出てきます。これをクリックすると、再調査が出来ます。先ほど見た警告が表示されなくなることを確認しましょう。

この記事を書いた人

井上 研一

経済産業省推進資格ITコーディネータ/ITエンジニア。
合同会社井上研一事務所代表、株式会社ビビンコ代表取締役。
北九州市出身、横浜市在住。AIやIoTに強いITコーディネータとして活動。北九州市主催のビジネスコンテスト「北九州でIoT」に応募したアイディアが入選し、メンバーと株式会社ビビンコを創業。著書に「初めてのWatson」、「ワトソンで体感する人工知能」など。セミナーや研修講師での登壇多数。