Twitter・FacebookのOGPタグと書き方をまとめてみた

今回はTwitter・FacebookのOGPタグの意味と書き方をまとめてみました。

 

OGPタグの書き方テンプレ

OGPタグはこんな感じで書きます。

<!-- ※基本共通設定 -->
<head prefix="og: http:/ogp.me/ns# fb: http://ogp.me/ns/fb# article: http://ogp.me/ns/article#">
<title> ページの タイトル</title>
<meta property="og:title" content=" ページの タイトル" />
<meta property="og:type" content=" ページの種類" />
<meta property="og:url" content=" ページの URL" />
<meta property="og:image" content=" サムネイル画像の URL" />
<meta property="og:site_name" content="サイト名" />
<meta property="og:description" content=" ページのディスクリプション" />
<!--  Facebook用設定 -->
<meta property="fb:app_id" content="App-ID(15文字の半角数字)" />
もしくは
<meta property="fb:admins" content="adminID(15文字の半角数字)" />
<!-- ※ Twitter共通設定 -->
<meta name="twitter:card" content=" Twitterカードの種類" />
</head>

 

基本的には上のコードをコピペして各自値を変更してもらえればそのまま使えます。

それぞれのタグについて少し解説します。

 

prefix=”og:~~”

よくわかりません笑

OGPタグを書くときはとりあえずheadタグにこれを追加するらしいです。

 

og:title

ページのタイトルを入れます。titleタグと同じ内容で構いません。

 

og:type

ページの種類を指定します。

指定できるのは以下の2つの値です。

  • website:トップページの場合
  • article:トップページ以外の場合

 

og:url

ページのURLを指定します。絶対パスで指定しましょう。

 

og:image

画像を指定します。

SNSでシェアされた時に指定した画像を表示することができます。絶対パスで記述してください。

 

og:site_name

サイト名を指定します。そのまんまですね。

 

og:description

ページの説明を記述します。

ここに記述した説明はグーグルでサイトが検索された時のサイト概要として表示されます。

 

Facebook用設定

fb:app_id

FacebookでOGPを表示するには必須のタグです。

取得には少し手間がかかるので、以下のサイトを参考にしてみてください。

http://blog.sixapart.jp/2012-04/fb-app-id.html

 

fb:admins

こちらはあまり使用しないほうがいいです。

特に個人の場合は、adminIDという個人IDを使っているので、Facebookの個人情報をそのままネットに垂れ流している状態です。

それでも使用する場合は以下の方法で取得します。

1. Facebook で、自分の個人 アカウント ページ を開く
2.自分のプロフィール写真をクリック
3.拡大写真が表示された ページ  URL の最後の方を確認
4.「.123456789012345&type=1&」の「&type」の前15桁の数字をメモ
引用元:ゆめぴょんの知恵

 

Twitter用設定

twitter:card

Twitterでシェアした際にどのように表示するかを指定します。いわゆるTwitterカードというやつです。

Twitterカードには以下の種類があります。

  • summary:カード右にサムネイル+左に本文(抜粋)
  • summary large image:大きなサムネイル+下に小さく本文」(抜粋)
  • photo:写真用
  • gallery:写真用

 

一般的なサイトならsummaryかsummary large imageのどちらかになります。好きな方を選びましょう。

 

まとめ

他にも色々細かいタグはありますが、基本的にここで紹介したタグを挿入しておけば大丈夫です。他は割とどうでもいタグが多いので。

OGPを設定するとSNSでシェアされた時の見え方が全然違うし、流入率も変わってくると思います。

まだ設定していない人は早めに設定しておくといいでしょう。