【WordPress】Facebook OGPプラグインの使用を止めて自前で設定したら意図通りの画像で正しくシェアされるようになった

Facebook

僕はこれまで、FacebookのOGPの設定は、「Open Graph Pro」プラグインで行っていました。

けれど、Open Graph Proを使っていると、不具合が結構あったので、今回Wordpressテーマに直接FacebookのOGPを設定することにしました。

今回はその方法の紹介です。

photo by Master OSM 2011

スポンサーリンク
レクタングル(大)広告

OGPとは?

プログラムにページ情報を正しく伝えるためのプロトコルです。

例えば、Facebookのクローラーがブログの記事を読み込んだとしても、相手はコンピューターなので、ページにどのような内容が書かれているか、まではハッキリと判断することができません。

そこで、ページごとにOGPを運営者側が設定してやることで、こちらが意図した内容を正確にコンピューターに伝えることができます。

Facebookとかでしたら、その情報が反映されてこのような感じになります。

Facebook OGP

手軽にイケてるグラフを作れるWEBサービスいろいろ

ソースコードだと、このような感じで設定されます。

で、そんな役割を果たしているOGPなんですが、僕が使っていたWordpressのプラグイン「Open Graph Pro」では、いろいろと不具合がありました。

Open Graph Proの不具合

僕が利用して起った不具合としては、以下のようなものがあります。

  1. og:image(ページアイコン)が意図してない画像でたまにシェアされる
  2. Facebookにうまく情報が伝わっていない事が極たまにある

1.og:image(ページアイコン)が意図してない画像になる

自分のFacebookページにシェアする時に、たまに意図しない画像でシェアされることがありました。

例えばこのページ。

手軽にイケてるグラフを作れるWEBサービスいろいろ

WEB上から簡単にグラフや図表が作れてしまうサービスをまとめてみました。

記事のアイキャッチが以下の画像ですから

WEB

本来ならこの画像がog:imageに反映されて、Facebookページには次のように出て欲しいところです。

Facebookページ理想

しかし実際は、このような意図しない記事中の画像が勝手に選択されてしまいました。

Facebookページ実際

FacebookのDebuggerで原因を探ると、次のようなエラーが出ていました。

Facebookデバッガエラー

内容はこんな感じです。

og:image could not be downloaded or is too small

Provided og:image could not be downloaded or is not big enough. Please use an image that’s at least 200x200px and is accessible from Facebook. Image ‘[IMAGE_URL]’ will be used instead.

なんか、「og:imageの画像が小さすぎるぞ!」と怒られています。200x200px未満の画像が設定されているようです。Facebookでは、200x200px未満の画像はページアイコンとして使用できないようで「代わりに[IMAGE_URL]の画像を使っといたから。」と出ています。

で、「なんでこんなメッセージが出るのか?」とページのソースコードを確認してみると、なんでかわからないんですけど150x150pxのサムネイル画像が勝手に選択されていました。

200x200px未満のサムネイル画像が勝手に選択されていたことで、Facebookのクローラーが記事中の中から適当な画像を一つ選択したようです。

Open Graph Proプラグインでは、なんでかわからないんですけど結構な確率でこのようなことが起こります。

2.Facebookにうまく情報が伝わっていない事が極たまにある

これは本当にごく稀なんですが、情報がうまく反映されないことがあります。

一旦間違った情報が送られてしまうと、Facebookページに投稿すらできないなんてこともありました。(ただしこれは、Facebook自体の不具合かも)

プラグイン無しでのOGPの設定

上記のような、不具合があったため、もっといいよ方法がないか調べてみたら、自前でWordpressテーマにOPGを埋め込む方法を見つけました。

プラグインに頼らない利点については、以下で詳しく書かれています。

で、そのテーマに埋め込むソースコードが以下。

これをお使いのWordpressテーマのheader.phpの<head></head>タグの間に埋め込みます。

修正が必要な箇所

修正箇所は以下。

デフォルトの画像の設定

「画像URL」の部分を任意の画像に変更してください。記事や、アーカイブページなどで画像が取得できなかった場合に、og:imageとして利用される画像です。

管理者IDとアプリIDの設定

以下.Facebookの「管理者ID」と「アプリID」は自身のものに変更してください。

「管理者ID」と「アプリID」の取得方法は以下に詳しく書かれています。

Facebook : 開発者登録をしてApp IDを取得するまで | MUSHIKAGO APPS MEMO

まとめ

今回のようにOGPを自前で設定することで以下のようなメリットがあります。

  1. OGPプラグインの不具合回避
  2. プラグインを使わないことで、多少は速くなる
  3. 意図した内容をFacebookに伝える

その反面、以下のようなデメリットもあります。

  1. プラグインのように手軽には設定できない
  2. PHPを編集するので、設定に失敗するとエラーが出る

PHPの編集に自信がない場合は、Open Graph Proプラグインを利用した方が間違いないです。たまにちょっとおかしなことするけど、OGPを設定していないよりは、効果ははるかにあると思います

『【WordPress】Facebook OGPプラグインの使用を止めて自前で設定したら意図通りの画像で正しくシェアされるようになった』へのコメント

  1. 名前:通りすがり 投稿日:2014/12/19(金) 15:17:03 ID:e9dffcb8a

    わいひらさん、こんにちは。 プラグインでのOGP設定がうまくいかず、検索でこのページにたどり着きました。他のサイトでは、headタグあるいはhtmlタグの変更を要求しているのですが、必要ないものなのでしょうか?

  2. わいひら 名前:わいひら 投稿日:2014/12/19(金) 18:32:13 ID:db4f8adff

    こんにちは。

    >headタグあるいはhtmlタグの変更を要求しているのですが、必要ないものなのでしょうか?
    これは、プラグインの設定時のことでしょうか?
    そのサイトのURLを教えていただけると、何かアドバイスできるかもしれません。

  3. 名前:通りすがり 投稿日:2014/12/20(土) 00:55:41 ID:6371c26df

    わかりにくい文章ですみません。プラグインに頼らずにOGP設定をするという意味です。
    Googleで ”wordpress ogp” と検索すると設定の仕方が解説されているのですが、headタグまたはhtmlタグ編集の記述があるサイトもあれば、ないものもあります。この違いは何なのかなぁと思い質問いたしました。

  4. わいひら 名前:わいひら 投稿日:2014/12/20(土) 10:40:59 ID:1a2115e4e

    OGPを自前で設定するには、HTMLのヘッダーにMETAタグを記述する必要があると思います。
    Wordpressだったら、このページに書いてあるコードをhead内に書く必要があります。

  5. 名前:やまだ 投稿日:2016/02/03(水) 00:34:50 ID:fd053d83d

    こんにちは!
    埋め込むソースコードがものすごく長い気がするのですが、
    実際に埋め込むのは「ここからOGP」となっているところからで問題ないでしょうか??

  6. わいひら 名前:わいひら 投稿日:2016/02/03(水) 03:20:01 ID:3e9757616

    こんにちは。ご指摘ありがとうございます!
    どういうわけか、全部のソースが入っていました;
    修正しておきました。