Facebook、Google+、Twitter、mixi、GREEなど全てのSNSで共通の機能です。シェアしてもらったとき、そのページの「タイトル・抜粋文・イメージ」も表示されるので、URLの文字列だけよりも目立つし、拡散してもらえる確率も上がります。<meta>要素にソースを記述をするだけ。★最後に「最低限これだけあれば大丈夫」そうなスタンダードっぽいソース全文をまとめておきました。prefix属性で書いておきます。コレが無くてもOGPは認識されるのですが、書くのが「正式」なんだそうですよ。★「:」の後には必ず「半角スペース」を入れること。上記のソースはHTML5用。xmlns属性で書きます。オールドIE対応のXHTMLサイトならこっち。lang="ja">OGPの必須プロパティまずは必須プロパティ。必須プロパティは4つあります。/>og:titlecontent属性には、ページのタイトルを記述。ブログだったら記事のタイトル。<title>要素の内容になるそうです。og:typecontent属性には、ページのオブジェクトタイプを記述。website:Webサイトのトップページを表す。省略すると自動的にコレになる)。blog:ブログのトップページを表す。(コレ、最新のogp.meには記載が無い。websiteで良いのかも)article:記事を表す。Webサイトのトップページ以外のページ、ブログの記事などに。profile:人物を表す。個人のプロフィールページなどに。(*このほかに、Music、Video関連のオブジェクトタイプも。)og:urlページのURLを絶対パスで記述。og:image表示する画像のURLを絶対パスで記述。(*画像は複数指定したり、幅や高さを指定することもできます。)OGPのオプションプロパティオプションのプロパティ。content="ローカル言語。デフォルトは“”で空(カラ)。autoはシェアしたユーザが「a」か「an」から2択できるんだそうです。Facebook専用のプロパティFacebookでOGPを使うには、FacebookでApp-IDを取得し、それを以下のように記述します。/>または、adminIDでも設置できます(どちらか1つを書けばOK。)adminIDは、Facebookのアカウントがあれば誰でも持っているID。コレを使って簡単に記述することもできます。個人の特定が可能なので、「誰でも友達申請ウェルカム」なヒト用。いっぽうのApp-IDは、取得にひと手間かかりますが、個人のページには行き着かないので、個人情報を守れます。adminIDを使う場合は以下の記述で。これは、property属性じゃなく、name属性を使います。カードの種類を書きます。summary:デフォルト。「タイトル、説明、サムネイル、Twitterアカウント」が表示される。summary_large_image:Summaryの画像が大きいバージョン。photo:写真のみ。Twitterで写真を投稿した時のような表示に。gallery:4つの写真を表示。必須ではないので、書かなくても可。ID]」が表示されるだけみたいです。使えるプロパティは、上記のtwitter:cardなどの他にもいろいろあります。画像の幅や高さを指定したりできます。選択したカードによって、使えるかどうか決まっているんだって。詳しくは、Twitter本家サイトで。validatorで表示確認しただけで済みましたので、今はもう不要なのだと思います。validatorの使い方は下のほうでメモっています。OGPソースコード全文サンプル(コピペ用まとめ)以上、バラバラにOGPソースコードを列挙しましたが、スタンダードな感じのサンプルを1つにまとめました。コピペして、サイトに合わせて追加・変更・削除を。600x315px以上でog:imageで指定する画像のサイズについて。SNSで一番シェアがあるFacebookのUIに合わせて画像サイズを設定したほうが無難です。FacebookのUIの仕様は、しょっちゅう変わります。OGPの画像も、横長の画像の上下に余白を足して正方形にするなどのワザを駆使していましたが、最近はニュースフィールド・タイムラインともに横長(1.91:1)の画像表示になったそうで、正方形になんかしなくてよくなったとか。少なくとも600x315px以上、推奨は1200x630pxかそれ以上。これで作れば間違い無さそう。OGP画像のサイズについては、コチラを参考にさせていただきました。Debuggerで確認Facebookで用意されているデバッガで、OGPの記述が正しいかどうか確認します。OGPの記述だけでなく、それが他のHTMLソースとあたっている(衝突している)場合もエラーになりますが、このデバッガは、何が何とあたっているかなどの原因を教えてくれます。Debugger(要Facebookログイン)ここでエラーがあれば必ず修正。警告のほうは、出ていてもOGPは表示されるようですが、なるべく直す。(意図せぬ表示の原因になるので)本ブログでのデバッグを、サンプルとしてご紹介まずは、適当なページのURLをタイプしてDebug。information」をクリックして理由を見てみます。書いていたのですが、それがOGPの記述とあたっているとのことでした。それを削除したらエラーが消えました。そのほかの警告も無く、このようにプレビューされて、とりあえず一件落着です。「申請」が必要だったようですが、2015年7月現在は、このバリデータで確認するだけで、特に何か申請する項目はありませんでした。ここで必ずエラーが無いかどうか確認しておいたほうが良いと思います。