Facebookで記事をシェアした時にアイキャッチ画像が表示されていないことがありました。
アイキャッチも記事が読まれるために必要な一つの重要ファクターだと思ってます。
せっかく頑張って書いたのにアイキャッチが出ないなんてビジュアル的にも残念でしかありません。
そう歯がゆい思いをしながら原因を調べてみると、色々対処法が見つかりましたのでこの場でそのやり方をみなさんに共有しておこうと思います。
アイキャッチが出ていない・・
Facebookでシェアした記事にアイキャッチが表示されない問題の原因
これ調べたところFacebook側に大部分問題あるようです。多分バグです。
また、画像が大きすぎる、あるいは日本語URLになっているためURLが長すぎるといった場合により不具合が起きることもあるのでいずれにせよ、ぜひ修正したいところです。
Facebook側の問題
Facebookで標準とされている画像サイズが480×250ピクセルのようです。つまりこれより大きいサイズになると画像の容量が大きすぎてうまく読み込めないことがあります。
またFacebookにはFacebookデバッカーというリンク先のサムネイルを確認するツールがあります。
後ほど使い方をご説明しますが、あらかじめこのツールを使ってシェアの予行練習をしておくといいでしょう。
Facebookですでにシェアした記事のアイキャッチ修正
すでにシェアしてしまった記事の修正を行う場合はどうしましょうか？
一旦消してから再度サムネイルを入れ直して投稿しなおすのも構いませんが、すでにコメントなどを入れてしまっていたら色々と面倒です。
しかし、そんな場合でも一旦投稿した記事にアイキャッチ画像を読み込ますことは可能です。
まずは投稿した記事の日付の部分をクリック
次に右上から「シェアした添付ファイルを更新」をクリック
これでサムネイルが読み込まれていることが確認できました。
ここで、さらなる問題に直面。一応これでサムネイル画像は挿入されましたが、記事のアイキャッチではなく記事内の画像から自動で抽出されており、いまいちパッとこない画像になってしまいました。
これ、結論いうとOGPの設定ができていないからです。
Facebookでシェアする前に登録されているog:imageをチェックしよう！
さて、ここで先ほど紹介したFacebookの開発者向けツールデバッカーの登場です。
まずは公開予定の記事URLを入力し「新しいスクレイピング情報の取得」をクリック
この画面からシェアされる前のFacebookカードの確認ができます。
するとやはりシェアされる記事のサムネイル画像が記事中の画像から抽出されいまいちな感じになっていることが伺えます。
og:imageを確認すると、確かに記事中の（なぜか2番目の）画像が設定されていました。なのでこのog:imageを設定できる状態にしなければ、Facebook側に勝手にサムネイル画像の設定をさせることになってしまいます。
WodPressにプラグインなしでOGPを設定しよう！
OGPとは
OGPとは「Open Graph protocol」の略称でウェブページの内容をプログラムが把握しやすい形式で書いたものです。FacebookやTwitterなどのSNSでシェアされた際に、そのページのタイトルやURL、概要、アイキャッチ画像を正しく表示させる仕組みになります。
OGPとは｜FacebookのOGP設定に必要なfb:admins IDの確認方法
https://tcd-theme.com/2016/07/facebook-3.html#OGP
つまり、サイト内でOGPを設定しないと、シェアされたサムネイル画像を指定することはできません。
OGPの設定はプラグイン「WP-OGP」を使っても可能ですが、プラグインなしでも可能です。
方法は下記に記してあります↓↓
WordPressに手動でOGPを設定する｜FacebookのOGP設定に必要なfb:admins IDの確認方法
https://tcd-theme.com/2016/07/facebook-3.html
これにより無事アイキャッチが表示されるようになりました。
まとめ
弊社のテーマではすでにあらかじめFacebookのOGP設定が可能なようにテーマオプションに組み込まれています。
こんな感じで、アイキャッチのない投稿記事やアーカイブページなどでOGP用画像として利用できるアイキャッチの設定も可能となっています↓↓
TCDでは利用目的に応じたテーマ選びが可能となっています。詳しくはTCDテーマ比較ナビをチェック！
