jetpackのパブリサイズ共有でFacebookやGoogle+にアイキャッチ画像を設定する方法

2017.03.072018.06.02

このブログはWordPressで運営しているのですが、その中でプラグイン「Jetpack by WordPress.com」を使用しています。

このプラグインは、アクセス解析やらコンタクトフォームやらサイトを運営する上で便利な機能がお得なパッケージで入ってるよってやつです。
特に人気な機能として、ブログの記事を公開した際にTwitterやFacebookなどの各種SNSに連携して通知する「パブリサイズ共有」という機能があります。
新しい記事を公開したら、自動でTwitterに記事のツイートを行ってくれるヤツですね。

Jetpackのパブリサイズ共有機能で1つの投稿をSNSに拡散する

このblogは投稿したときにFacebook,Twitter,Google+にシェアされるように設定してあります。色々な方法があると思うのですが私はJetpackの「パブリサイズ共有機能」を使っています。1つのblogを投稿すると同時に複数

ただ、なかなかどうして上手く行かないこともしばしばあります。

問題
解決方法
その他参考にした記事
まとめ

問題

新しい記事を公開した時に、Twitterだと設定したアイキャッチ画像が正しく添付されて通知をしてくれます。

ところが、Facebookを見てみると、、、

こんな感じで、設定したものとは違う画像が表示されてしまいます。

ヒドイときには前の記事の画像が表示されるなんてこともありました…

今回はこいつを解決してみたいと思います。

解決方法

以下の記事を参考にさせていただきました。

【WordPress】アイキャッチ画像をFacebookのOGPに指定する方法｜しらさかブログ

上記サイトでは、アイキャッチ画像がある場合とない場合で動作が分かれていましたが、管理人のブログでは記事を公開する時には常にアイキャッチ画像をつけるようにしているので以下のように書き換えました。

<?php
if(is_single() && has_post_thumbnail()) {
//アイキャッチある場合
$thumbnail_id = get_post_thumbnail_id($post->ID);
$image = wp_get_attachment_image_src($thumbnail_id, 'full');
echo '<meta property="og:image" content="'. $image[0].'" />';
}
?>

このコードをheader.php内の、headタグ内に記述をしてみてください。

他の変更点としては、表示される画像のサイズをサムネイルサイズから赤文字の「full」に変更しています。

これにより、画像が大きく表示されてより目立つようになります。