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属性を付けて記述します。

<head prefix="og: http://ogp.me/ns# fb: http://ogp.me/ns/fb# article: http://ogp.me/ns/article#">

og:
fb:
article:

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

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

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

必須プロパティの設定

og:title
ページのタイトル

<meta property="og:title" content="ページのタイトル">

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

<meta property="og:type" content="オブジェクトタイプ">

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

og:url

<meta property="og:url" content="ページのURL" >

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

og:image

<meta property="og:image" content="サムネイル画像のURL">

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

オプションプロパティ

og:site_name
サイト名

<meta property="og:site_name" content="サイト名">

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

<meta property="og:description" content="ページの概要" />

Facebook用の設定

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

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

<meta property="fb:app_id" content="App-ID" />

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

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

Twitter Cards

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

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

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

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

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

Cardの種類

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

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

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

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

<meta name="twitter:site" content="@twitterのアカウント">

タイトル(必須)twitter:title

タイトルは70文字まで

<meta name="twitter:title" content="Small Island Developing States Photo Submission" />

概要(必須)twitter:description

<meta name="twitter:description" content="View the album on Flickr." />

検証して申請

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

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

シェアする

  • このエントリーをはてなブックマークに追加

フォローする