徹底解説、意味も設定画像スペックもこれでばっちり!2015年5月時点最新版Tweetこの記事は、2015年5月29日に更新しました!こんにちは、ソーシャルメディア課長ヒカルよ。ついて徹底解説してみます!OGPのおさらい!OGPってなにかっていうのをもう一度おさらいしましょ。OGPとは、FacebookやmixiなどにWebページをシェアするとき、そのページの記事のタイトル、URL、代表する画像、サマリーなどを正しく各ソーシャルメディアに伝えるためのHTMLの内に追加するメタ要素なの。この図みたいに、ページに関するさまざまな情報をhead内のmetaタグで全てのページに書いておくの。すると、このページを見に来た検索クローラーやソーシャルメディアのようなWebサービスに対して、「このページはこんなことが書いてありますよ」って正しく伝えることができるというわけ。OGPとは、Webサービスにサイトのメタ情報を正しく伝えるための書き方のこと、なのよ。add_id)っていう、Facebookとの連携に関する部分と、その他で分けたけれど、違う視点でこのOGPをもういっちょ分解してみるとこうなります。上の4つがサイト全体に共通する情報。下の5つが、各ページごとに異なる情報なわけです。ページ固有の情報!なのよ上の図の要注意なポイントが緑の点線で囲ったところ、og:imageももちろん各ページ個別の情報に含まれるというところ。うっかり、これもサイト共通の情報と思っておんなじ画像を設定しちゃったりするでしょう?それって結構もったいないかも!このog:imageで設定する画像は、FacebookやTwitterでシェアしたときにタイムラインに流れます。それに他のサービスでもこのog:imageをページを表すサムネイルとして使われることが多々あるの。あるブログのog:imageが全部同じだったら?そうすると、左側の「共通画像」みたいな形でタイムラインにシェアされることになるわ。サイトのロゴだけ、とかちょっとそっけない感じ?(※もちろんテキストメインのサイトならそれもあり!「タイトルやサマリーの文章で勝負!」それももちろん、いいと思うの)逆に右側、ページの内容を表す画像をog:image設定してあるほうを見てみて。タイトルとあわせて、なんとなく記事の内容が見えてきてクリックしてみたくなると思わない?もしページに画像が使ってあるならば、記事画像をちゃんとog:imageに設定することをオススメするわ。og:imageに設定できる画像の詳細は?ということで、記事ごとに画像をog:imageに設定するとしてどんなサイズの画像を用意すればいいのか、ってことを調査してみたわ。2015/05/27時点の情報です。サイズの画像が必要です。サイズが推奨とのこと。以下のサイズの場合は、こんな風に小さめの正方形サイズの画像付きで表示されます。仕様通りのog:image画像を設定して記事を公開できました!そうしたらシェアする前に、念のため、Facebookデバッガーでちゃんと認識されるか確認しましょ。デバッガーにURLを入れてみて。クリックすると、OGP情報の再取得をしてくれるの。メールマガジンを購読しませんか?月に2〜3回、WEBマーケ、WEB制作、オウンドメディア運営に役立つTIPSや無料セミナー情報をお届けします。フォローしませんか?Facebookでいいね!するTwitterでフォローするFeedlyで購読するこの記事の筆者ヒカル(六離庵)「和菓子屋六離庵ソーシャルメディア繁盛記」のキャラクター、ヒカルです!日本酒と甘いものとソーシャルメディアとネットウォッチが趣味です。SiteCatalyst達人から教わった分析フレームワークこのブログについてオウンドメディア運営者に役立つ情報を、月に数回発信しています。ブログについてをご覧ください。1000名+のオウンドメディア運営者が集まる「オウンドメディア勉強会」コミュニティでは、Facebookグループとオフラインの勉強会で情報交換をしています。ブログ」などネットを活用した製品・サービスを提供しています。