ナイチンゲールにはなれない!

看護師おかえりなさいの情報共有所

FacebookのOGP設定にて違う画像が表示される問題!

FacebookのOGP設定にて違う画像が表示される問題!

少し前からですが、Facebookページに自分のWebサイトの投稿をシェアさせた時に何時の頃からか急に、なぜか思った画像と違う画像になっている件について検証しました。具体的には当サイトのヘッダー画像を記事の画像として読み込んでいる現象が発生していました。

FacebookのOGP設定で目的と違う画像が表示される問題

実際の投稿のアイキャッチは次の画像になるのですが、OGPとしてヘッダー画像が取り込まれているのが今回の問題の現象です。

キャプチャ

ヘッダーが取り込まれる

そう言ったわけで、意に反して当サイトのヘッダー画像を取り込んでしまっている設定を見直し、ちゃんと投稿の先頭のアイキャッチ画像をFacebookへと表示させたいと思います。

OGPの設定を見直す

まず当サイトの投稿がシェアされた時に関与する様々なプラグインがあるため少し整理します。

基本的に当サイトの初回投稿を各SNSへのシェアを自動化させるため、JetPackプラグインが関与します。

JetPackはWordPress公式プラグインでしてWordPress運営母体の開発プラグインです。そのため信用性も高く長く使用してきました。

非常に多くの機能のあるJetPackですが、私が使うのはパブリサイズ共有という機能位です。

このパブリサイズ共有にてTwitter、Google+ページ、Facebookページへと投稿が自動でシェアされます。

この機能は以前から使ってきているものであり、今までも問題なくOGP画像が正しく表示されていたためこのプラグインによる問題ではなさそうです。

次にWebサイトのSEO対策強化を図るプラグインAll In One SEO Packについて考えてみます。

All In One SEO Packはこの手のSEO対策プラグインでは、1、2を人気で争うプラグインです。

ユーザーの利用実績も大変多いプラグインです。

その信用性も高いため、使用しているユーザーにて使用法についても多くブログなどで公開されています。

そのため、このプラグインの設定画面が英語であるのですが、良く紹介されているケースに従って設定をしてきました。

その設定の中でもSocial Metaというところの設定が、どうやらこのOGP問題に関与する設定であるようです。

Social MetaのImage Settingという所があるのですが、この項目が怪しそうです!

Image Settingには次の項目があります。

  • Default Image : 別途OG:Imageを設定することで指定画像を表示させる
  • アイキャッチ画像 : アイキャッチ画像を表示させる ※私の環境では不可
  • First Attached Image : 記事の一番最初に使われている画像を表示させる
  • First Image in Content : 記事の内容から最初に検出された画像を表示させる
  • Image From Custom Field : カスタムフィールドで指定した画像を表示させる
  • First Available Image :自動的に画像が選択される?

この画像内ではImage Settingが「アイキャッチ画像」となっていますよね!これがダメだったんです!

アイキャッチ設定になっている

 

普通アイキャッチ画像というと、投稿本文の先頭にあるいは、任意設定した画像が当てはまるのですが、なぜか私の環境ではヘッダー画像をアイキャッチとして読み込んでしまいます。

Webサイトをページ全体から見ればヘッダーに画像が表示されていればそれがアイキャッチと考えるのでしょうか!

そのあたりはよくわかりませんが、この「アイキャッチ画像」となっているところを次のように変更しました。

「アイキャッチ画像」から「First Attached Image」へと変更しました。

設定方法

アイキャッチ画像になっていたところを「First Attached Image」へと変更することで読み込むことを確認しましたが、投稿によってはやはりヘッダーを読み込みます。

「First Attached Image」は記事の最初のイメージという意味だそうです。これで成功するケースもありました。

「Fast Image In Contents」の場合でもうまく読み込むことがありますが、時々失敗することもありました。

「Default Image」これでも大丈夫そうです。ですが、例えば記事内に画像がなかったりする場合に任意の画像を表示させるオプションになっているため、使用しない方が無難かと思います。

テスト投稿をしてみる

投稿の編集 ‹ アクセストリガー — WordPress

これがテスト投稿に成功したFacebookへの投稿です。ちゃんと本来のアイキャッチが表示されています。

OGPにアイキャッチ

このようにアイキャッチ画像が表示されなくなったのは途中からなんですが、おそらくヘッダー画像に関わる変更をテーマの設定などでいじったからかもしれません。

始めはWebサイトにヘッダー画像などなかったわけですし、途中でカスタムヘッダー画像でヘッダー画像を表示させるようになりましたのでそのあたりのような気がしますが、なにがきっかけかわかりません。

今回のように修正すればうまく読み込むこともあるという事がわかったことで勉強になってよかったと思います。

ただし、最終的にはどの方法で行ってもヘッダーを読み込むケースを完全に否定できませんでした。

よって最良の方法はまだまだ謎なので今後も検証しながら様子を見るため、この問題は持ち越しとします。

以上、「FacebookのOGP設定にて違う画像が表示される問題!」でした。

追記:今回の問題を回避できる方法がみつかりました!

Bufferが便利過ぎるその理由はSNS連携と画像のシェア機能にある!

今回はSNSで投稿する際に連携したいサービスのご紹介です!BufferまずはBufferに登録しましょう。初回登録時にメールアドレスと、パスワードの設定が必要です。Buffer – A Smarter Way to Share on Social MediaBufferはマルチアカウント対応なので、TwitterやFacebo…

この方法をもってすれば、Facebookに限らずTwitterもGoogle+ページなどへのシェアも画像付きで投稿可能になります!

ひとまずは解決策としてどうぞ!


コメントフォーム

*
*
* (公開されません)

日本語が含まれない投稿は無視されますのでご注意ください。(スパム対策)

FACEBOOKコメント

Return Top