OGPにおける記述方法の勘違いと修正方法(2015年春時点での最新情報?)

FacebookやTwitterの表示関連でよく使われているOGPの設定方法ですが今まで少し勘違いをしていたようなのでその内容と修正方法を記しておきます。

OGPとは

OGPとは「Open Graph Protocol」の略でSNSで使われる共通仕様を指します。
ただ、そうは行っても共通で使える部分と、各SNS専用の項目が必要な場合があります。
ここでは主要SNSについて紹介していきます。
あと、HTML5を基本ベースとして書いていますのでその点はご了承ください。

基本的な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」等がありますが特殊なので割愛します。
詳しくは

を参照してみて下さい。

※最新のObject Typesを見てみるとブログでよく使われている「blog」がなくなっています。
まだ使っている方は変更が必要かもしれません。(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="イメージデータURL">

詳細はこちらの記事を参考にしてみて下さい。

まとめ

最終的な追加コードの形ですが次のようになります。

<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="イメージデータURL">
<!-- //ogp -->

twitter cardのコードを追加しています。(2014.9.3)
ワードプレス等のCMSを使えば記述が必要な部分はphpやショートコードで入れることが可能になるのでなるべく、自動化していきたいですね。
また、Google+について記載をしていませんが、Googl+の場合は基本的なOGP設定で今のところ、問題ないようです。(あくまでも今のところです。

ダウンロード用テキストデータ(2015.4.20)追加

最近、よくコードをコピーされているようなので、紹介しているOGP用のコードをテキストファイルでダウンロード出来るようにしました。


WordPressに特化したレンタルサーバー『wpXレンタルサーバー』

WordPressに特化したレンタルサーバー『wpXレンタルサーバー』

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

コメント

  •  Seiji Kawanoさん、初めまして。

    タグをコピーさせて頂き、使わせて使わせて頂きました!

    参考になろ有益な情報をご提供いただき、有難うございました!!

    m(__)m

    by 小松    2015年7月24日1:06 AM

    • コメント有難う御座います。
      お役に立ててうれしいです。

      by sk_boy    2015年7月24日6:44 PM

コメントを残す




関連記事

本当に必要?ワードプレスでのピンバック(PingBack)を止める方法
Bootstrapを採用しているhtmlテンプレート&テーマ
ワードプレスのテーマにOGP(Open Graph Protocol)を簡単に対応させる方法
Twitterのフォロワー数推移を見るためのツールまとめ
無料テーマPrinciple限定でのOGP設定方法(コードあり)
サイトの画像コピーや右クリックでの操作を禁止する方法
サイト構造と被リンクの確認が無料で出来るツール「AdMatrix Analytics」
MySQLデータベースを使用しないでワードプレスを構築する方法
デザイン全般で使えるweb色見本
今更ながら、ワードプレスで行っておくべきセキュリティ対策6つ プラスα
あなたのサイトは大丈夫ですか?「Pingback」機能が悪用されているかも?
Bracketsでお薦めの拡張機能(エクステンション)と拡張機能のインストール・アンインストール方法
違うブラウザで同じ表示をさせるためには リセットCSSとノーマライズCSSの特徴
Dreamweaverを超えた?無料で使える高性能htmlエディタBrackets
レスポンシブ・フレームワーク「Bootstrap」を使う際に便利なツール、アイコン、テンプレート

Menu

HOME

 TOP