*

WordPressでFacebookのOGP画像が正しく反映されない時の対処法

   

thumbnail

はじめに

あと4日でオーストラリアに来て1年が経ちます。

どうも、なっちです。

オーストラリアでワーキングホリデー中のため、

最近はシドニーやファームについての記事を更新していましたが、

今回はブログ運営中に起こった、

FacebookのOGP画像がいくらやっても設定した画像にならないバグの解決方法を紹介します。

スポンサーリンク

環境

WordPress 4.3.1
WordPressテーマ Stinger5-cheetah
プラグイン All in one SEO pack
サーバー ロリポップ

サーバーはあまり関係ないかもしれませんが念のため…(；・∀・)

ワードプレス4.3.1にAll in one SEO packプラグインインストールし、

All in one SEO packでFacebook OGPを設定。

Stinger5-Cheetahとは、

ブログマーケッターのJUNICHIさんがリリースしているワードプレスのテーマです。

本家のStinger５より記事幅が広かったり、

SNSのシェボタンが最初からついていて便利なので使っています。

気になる方はこちらの記事を御覧ください↓↓
STINGER5のENJIさんの言う「利用による幸せ」を次の人に！Stinger5-Cheetahリリースしました

症状

投稿ページで個別に設定したはずのOGP画像が反映されず、

Facebookでシェアをしても別の画像が表示されてしまう・・・

少し前までは問題なく予定通りのOGP画像が反映されていたのに…(´；ω；｀) thumbnail

原因調査

  1. 投稿ページのOGP設定を再確認
  2. FacebookデバッガーでOGPを確認
  3. All in one SEO packのバグを疑う
  4. テーマを切り替えたらどうなるか？

考えられる原因を検討し、上記4点を調査してみました。 

投稿ページのOGP設定を再確認

OGPタグチェックのブックマークレットを作成しました

こちらのOGPタグチェックブックマークレットを使って、

そもそもOGPが正しく設定されているか確認。

結果は問題なく予定通りの画像が設定されていました。

OGPブックマークレットの導入方法と使い方は上記リンクを御覧ください。

wfe7

FacebookデバッガーでOGPを確認

１，Facebookデバッガーにアクセスします。

２．デバッグしたいページのURLを入力し、
「Fetch new scrape infomation」をクリックします。

wfe1

３．入力したURLのOGP情報が表示されます。
あ、さっそくエラーが…(；・∀・)

wfe2
wfe3

wfe4

４．「Scraped URL」をクリックします。

wfe5

５．FacebookでHTMLがどのように認識されているかが表示されます。
今回の場合、なぜか<head>タグが<body>タグとして認識されています。
もちろん、元々のソースはちゃんと<head>で書いてあります…

wfe6

６．ような何らかの原因により、FacebookでHTMLが正しく認識されていないということ。

All in one SEO packのバグを疑う

OGP画像が正しく反映されなくなった時期に前後して、

All in one SEO packのアップデートがあったので、

そのせいかな…

と思って古いバージョンに戻してみた。

結果、前のバージョンに戻しても何も変わらなかった。

テーマを切り替えたらどうなるか？

流石にそれはないだろと思いつつも、

「Stinger5-cheetah」との相性が悪いのかもしれないと思い、

「BizVektor」や「Stinger5」に変えてみたところ、

ちゃんとOGP画像が反映されているではないか！！！

バグの原因判明

原因は、使用中のテーマ「Stinger5-cheetah」だと判明！

ただし、プラグインをいくつも入れているので、

一概に「Stinger5-cheetah」だけの問題だとは言い切れないかもしれません。

対処方法

テーマを変更してしまえば一発解決なのですが、

「Stinger5-cheetah」の方が見やすくて個人的に好きなので、

テーマを変更せずに問題を解決することにしました。

Header.phpを入れ替えて、ソースの差分を付け加える

１．「Stinger5-cheetah」と「Stinger5」それぞれのheader.phpのバックアップをとります。

２．「Stinger5-cheetah」のheader.phpと「Stinger5」のheader.phpを入れ替えます。

３．このままだとheader.phpだけ「Stinger5」のものと変わらないので、
テキストエディタなどで開いて、
「Stinger5-cheetah」の元のheader.phpと同じになるようにソースを書き換えます。

注意）[Ctr]+[A]などを使って、ソースの全文コピペはしないでください。
そうするとなぜかバグが修正されません。

４．Facebookデバッガーにもう一度アクセスして、
デバッグしたいページのURLを入力し、
「Fetch new scrape infomation」をクリックします。

５．これで予定通りの画像に修正されているハズ！！！
ポイントは項目３で述べたようにソースをそのまま全部コピペしないこと。

ちなみにheader.phpを入れ替えた理由は、
テキスト比較ツールを使って、１行ずつ間違いがないか比較しても
原因を追求できなかったからです。

その際に使ったテキスト比較ツールはこちら↓↓
difff《ﾃﾞｭﾌﾌ》

終わりに

記事をシェアしてもらう際にOGP設定はとても有効です。

意図していない画像だとあまりシェアもしてもらえなくなるので、

記事の更新よりもバグの対応を優先的にやっていたら、

思いの外原因究明に時間がかかって記事の更新が出来ませんでした…(；・∀・)

この記事が同じような問題を抱えた人の約に少しでもたてば幸いです♪

それではまた～(^_^)/~

 - Wordpress