Facebook OGP ,Twitter Cards のOGP設定のまとめ

OGP(Open Graph Protocol)とは
シェアしてもらった時にそのページのタイトル、説明文、サムネを指定できるタグ。
Facebook,Twitter,Google+,mixiなどSNSで使えます。

The Open Graph protocol
http://ogp.me/

Facebook OGPの設定

OGPを使うことを宣言する

にprefix属性を付けて記述します。

og:
fb:
article:

のあとは必ず半角スペースが必要

og: OpenGraph のプロパティ
fb: Facebookのプロパティ
article: OGPのオブジェクトタイプ

articleはブログやサイト記事などのページ

必須プロパティの設定

og:title
ページのタイトル

og:type
オブジェクトタイプ

・website 一般的なサイトのトップページ
・article ブログやサイトのページ

og:url

そのページのURLを絶対パスで

og:image

シェアされたときに表示する画像のURL(絶対パス)

オプションプロパティ

og:site_name
サイト名

 

og:description
ページの説明meta descriptionと同様

 

Facebook用の設定

fb:app_id
FacebookのアプリケーションID(15文字の半角数字)

fb:app_idのほかにfb:adminsも使用可能だが推奨されてない

Facebook用OGP設定が正しいかどうか確認できるデバッグページ

Debugger (要ログイン)
https://developers.facebook.com/tools/debug/

Twitter Cards

ツイートにタイトル・概要・サムネを表示させることができます

Twitterカード
https://dev.twitter.com/ja/cards/overview

 

カードの種類(必須)twitter:card

種類がいくつかあるみたいだけど普通のサイトならsummaryでよいみたいです。

Cardの種類

Summary Card summary ブログ記事や製品情報、レストラン情報などWebサイトの情報を表示
Summary Card witd Large Image summary_large_image  summary cardの画像が大きく表示される版
Photo Card photo  写真が表示されるカード
Gallery Card gallery  4枚の写真を表示できるカード
App Card app  アプリの詳細情報を表示できるカード
Player Card player  ストリーミング再生ができるカード、特別な承認作業が必要なよう
Product Card product  製品情報を表示できるカード、写真のほか在庫情報や価格なども表示できる

詳細はTwitterデベロッパーページにあります。サンプルタグもあり。
https://dev.twitter.com/cards/types/summary

アカウント(必須)twitter:site

サイトのTwitterアカウントを指定します。

タイトル(必須)twitter:title

タイトルは70文字まで

概要(必須)twitter:description

 

検証して申請

上記タグを設定したら、下記ページでタグを検証して申請します。

Card validator
https://cards-dev.twitter.com/validator

SNSでもご購読できます。