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

はじめに

あと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さんがリリースしているワードプレスのテーマです。

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

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を確認

1,Facebookデバッガーにアクセスします。

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

wfe1

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

wfe2
wfe3

wfe4

4.「Scraped URL」をクリックします。

wfe5

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

wfe6

6.ような何らかの原因により、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を入れ替えて、ソースの差分を付け加える

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

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

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

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

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

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

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

その際に使ったテキスト比較ツールはこちら↓↓
difff《デュフフ》

終わりに

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

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

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

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

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

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

4 件のコメント

  • 初めまして。OGP画像が上手く反映されず、色々調べていてこのページにたどり着きました。
    最終的に、Stingerとcheetahのheader.phpにはどんな違いがあったのでしょうか?
    もし覚えていらっしゃることがあれば教えて頂けますと幸いです。

    私はStinger5の子テーマにsimplesterというものを使っていますが、他の条件はとても似ていますし、発生している問題もまったく同じです。
    simplesterとstingerでは、以下の部分に違いがありました。

    (最後のnoがyesになっていました。)
    ただ、これだけを変更しても問題は解決しませんでした。

    突然の質問で大変恐れ入りますが、もし覚えていらっしゃればで結構ですので、直した点を教えて頂けますと幸いです。
    よろしくお願い致します。

    • bucchiさん

      ご質問ありがとうございます。
      本文中にも書きましたが、両者のheader.phpを比較しても違いが見つけられなかったので、
      header.phpの入れ替えという方法で解決しました。

      つまり原因不明なのです…すみません。

      ちなみにheader.phpを入れ替える方法は試されましたか?
      他に考えられる方法としては、お使いのテーマが更新されていればテーマを更新してみてください。
      バグが修正されていることがあります。(僕の使っているcheetahはそうでした。)

      それでも解決しない場合は、テーマ作成者に直接問い合わせてみることが一番だと思います。

      • ご返信ありがとうございます。
        はい、header.phpの入れ替えもしてみましたがまだ問題が解決しておりません。
        テーマ作成者に、同様の問題が報告されていないか確認してみます。

        それにしても、オーストラリアについて非常に良く分かる、良いブログだと思いました!
        これからもまたチェックさせていただきたいと思います。

        今回はわざわざご返信頂き、誠にありがとうございました!

        • そうでしたか。
          せっかく記事を読んでいただいたのにお力になれなくて申し訳ありません…

          ありがとうございます。
          bucchiさんのブログにもお邪魔させていただきますね!
          毎日更新されているなんて尊敬します。

  • コメントを残す

    メールアドレスが公開されることはありません。 * が付いている欄は必須項目です

    ABOUTこの記事をかいた人

    2014年10月〜2016年6月末までオーストラリアでワーキングホリデーを経験。 今後は地元沖縄を拠点にビジネス展開できるように計画中。 パワームーブとスキル大好きなパワーヘッダー偽B-boy。 ダーツ、カメラ、写真、散歩、ブレイクダンスとやたらと多趣味の変人。