WordPressプラグイン「Jetpack」を導入するとOGPタグを生成してくれてとても便利です。
ただog:imageは要注意です。
アイキャッチ画像が設定されていれば、og:imageにはアイキャッチ画像が指定され、アイキャッチ画像がなくてもメディア挿入されていればその中の1枚(私の環境では最初の一枚目)がog:imageに指定されます。
しかし、画像を持たない記事やホームの場合(これが一番問題)、設定する画像がないために、デフォルトでは「http://wordpress.com/i/blank.jpg」という画像が指定されてしまいます。その名の通りブランク画像です。これじゃ困りますよね。
<meta property="og:image" content="http://wordpress.com/i/blank.jpg" />
Jetpack本家サイトにしっかり方法が書かれている
Jetpackの本家サイトに、カスタマイズ方法が書かれておりました。もちろん英語です。萎えますね。
og:image — Search Results — Jetpack for WordPress
要約すると、「Jetpackはお前のサイトのホームではOGPタグに画像を指定しないから。だから以下のソースをfunctions.phpに貼ってね。そんでもって画像サイズは200×200にしないとFacebookではじかれるからね」ということのようです。
で、以下がソースです。 'YOUR_IMAGE_URL'の部分は適宜変更してください(画像ファイルのURLです)。
function fb_home_image( $tags ) {
if ( is_home() || is_front_page() ) {
// Remove the default blank image added by Jetpack
unset( $tags['og:image'] );
$fb_home_img = 'YOUR_IMAGE_URL';
$tags['og:image'] = esc_url( $fb_home_img );
}
return $tags;
}
add_filter( 'jetpack_open_graph_tags', 'fb_home_image' );
で、設定が終わったらFacebook DevelopersのOpen Graph Debuggerでチェックしてみるといいですよ。


