「記事をSNSでシェアしたのに、OGP画像が表示されない…」
こんな困った現象が起こることがあります。投稿にOGP画像（アイキャッチ画像）の表示がないのは、コンビニの本棚に並んだ雑誌の表紙に絵柄が何もないようなもの。地味すぎて、目を惹くことはできません（意図的に真っ白なデザインにした表紙もありますが……）。
そんなときはシェアデバッガーやCard validatorでデバッグするのが定番ですが、それでもWordPressで設定したOGP画像が表示されない問題が発生し、困っていました。単純な方法で解決したので、メモしておきます。
OGP画像が表示されない！対策その1
OGP画像がSNSで表示されないとき、まず試したいのはキャッシュクリアです。問題が発生するページURLを入力するだけなのでとても簡単ですし、そのページの制作者でなくても大丈夫。「Amazonの商品を紹介したいのに画像が出ない！」なんてときも便利です。
Facebookの場合
ある記事をFacebookで共有してもOGP画像が表示されないとします。その場合、該当記事のURLをMeta for Developers内にあるシェアデバッガ―（Sharing Debugger）に入力し、Debug（デバッグ）をクリックします。
デバッグをクリック後、プレビューにOGP画像が表示されない、もしくは古いOGP画像が表示される場合は「Scrape Again（もう一度スクレイピング）」をクリックします。
Twitterの場合
Twitterで共有したい場合は、Twitter Developer内にあるカードバリデーター（ Card validator）のCard URLに共有したい記事のURLを入力し、Preview Cardをクリックします。
（シェアデバッガ―もカードバリデーターも、キャッシュクリアが成功するまで複数回のクリックが必要なことがあります）
OGP画像が表示されない！対策その2
MetaのアプリIDを取得する
シェアデバッガ―で、「プロパティがありません」のエラーメッセージが表示されることがあります。FacebookでのOGP設定には、アプリIDの取得が必要です。
FacebookのOGP設定に必要なアプリID（app_id）の 取得方法
↑筆者はこちらを参考に設定しました。
OGP画像が表示されない！対策その3
対策1と対策2を行い、解決したのかというと…………
1つのサイトで問題が解消できませんでした。シェアデバッガ―ではプレビュー画像が正しく表示されるものの、実際にFacebookで共有するとOGP画像部分が真っ白になってしまいます。もちろん、WordPress側でアイキャッチ画像は設定済みです。
Meta側で拒否しているのでは？とも疑ったのですが、原因はWordPress側にありました。プラグインでFacebook用のOGP画像を指定おり、しかもその画像をメディアライブラリから削除していたことでエラーが発生していたようです。プラグイン「All in One SEO」のソーシャルメディア設定で、Facebook用のOGP画像指定をリムーブし、Default Post Image SourceをFeatured Imageに変更したところ、Facebook共有時にOGP画像が表示されるようになりました。
All in One SEO Packの「ソーシャルメディア」設定の方法や使い方
↑筆者はこちらを参考にAll in One SEOを設定しました。
ちなみにTwitterも同じ設定でしたが、アイキャッチ画像指定が優先され、エラーが起きていなかったようです。また、MetaのアプリIDの取得なしで問題が起きていないWordPressサイトもあるので、MetaのアプリIDの取得は必須ではないかもしれません。
まとめ
「画像表示されないな～」と思いつつ、しばらく放置していました。簡単そうなことでも、ハマると時間が溶けてしまいますね。原因がわかって、スッキリしました！
コメントを残す