Jetpackが自動生成するOGPをカスタマイズする

Jetpack の共有機能やパブリサイズ共有機能をオンにすると、自動的に Open Graph Protocol が生成されてサイトに埋め込まれます。

これが割とテキトーなので、ちょっとカスタマイズします。

Open Graph Protocol

Twitter や Facebook に共有されたときに、カードのような形で投稿できる。サイト名や URL, 内容が見やすく配置されるので、使わない手はない!

JetpackのOGP

衝突するなら消す

自動で生成してしまうので、元々テーマに埋め込まれていたコードと衝突して問題になることがしばしば…

Facebook なんかは重複コードをエラーとして検出していたりします。

もし重複するなら、Jetpack が出力している OGP をfunctions.php の書き換えなどにより消してしまうのがいいです。

Jetpackのみの利用ならカスタマイズ

テーマやプラグインで導入していないのなら、Jetpack の出力する OGP をそのまま使うのではなく、カスタマイズすると楽かもしれません。

Jetpack の OGP ではデフォルト画像が設定できないので、functions.php にコードを追加して対応します。

function my_open_graph_image_default( $image ) {
    $image = get_stylesheet_directory_uri() . '/images/mktia-blog-ogp.jpg';
    return $image;
}
add_filter( 'jetpack_open_graph_image_default', 'my_open_graph_image_default' );

/* サイトアイコンと別指定*/
function my_jetpack_open_graph_tags( $tags ) {
    $og_image_default = get_site_icon_url( 512 );
    if ( $tags["og:image"] == $og_image_default ) {
        $tags["og:image"] = get_stylesheet_directory_uri() . '/images/mktia-blog-ogp.jpg';
        $tags["og:image:width"] = 600; // 画像の幅
        $tags["og:image:height"] = 400; // 画像の高さ
    }
    return $tags;
}
add_filter( 'jetpack_open_graph_tags', 'my_jetpack_open_graph_tags' )

OGP に使用する画像を指定し直せば、このまま使えます。

参考サイト → WordPress JetpackのOGPタグのデフォルト画像とアーカイブ系での出力