[WP]Jetpack のOGP（og:image）のデフォルト画像を変更する方法｜WordPressプラグイン｜WEBデザインの小ネタとTIPSのまとめサイト「ウェブアンテナ」

[WP]Jetpack のOGP（og:image）のデフォルト画像を変更する方法

スポンサード

WordPressの多機能プラグインJetpack のOPG機能を利用すると、<head>タグ内に自動でOGPを出力します。

ただし、OGPの<op:image>はJetpackプラグインが指定した画像が表示されてしまうため、今回はfunctions.php を編集してop:image を別の画像に変更する方法を紹介致します。

Jetpackのog:imageのデフォルト画像の変更

Jetpackの公式サイトで、デフォルト画像を変更する方法が掲載されています。

function custom_jetpack_default_image() {
    return 'YOUR_IMAGE_URL';
}
add_filter( 'jetpack_open_graph_image_default', 'custom_jetpack_default_image' );

function custom_jetpack_default_image() {

return 'YOUR_IMAGE_URL';

}

add_filter( 'jetpack_open_graph_image_default', 'custom_jetpack_default_image' );

wp-content/uploads/フォルダ内のメディアを利用する場合、YOUR_IMAGE_URL の部分を以下のように変えて、ご利用のテーマのfunctions.phpに追記します。

function custom_jetpack_default_image() {
    return home_url().'/wp-content/uploads/2015/10/ogp.jpg';
}
add_filter( 'jetpack_open_graph_image_default', 'custom_jetpack_default_image' );

function custom_jetpack_default_image() {

return home_url().'/wp-content/uploads/2015/10/ogp.jpg';

}

add_filter( 'jetpack_open_graph_image_default', 'custom_jetpack_default_image' );

テーマファイルの画像を利用する場合は、以下のようになります。

function custom_jetpack_default_image() {
    return get_template_directory_uri().'/img/ogp.jpg';
}
add_filter( 'jetpack_open_graph_image_default', 'custom_jetpack_default_image' );

function custom_jetpack_default_image() {

return get_template_directory_uri().'/img/ogp.jpg';

}

add_filter( 'jetpack_open_graph_image_default', 'custom_jetpack_default_image' );

参考ページ
How to add a default fallback image if no image can be found in a post

スポンサード