この記事は、2015年5月29日に更新しました！

こんにちは、ソーシャルメディア課長ヒカルよ。

前回の記事「Facebookインサイト設定の落とし穴、app_id, page_id, admins の違いとは」が好評だったので、その中でも一番目立つし気になる og:image について徹底解説してみます！

OGPのおさらい!

OGPってなにかっていうのをもう一度おさらいしましょ。

OGPとは、FacebookやmixiなどにWebページをシェアするとき、そのページの記事のタイトル、URL、代表する画像、サマリーなどを正しく各ソーシャルメディアに伝えるためのHTMLの内に追加するメタ要素なの。

この図みたいに、ページに関するさまざまな情報をhead内のmetaタグで全てのページに書いておくの。そうすると、このページを見に来た検索クローラーやソーシャルメディアのようなWebサービスに対して、「このページはこんなことが書いてありますよ」って正しく伝えることができるというわけ。

つまり、OGPとは、Webサービスにサイトのメタ情報を正しく伝えるための書き方のこと、なのよ。

From Facebookインサイト設定の落とし穴、app_id, page_id, admins の違いとは

ということなわけよ！( ｰ`дｰ´)ｷﾘｯ

OGPには、サイト共通の情報とページ固有の情報を書きます

上の図では、fb:ほにゃらら（admins, page_id, add_id）っていう、Facebookとの連携に関する部分と、その他で分けたけれど、違う視点でこのOGPをもういっちょ分解してみるとこうなります。

つまり上の4つがサイト全体に共通する情報。下の5つが、各ページごとに異なる情報なわけです。

つまり、og:image もページ固有の情報！なのよ

上の図の要注意なポイントが緑の点線で囲ったところ、og:imageももちろん各ページ個別の情報に含まれるというところ。

ついうっかり、これもサイト共通の情報と思っておんなじ画像を設定しちゃったりするでしょう？それって結構もったいないかも！
このog:imageで設定する画像は、FacebookやTwitterでシェアしたときにタイムラインに流れます。それに他のサービスでもこのog:imageをページを表すサムネイルとして使われることが多々あるの。

たとえば、この図を見てみて。

あるブログのog:imageが全部同じだったら？そうすると、左側の「共通画像」みたいな形でタイムラインにシェアされることになるわ。サイトのロゴだけ、とかちょっとそっけない感じ？

（※もちろんテキストメインのサイトならそれもあり！「タイトルやサマリーの文章で勝負！」それももちろん、いいと思うの）

逆に右側、ページの内容を表す画像をog:image設定してあるほうを見てみて。タイトルとあわせて、なんとなく記事の内容が見えてきてクリックしてみたくなると思わない？

もしページに画像が使ってあるならば、記事画像をちゃんとog:imageに設定することをオススメするわ。

og:imageに設定できる画像の詳細は？

ということで、記事ごとに画像をog:imageに設定するとしてどんなサイズの画像を用意すればいいのか、ってことを調査してみたわ。ソースは、Facebookの公式ベストプラクティス「Facebook Content Sharing Best Practices」の第四章 "Optimize images to generate great previews" の2015/05/27時点の情報です。

大きい画像でシェアされるための og:image 画像は、1200 x 630 サイズ以上を推奨

タイムラインに上記イメージのような大きいサイズで記事画像を表示するには、最低でも 600 x 315 サイズの画像が必要です。レティナディスプレイなどハイレゾなデバイスでもくっきり見せたければ、1200 x 630 サイズが推奨とのこと。

それより小さい画像だとどうなる？

600 x 315 以下のサイズの場合は、こんな風に小さめの正方形サイズの画像付きで表示されます。さらに200 x 200 以下はNGです。

正しく画像が設定されているかの確認は、Facebookデバッガー

仕様通りのog:image画像を設定して記事を公開できました！そうしたらシェアする前に、念のため、Facebookデバッガーでちゃんと認識されるか確認しましょ。 Facebook デバッガーにURLを入れてみて。

下の方にある、”When shared, this is what will be included”（シェアされた時、こんなふうに見えますよ）のところに、OGPで設定した画像に加えてタイトルやURLやディスクリプションが期待通りに表示されていればOK！

「あれ？更新したのに反映されてない？」なときは、上の方に戻って "Fetch new scrape information" をクリックすると、OGP情報の再取得をしてくれるの。これで、もう一度”When shared, this is what will be included” を確認してみてね。

コンパクトなまとめ！

• 横長の大きいサイズの画像付きでシェアされたい場合は、最低でも 600 x 315、できればハイレゾ画面のために 1200 x 630 サイズの画像を用意すること！
• うまく反映されなければ、Facebook デバッガー で確認してみること！

ということでした！ぜひog:imageの設定を見なおしてみてね！