Facebook等で使用するOGPプロパティまとめ | 東京都世田谷区　ホームページ制作　[k]id

１、OGPとは

OGPとは「Open Graph protocol」の略称で、FacebookやTwitterなどのSNSでシェアされた際に、各SNSで表示されるページのタイトルや概要を表示させる為のプロトコルで、ページヘッダーなどにタグで設定する事ができます。

OGPで指定できるプロパティがogp.meにあり、
下記にまとめてみました。

２、一般的に指定するOGP設定

下記の項目を指定するのが一般的なようです。

<meta property="og:title" content="記事タイトル" />　
<meta property="og:type" content="ページのタイプ" />
<meta property="og:url" content="記事ページのURL" />　
<meta property="og:image" content="OGP先で表示させたい画像のURL" />　
<meta property="og:site_name" content="サイトの名前" />
<meta property="og:description" content="サイトの概要を説明する文章" />　

 

３、連絡先などの情報

２に追加して、連絡先の情報を指定したい場合。

<meta property="og:email" content="メールアドレス" />　
<meta property="og:phone_number" content="電話番号" />　
<meta property="og:fax_number" content="FAX番号" />

<meta property="og:street-address" content="住所" />　
<meta property="og:locality" content="市区町村" />
<meta property="og:region" content="都道府県" />
<meta property="og:postal-code" content="郵便番号" />　
<meta property="og:country-name" content="国名" />

 

スマホなどの位置情報が取得出来る場合は

<meta property="og:latitude" content="緯度" />　
<meta property="og:longitude" content="経度" />　

 

４、Facebook独自OGP

Facebookで指定できるOGPです。

<meta property="fb:admins" content="ユーザーID" />
<meta property="fb:app_id" content="アプリID" />

 

５、twitter独自OGP

twitterCardで指定できるOGPです。

<meta name="twitter:card" content="summary">
<meta name="twitter:site" content="twitter ID">

６、メディア系のOGP

画像で指定できるOGP

<meta property="og:image" content="画像へのパス" />　
<meta property="og:image:secure_url" content="httpsなどセキュアの場合のURL" />　
<meta property="og:image:width" content="横幅" />
<meta property="og:image:height" content="縦幅" />
<meta property="og:image:type" content="タイプ[image/jpeg]など" />　

 

動画で指定できるOGP

<meta property="og:video" content="動画へのパス" />　
<meta property="og:video:secure_url" content="httpsなどセキュアの場合のURL" />　
<meta property="og:video:type" content="Movieのタイプ[application/x-shockwave-flash]など" />
<meta property="og:video:width" content="動画の横幅" />　
<meta property="og:video:height" content="動画の縦幅" />　

 

音声で指定できるOGP

<meta property="og:audio" content="音声へのパス" />　
<meta property="og:audio:type" content="タイプ" />