WordPressのOGP設定はこちら
OGP（Open Graph Protocol）とは
シェアしてもらった時にそのページのタイトル、説明文、サムネを指定できるタグ。
Facebook,Twitter,Google+,mixiなどSNSで使えます。
The Open Graph protocol
http://ogp.me/
Facebook OGPの設定
OGPを使うことを宣言する
headタグに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 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アカウントを指定します。
<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