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でチェックしてみるといいですよ。