Jetpackが生成するog:imageをカスタマイズしたい

Doli the Cat
Doli the Cat © studio doli

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の本家サイトに、カスタマイズ方法が書かれておりました。もちろん英語です。萎えますね。

Jetpack og:imageカスタマイズ

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

Debugger

Wordpress, 備忘録 | , , |