【改訂版】JetpackのOGPのimageがブランクのときはサイトのロゴに

2015年10月27日2016年12月21日

この記事は最終更新日から8年経過しています。内容が古い可能性があります。

以前「JetpackのOGPのimageがブランクのときはサイトのロゴにする」という記事を書いたのですが、2014/7に書いたものだったために最近のJetpackでの出力がちょっと違ってきていました。
途中で別のblogに書いたりはしていたのですが、最近いくつかのサイトOGPのimageがブランクになってしまっているのを見かけたので改めて改訂版を書くことにしました。

記事をざっと見る

Jetpackをインストールすると自動的にOGPが出力される

Jetpackは色々便利なプラグインですので始めに入れる方も多いと思います。このblogでもかなり色々取り上げさせていただいています。

RYUS blog キーワード:jetpack

Jetpackはインストールすると自動的にOGPを出力します。たとえばあるサイトのソースを見てみると、

<!-- Jetpack Open Graph Tags -->
<meta property="og:type" content="website" />
<meta property="og:title" content="RYUS blog" />
<meta property="og:description" content="株式会社RYUSのblog" />
<meta property="og:url" content="http://ryuswp/" />
<meta property="og:site_name" content="RYUS blog" />
<meta property="og:image" content="https://s0.wp.com/i/blank.jpg" />
<meta property="og:locale" content="ja_JP" />

こんな感じに出力されているのが分かります。これがJetpackが出力しているOGPのソースです。

この場合のように、ブランクで表示されてしまってる状態だと

Facebookでシェアしたときにこのように画像部分がなにも表示されません。

どこでブランク画像を指定しているのか？

Jetpackが表示するog:imageは wp-content\plugins\jetpack\functions.opengraph.php　の function jetpack_og_get_image　という関数で取得しているようです。

以前blogを書いたときはここでどうしても画像が見つからなかったときに、

http://wordpress.com/i/blank.jpg

というブランク画像を当てはめていたようなのですが、今現在のJetpack(バージョン 3.7.2) では

    // Finally fall back, blank image
    if ( empty( $image ) ) {
        /**
         * Filter the default Open Graph Image tag, used when no Image can be found in a post.
         *
         * @since 3.0.0
         *
         * @param string $str Default Image URL.
         */
        $image['src'] = apply_filters( 'jetpack_open_graph_image_default', 'https://s0.wp.com/i/blank.jpg' );
    }

このようにコーディングされていて

https://s0.wp.com/i/blank.jpg

というブランク画像を利用しているようでした。これだと前回書いた対応方法ではファイル名が違うため対応できません。

functions.phpでog:imageを置き換えるコード

ということで子テーマのfunctions.phpにコードを追加して、Jetpackがブランクイメージを指定してるときはog:imageを置き換えるコードを新しく書き直してみます。

function add_default_image( $tags ) {
 
    // replace blank Jetpack default image with site header
    if ( substr($tags['og:image'], -9) == "blank.jpg" ) {
        // 表示したい画像のURLを指定する
        $tags['og:image'] = 'http://ryuswp/wp-content/themes/twentyfourteen-child/img/logo1.png';
    }

    return $tags;
}
add_filter( 'jetpack_open_graph_tags', 'add_default_image' );

$tagsからog:imageを参照するところも以前のコードから変わっていたようなのでその部分も書き換えました。
※追記:2016/12/21 うまく動かなかったのでソースを一部書き換えました。

og:imageの下9桁が　blank.jpg　だったときは、指定した画像を表示させるコードになっています。これでURLが多少変わっても対応できるかなーと思います。

// 表示したい画像のURLを指定する　の下に、ブランクだったときに、OGPとして表示したい画像のURLを指定します。

やることは

1.子テーマのfunctions.phpを書き換える(表示したい画像のURLはそれぞれ違います)。
2.表示したい画像をアップロードする

これだけです。これでブランクだったところに自分が指定した画像が表示されるようになります。