JetpackでトップページのOGP画像をカスタマイズする方法

Jetpackの共有でOGPタグを出力させると、
デフォルトではトップページの画像は、
http://wordpress.com/i/blank.jpgが出力されてしまいます。
それを自分の画像にカスタマイズする方法です。

Sponsored Link

JetpackでOGPタグを出力させたら、下記のソースが出力されてしまいました。

<meta property="og:image" content="http://wordpress.com/i/blank.jpg”>

これを任意の画像に出力する方法です。
jetpackの公式ページに載っています。

最初検索した時は、

function fb_home_image() {
$fb_home_img = 'YOUR_IMAGE_URL';
$fb_home_img_output = sprintf( '<meta property="og:image" content="%s" />', esc_attr( $fb_home_img ) );
if ( is_home() )
echo $fb_home_img_output;
}
add_action( 'wp_head', 'fb_home_image' );

とJetpackの公式サイト載っていて、
この方法では、自分のカスタマイズした画像とデフォルトの画像の2つが重複して出力されてしまい、
困ってしまいました(;´∀`)

まがりんに相談したのは言うまでもなく。
JetpackでOGP関係で色々問題があったので、
それらも含めて相談していました。

そしたら、相談していた途中で公式ページのソースが更新されるという、
まさかの自体w

jetpackのOGP画像

ですが、閉じタグが抜けていたので、
使う人は皆さん、気を付けてね。

自分の使用しているテーマ内の、functions.phpに下記のソースを記述すればOKです。

function fb_home_image( $tags ) {
    if ( is_home() ) {
        // 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' );

多謝:まがりん様様

私は結局、他の問題が解決できない(公式のやり方ではソースの問題で効かない問題)ので、
JetpackでのOGP出力は止めて、
まがりん作のWP SiteManagerを使うことで解決しました。

このJetpackのOGP出力を止める方法は別記事で書きます。

Sponsored Link