[WP]JetpackのOGP（og:image）にアイキャッチ画像を出力する方法

WordPress

2015.12.15

以前にJetpack のOGP（og:image）のデフォルト画像を変更するの記事で紹介させていただいた方法は、ブログのどのページでも同じOGP画像を出力するというカスタマイズでしたが、

今回は、記事のアイキャッチ画像の有無を判定して、アイキャッチがあればOGP画像に出力できるようにするという方法を紹介致します。

Jetpackのog:imageをアイキャッチ画像にする

Jetpackの公式サイトでは、ページ別にOGP画像を出力する方法が掲載されていますが、

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' );

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' );

このコードを元に、ブログ記事にアイキャッチがあるかどうかを判定して、あればog:imageにアイキャッチを、なければデフォルトの画像を表示させるようにカスタマイズしてみます。

function fb_home_image( $tags ) {
    // Remove the default blank image added by Jetpack
    unset( $tags['og:image'] );

    // TOPページの場合
    if (is_home() || is_front_page()){
        $fb_home_img = get_template_directory_uri().'/img/ogp.jpg';
    
    // Singleページの場合
    } elseif (is_single()){

    // アイキャッチの有無の判定
    $str = $post->post_content;
    $searchPattern = '/<img.*?src=(["\'])(.+?)\1.*?>/i';

        if (has_post_thumbnail()){
        $image_id = get_post_thumbnail_id();
        $image = wp_get_attachment_image_src( $image_id, 'full');
            $fb_home_img = $image[0];
        } else if ( preg_match( $searchPattern, $str, $imgurl ) && !is_archive()) {
            $fb_home_img = $imgurl[2];
        } else {
            $fb_home_img = get_template_directory_uri().'/img/ogp.jpg';
        }

    // その他のページの場合
    } else {
        $fb_home_img = get_template_directory_uri().'/img/ogp.jpg';
    }
    $tags['og:image'] = esc_url( $fb_home_img );
    return $tags;
}
add_filter( 'jetpack_open_graph_tags', 'fb_home_image' );

function fb_home_image( $tags ) {

// Remove the default blank image added by Jetpack

unset( $tags['og:image'] );

// TOPページの場合

if (is_home() || is_front_page()){

$fb_home_img = get_template_directory_uri().'/img/ogp.jpg';

// Singleページの場合

} elseif (is_single()){

// アイキャッチの有無の判定

$str = $post->post_content;

$searchPattern = '/<img.*?src=(["\'])(.+?)\1.*?>/i';

if (has_post_thumbnail()){

$image_id = get_post_thumbnail_id();

$image = wp_get_attachment_image_src( $image_id, 'full');

$fb_home_img = $image[0];

} else if ( preg_match( $searchPattern, $str, $imgurl ) && !is_archive()) {

$fb_home_img = $imgurl[2];

} else {

$fb_home_img = get_template_directory_uri().'/img/ogp.jpg';

}

// その他のページの場合

} else {

$fb_home_img = get_template_directory_uri().'/img/ogp.jpg';

}

$tags['og:image'] = esc_url( $fb_home_img );

return $tags;

}

add_filter( 'jetpack_open_graph_tags', 'fb_home_image' );

上記コードをfunctions.phpに追記します。

なお、上のコードではデフォルトの画像はget_template_directory_uri().'/img/ogp.jpg';にしていますが、ここはご利用の環境に合わせて変更してみてください。

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