ウェブのあれこれ
ウェブを活用したいひとのためのブログ
Facebookでページをシェアするときに重要!OpenGraph
2016/02/10 HTML/CSS

Facebookでページをシェアするときに重要!OpenGraph

WEBページに「OpenGraph」設定してますか?FacebookなどのSNSではいいね!やシェアなどのページ情報の取得にOpenGraphを利用しています。

OpenGraphとは

The Open Graph protocol enables any web page to become a rich object in a social graph. For instance, this is used on Facebook to allow any web page to have the same functionality as any other object on Facebook.

While many different technologies and schemas exist and could be combined together, there isn't a single technology which provides enough information to richly represent any web page within the social graph. The Open Graph protocol builds on these existing technologies and gives developers one thing to implement. Developer simplicity is a key goal of the Open Graph protocol which has informed many of the technical design decisions.
The Open Graph protocol webサイトより引用)
英語で書かれていてよくわかりませんが、要するに、OpenGraphはWEBページの基本的な情報をSNSなどに提供するためのプロトコルです。といったところでしょう。

OpenGraphの設定

OpenGraph(以下OGP)はHTMLのhead内にmetaタグで記述します。プロトコルに則った記述をすることでOGPを利用しているSNSなどの外部サービスがWEBページの情報を正しく取得できるようになります。

OGPは以下のようにmetaタグに記述します。
<meta property="og:[プロパティ名]" content="[プロパティ値]">

これだけは設定しよう!基本的なOGPのプロパティ

og:type

<meta property="og:type" content="article">
WEBページの場合、以下のいずれかを指定します。

article ・・・ WEBサイト内のページや記事に指定します。
website ・・・ WEBサイトのTOPページに指定します。

websiteは基本的に1つのWEBサイトにおいてTOPページのみに指定することが推奨されています。

og:site_name

<meta property="og:site_name" content="WEBサイトの名前">
WEBサイトの名称を指定します

og:title

<meta property="og:title" content="ページのタイトル">
ページのタイトルを指定します。

og:description

<meta property="og:description" content="ページの概要文">
ページの概要文を指定します。<meta name="description" ・・・>と同じようなものですね。

og:image

<meta property="og:image" content="画像のURL">
SNSなどでシェアされる際にサムネイルとして利用される画像のURLを指定します。
URLは絶対パスを指定します。

Facebookでは以下のように画像のサイズを推奨しています。
推奨:幅1200px 高さ630px
最低:幅600px 高さ315px
また特定の条件下では幅600px 高さ600pxで表示されるようです。

og:url

<meta property="og:url" content="ページのURL">
ページのURLを指定します。

OGPを設定するとこんな風にシェアされる

試しにこのページをシェアしてみるとこんな風になります。



ちなみに、正しくOGPが設定されているかどうか確認するために、Facebookでは「オブジェクトデバッガー」が公開されています。
URLを入力して、「show existing scrape information」か「Fetch new scrape information」をクリックすると、入力したURLに設定されているOGPの情報を検証して、記述ミスや設定ミスなどがあると警告を表示してくれます。また、OGPの情報をFacebook上にキャッシュもしてくれるようです。
新しいページを公開、OGPの設定をしたら、オブジェクトデバッガーで「Fetch new scrape information」を押してOGP設定を確認しましょう!

OGPを設定していない場合、Facebookではtitleタグやmetaタグのdescriptionなどから情報を構成するようですが、画像などは意図したものが取得される保証はありません。WEBサイトではSNSでの記事のシェアも重要です。
OGPが正しく設定されているか一度確かめて見ましょう!

Provided by Revolme inc.
revolme.co.jp