SNSでの言及時に適切な情報を出すOGPサンプル(あり版)

このページのHTMLソースには、head要素内にOGPの記述を含んでいます。 ソースを表示させると、HTMLのhead要素内には、OGPのmeta要素が7行含まれていることが分かります。 サムネイル画像は2つ記述しているので、SNS側で選択できる仕様になっている場合は、選択が可能です。

FacebookにURLを書くと、概要とサムネイル画像が自動表示される

FacebookやGoogle+などのSNSでは、投稿欄内にウェブページのURLを記述すると、当該サイトの情報が自動的に読み込まれて表示される仕様になっています。 例えば、All About内の各記事ページのURLをFacebookに書いてみると、記事概要文と共に、その記事のサムネイル画像も自動的に表示されます。

Google+にも同様の機能があり、投稿欄にURLを記述すると、その下部に対象ページの情報が自動的に読み込まれて表示されます。 このように、SNSによって若干の仕様は異なりますが、たいていは、ページタイトル・概要文・サムネイル画像等が自動的に読み込まれて表示されます。

共通仕様「The Open Graph protocol」(OGP)

これらの情報は、ページ内から自動的に抜き出されて表示されます。 その際、望ましい紹介文や望ましいサムネイル画像を、ページ製作者側が指定しておくこともできます。 そのための共通仕様が、「The Open Graph protocol」(OGP)です。

ページの概要文は、従来もHTMLのmeta要素を使って記述できました。 OGPも、meta要素を使って記述します。 つまり、OGPは、meta要素を使って記述できるページの紹介情報を増やす共通仕様だと言えるでしょう。 記述は簡単ですので、ぜひ試してみて下さい。

記事に戻る