OpenGraphProが吐く<og:image>画像が小さい。とFacebookに怒られる場合の対処
WordPress の OGP（The Open Graph protocol） 設定のお話。
去年の7月頃にプラグインを WP-OGP → OpenGraphPro へ乗り換えてからは問題無かったのですが、先日、Facebook にうちの記事を流そうとしたら画像が引用されなくなってまして、どういうことか？と思い Facebook のデバッガで確認したらこんな警告が出るようになっていました。
Tiny og:image: All the images referenced by og:image must be at least 200px in both dimensions. Please check all the images with tag og:image in the given url and ensure that it meets the minimum specification.
なるほど。200px 四方以上のサイズが必要なのね。と。
どう対処するか迷ったんですが、Wordpress やらプラグイン「OpenGraphPro」のソースを覗いたら、意外と簡単に対処できる事が分かったのでメモ。
OpenGraphPro のダウンロードは以下、またはダッシュボードから。
Open Graph Pro の改変
対象は Open Graph Pro Version 1.0 (2011-6-20)です。
110行目あたりにこんな感じの所があるので…
// image -- if we have any post images, use them; featured image (a.k.a. post thumbnail) will be preferred (if there's no image here, use header image from above)
if ( !is_array ( $options ) || !isset ( $options['image']['headeronly'] ) || ( '1' != $options['image']['headeronly'] ) )
{
if ( function_exists ( 'has_post_thumbnail' ) AND has_post_thumbnail($thispost->ID) )
{
$attachment = wp_get_attachment_image_src ( get_post_thumbnail_id($thispost->ID) );
$image = esc_attr ( $attachment[0] );
}
elseif ( preg_match ( '/<img\s[^>]*src=["\']?([^>"\']+)/i', $thispost->post_content, $match ) )
$image = esc_attr ( $match[1] );
}108行目の wp_get_attachment_image_src を呼び出している行を以下に書き換えるだけ。
$attachment = wp_get_attachment_image_src ( get_post_thumbnail_id($thispost->ID),'medium' );
ここでは例として ’medium’ を指定していますが、設定や元画像の縦横比によっては縦横 200px 以上。という Facebook の規定から外れるかもしれないので、定義済みのカスタムサイズを指定しても問題はありません。
なお、この方法はプラグインのソースを直接いじっているため、将来プラグインのアップデートがあった場合は上書きされてしまいます。
とはいってもこの内容なら、すぐに大きい問題にはならないとは思いますが。
管理画面から画像のサイズ選択ができたら便利そう
最近は更新されていない Open Graph Pro ですが、どなたか管理画面からアイキャッチ画像のサイズを選択できるようにしてみません？（苦笑）
無理やりプラグインでやろうとすると面倒
やろうとしている事は単純なのに、無理やりプラグインを使おうとすると色々めんどくさいったらありません。
OGP 関係は去年、プラグイン同士の相性も含めて検証が面倒だった記憶がありまして、最近はもういっその事プラグインを使わずにテンプレートから自力で吐く様にしてやろうかしら…。と思ったり思わなかったりも。
検索様キーワード：サムネイル画像
参考サイト
Function Reference « WordPress Codex
Function Reference/wp get attachment image src « WordPress Codex
