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

Facebook等で使用するOGPプロパティまとめ

Category WordPress Tips Update 2015.06.19

facebook
twitterfacebookgoogle+はてなブックマークPocketであとで読むfeedlyで購読

1、OGPとは

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

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

2、一般的に指定する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="サイトの概要を説明する文章" /> 

 

3、連絡先などの情報

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

<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="経度" /> 

 

4、Facebook独自OGP

Facebookで指定できるOGPです。

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

 

5、twitter独自OGP

twitterCardで指定できるOGPです。

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

6、メディア系の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="タイプ" />

 

ページトップへ