FacebookやTwitterの表示関連でよく使われているOGPの設定方法ですが今まで少し勘違いをしていたようなのでその内容と修正方法を記しておきます。
OGPとは
OGPとは「Open Graph Protocol」の略でSNSで使われる共通仕様を指します。
ただ、そうは行っても共通で使える部分と、各SNS専用の項目が必要な場合があります。
ここでは主要SNSについて紹介していきます。
あと、HTML5を基本ベースとして書いていますのでその点はご了承ください。
ワードプレステーマにOGPを簡単に設置する方法（SNS対応版）(2015.5.13)
基本的なOGPの設定項目一覧
OGPの記述は
の中で行います。head要素の変更
まずはhead部分にprefixを追加します。
<head prefix="og: http://ogp.me/ns# article: http://ogp.me/ns/article#">
OGP設定のおまじないみたいなものです。この設定を行う事によってOGPを認識するようです。
注意点ですがog: http://ogp.me/ns#の部分でog:の後は必ず半角スペースを入れて下さい。これはOGPの仕様で入っていないと正しく認識されません。
また、articleの部分ですがブログやサイトの記事ページはarticleでいいのですがトップページはwebsiteが正しいのでトップページのみ
website: http://ogp.me/ns/website#としてください。
OGPのコード記述
次にOGPの設定記述です。
metaコードを記述していることろに下記コードを差し込みます。
<!-- ogp --> <meta property="og:title" content="ページタイトル" > <meta property="og:type" content="ページタイプ" /> <meta property="og:description" content="ページ説明"> <meta property="og:url" content="ページURL" > <meta property="og:image" content="イメージURL" > <meta property="og:site_name" content="サイトタイトル" > <!-- //ogp -->
contentsの部分には各項目ごとに入れる内容が変わってきますのでそちらの説明を行います。
各タグについての説明（共通）
og:title
ページのタイトルを入れる。metaタグのtitleと同じでOK。
指定しない場合はmetaタグの
og:type（必須項目）※重要
ページの種類を入れる。
「website」→ウェブサイトのトップページに指定
「article」→下層記事もしくはブログの記事ページに指定
他にも「book」、「business」、「place」、「product」等がありますが特殊なので割愛します。
詳しくは
を参照してみて下さい。
まだ使っている方は変更が必要かもしれません。（2014年5月28日の情報です）
ただ、ここらへんの内容はコロコロ変わっているようなので微妙な所ですが！
og:description
ページの説明を入れます。指定しない場合はmetaタグのの内容が反映されるようです。
descriptionが指定されていない場合は本文テキスト部の先頭から120文字程度抜き出して表示しているようです。
ただ、facebookの場合は必須項目のようなので入れて置いた方がベターです。
og:url
ページのURLを入れます。指定しない場合はウェブページURLを自動で反映されるようです。
og:site_name
サイト名を入れます。ドメイン名を入れるという説もあるようですがサイト名で問題ないと思います。
og:image（推奨）
ページのサムネイル画像を指定します。
デバイスによって表示比率が変わってくるようです。
OGP画像については、
で実際に設定して詳しく調べてくれているので参考にしてみて下さい。
Facebook専用タグについての説明
OGP設定をFacebookに完全対応させるためには上記の共通で使用するタグとは別に「fb:admins」、「fb:page_id」、「fb:app_id」という項目が必要になってきます。
このタグですがどのように使われているかというと、Facebookへの流入等を調べるアクセス解析ツール「Facebookインサイト」との紐付けの為に必要となっているようです。
との3つのタグですが実は同じ数値を取得することで対応できます。というのもそれぞれのタグを使ってもFaxebookインサイトを使って見れるデータは最終的には同じようです。
なので基本は「fb:admins」を使っていれば問題ありません。
またhead部分のprefixに追加が必要になってきます。
prefixへの追加
head部分のprefixの追加ですが次のように追加します。
<head prefix="og: http://ogp.me/ns# fb: http://ogp.me/ns/fb# article: http://ogp.me/ns/article#">
prefixのfb: http://ogp.me/ns/fb#の部分が追加になります。
OGPコードの追加
Facebook用のコードの追加ですがfb:adminsの追加を行います。
<meta property="fb:admins" content="FacebookID" >
FacebookIDの部分に次で取得するFacebookのIDを入れ込めば完了です。
IDの取得方法(2016.3.24変更)
IDの取得方法がどうも2015年途中で変更になっているようです。
新しくFacebookのID取得方法について記事を書いていますのでそちらを確認してください。
Twitter専用タグについての説明
Facebook同様にTwitterにも専用タグがあります。これを行う事でTwitter Cardに対応させることが出来ます。
Twitter Cardについては以前、記事を書いていますので参照してください。
追加するコードは
<meta name="twitter:site" content="@Twitterのユーザー名"> <meta name="twitter:card" content="summary">
になります。基本的には2行追加するだけになります。このコードとは別に「creator」用のコードもあります。
<meta name="twitter:creator" content="@Twitterのユーザー名" />
こちらは今のところ、入れても特に変化は無いようです。後々何か有効になるかもしれません位の感じです。
追記（2014.9.3）
ツイッターカードのコードについて少し、変更があったようです。
コードはこちら
<meta name="twitter:site" content="@Twitterのユーザー名"> <meta name="twitter:card" content="summary"> <meta name="twitter:creator" content="@ツイッターアカウント"> <meta name="twitter:description" content="ディスクリプション"> <meta name="twitter:image:src" content="イメージデータＵＲＬ">
詳細はこちらの記事を参考にしてみて下さい。
まとめ
最終的な追加コードの形ですが次のようになります。
<head prefix="og: http://ogp.me/ns# fb: http://ogp.me/ns/fb# article: http://ogp.me/ns/article#"> <!-- ogp --> <meta property="og:title" content="ページタイトル" > <meta property="og:type" content="ページタイプ" /> <meta property="og:description" content="ページ説明"> <meta property="og:url" content="ページURL" > <meta property="og:image" content="イメージURL" > <meta property="og:site_name" content="サイトタイトル" > <meta property="fb:admins" content="FacebookID" > <meta name="twitter:site" content="@Twitterのユーザー名"> <meta name="twitter:card" content="summary"> <meta name="twitter:creator" content="@ツイッターアカウント"> <meta name="twitter:description" content="ディスクリプション"> <meta name="twitter:image:src" content="イメージデータＵＲＬ"> <!-- //ogp -->
twitter cardのコードを追加しています。（2014.9.3）
ワードプレス等のCMSを使えば記述が必要な部分はphpやショートコードで入れることが可能になるのでなるべく、自動化していきたいですね。
また、Google+について記載をしていませんが、Googl＋の場合は基本的なOGP設定で今のところ、問題ないようです。（あくまでも今のところです。）
ダウンロード用テキストデータ(2015.4.20)追加
最近、よくコードをコピーされているようなので、紹介しているOGP用のコードをテキストファイルでダウンロード出来るようにしました。
コメント
Seiji Kawanoさん、初めまして。
タグをコピーさせて頂き、使わせて使わせて頂きました！
参考になろ有益な情報をご提供いただき、有難うございました！！
m(__)m
コメント有難う御座います。
お役に立ててうれしいです。
初めまして。こちらの記事はとても参考になりました！
ややこしくて諦めそうでしたが、おかげさまで実装できました。
ありがとうございましたm(_ _)m
コメントありがとうございます。
Oうまく実装できたみたいでよかったです。
お役に立ててうれしいです！