ノウハウ集＆コラム目次
WEBコンサルタント『サーチサポーター』の代表、敷田憲司です。
皆様、FacebookやTwitterをサイト運営で使っていますか？
個人として使用することはもちろん、サイト運営でもSNSも運用しているというWEB担当者の方がほとんどではないでしょうか。
それではWEB担当者の方全員にお伺いします。
あなたはOGP設定を行った上でSNSを運用していますか？
「OGP？何ですかそれは？」と思ったあなた！
そんなあなたにこそ、今回の記事は是非とも見てもらいたいものとなっています！
目次
- OGPとは？
- OGPの設定方法
- Facebook独自のOGP設定
- Facebook上でのOGP確認
- Twitter独自のOGP設定
- TwitterカードのOGP確認
1.OGPとは？
OGPとは「Open Graph protocol」の頭文字の略称です。
FacebookやTwitterなどのSNSで投稿やシェアをされた際にそのページのタイトル、URL、ページの概要、（サムネイルなど）アイキャッチ画像を、「ページ作成側が意図した通りに表示させる仕組み」のことを言います。
例えばFacebookに投稿をした際、下記のようにタイトルやページの概要、アイキャッチ画像が表示されることがあります。
このようにSNSでの投稿時に、タイトルや画像などをつけるための仕組みのことをOGPと言います。
（上記の例では、赤枠で囲っている部分がOGPで設定された部分となります。）
SNSでより多くの人に記事を見てもらう、拡散のきっかけとなるためにもOGPをしっかり設定することを私は推奨します。
2.OGPの設定方法
それでは、実際にOGPの設定方法についてご説明します。
OGPを設定するには、HTMLコードでメタタグを記述する必要があります。
先ずは<head>から</head>内に以下のようなメタタグを記述しましょう。
（１．か２．のどちらかの方法を選択してください。）
１．<html lang=”ja” xmlns:og=”http://ogp.me/ns#” xmlns:fb=”http://www.facebook.com/2008/fbml”>
２．<head prefix=”og: http://ogp.me/ns# fb: http://ogp.me/ns/fb# article: http://ogp.me/ns/article#”>
上記の設定は「Prefix属性」と言い、ここでは「OGP属性を使うための宣言」を行っているものと捉えて下さい。
宣言の方法は２つあり、１．の<html>タグ内に記述する方法と、２．の<head>タグ内に記述する方法です。
１．はHTML5以前よりOGP設定で使われているものです。
もし、あなたのサイトがHTML5でコーディングされているのであれば、最新の仕様に合わせる意味でも、２．の<head>タグを書き換える方法がよいでしょう。
次に、<meta>タグに以下を記述します。
<meta property=”og:description” content=”ページの概要”>
<meta property=”og:url” content=”ページのURL”>
<meta property=”og:imag” content=”サムネイル画像のURL”>
各項目の意味は以下の通りです。
１．og:title
ページのタイトルを記入します。この記述がない場合は<title>タグが参照されます。
２．og:description
ページの概要、簡単な説明文を記入します。この記述がない場合は同じ<meta>タグのdescription属性が参照され、表示されます。
３．og:url
ページのURLです。この記述がない場合は<link>タグのhref属性が参照されます。
４．og:image
サムネイル画像のURLです。この記述は是非とも行っておくことを推奨します。
（SNSでシェアをしようとすると「意図しない画像が表示される」ことがありませんか？原因はこの属性を設定していないからです。）
以上の記述はOGP設定の基本となる設定ではありますが、これだけの設定でもシェアした際の画像やテキスﾄは明示的に指定されることになります。
また、OGP設定には他にも様々な設定があります。
詳しくはOGPの公式サイトをご覧ください。
Optional Metadata | The Open Graph protocol（英語）
Facebook独自のOGP設定
ここではFacebook独自のOGP設定をご紹介します。
<meta>タグに以下を記述します。
<meta property=”fb:app_id” content=”FacebookアプリID” />
このプロパティを指定すると、Facebookインサイトが使えるようになります。
Facebookインサイトとは、Facebook独自のアクセス解析ツールです。
「いいね！」ボタンのクリック数や、シェアの数などを見ることが出来るツールです。
ところで「アプリ管理者のFacebookID」「FacebookアプリID」とは何のことだろう？
この言葉だけ聞いてもピンとこないのではないでしょうか（実は私も最初はピンと来ませんでした）。
どこでIDを取得するものなのか？また、どうやって調べればよいのか？分からないですよね。
そこで以下に各IDを取得する方法、調べる方法を記載しました。
１．fb:admins
アプリ管理者のFacebookIDを指定します。調べる方法は以下の通りです。
http://graph.facebook.com/○○
○○の部分にユーザー名を入力します。
（ユーザー名は、マイページURLの最後の文字列です。）
ユナイテッドリバーズさんを例に挙げると、https://www.facebook.com/unitedrivers ですので、「unitedrivers」となり、http://graph.facebook.com/unitedrivers にアクセスしてみると下記のような画面が表示されます。
このページの2行目の “id”:***************” が、アプリ管理者のFacebookIDとなります。
２．fb:app_id
FacebookアプリIDを取得します。（既に取得しているのであれば、この作業は不要です。）
先ずはhttps://developers.facebook.com/にアクセスし、FacebookアプリIDを取得してください。
これは、OGPの記述はもちろん、「いいね」「シェア」などのボタンを正しく動作させるため、Facebookインサイトを使うためにも必要となるIDですので必ず取得してください。
※ ちなみにこの方法は2015年4月10日現在の方法（画面キャプチャ）です。Facebookは頻繁に仕様変更をするため、もし表示された画面が変わっていましたら、更新日を確認して、他の最新情報、方法をお探しすることをおススメします。
(1)．Facebookにログインし、下記URLへアクセスします。
https://developers.facebook.com/apps/
(2)．右上の赤線枠内の「ADD a New App」をクリックします。
(3)．プラットフォームを選択します。
（ここでは、管理しているサイトにて利用する場合として、「ウェブサイト」を選択します。）
(4)．右上の赤戦枠線内の「Skip and Create App ID」をクリックすると、下記項目が表示されます。
・Display Name：サイト名を日本語で入力します（例として「サーチサポーター」と入力して進めます）。
・Namespace：半角英字で入力します（任意です。数字、記号は不可）
・「Is this a test version of another app?」 はい/いいえ：「いいえ」を選択します。
・カテゴリ：サイトに適したカテゴリを選択します。
最後に右下の「Create App ID」をクリックします。
(5)．セキュリティチェックを実施します（セキュリティチェックの問題は色々な種類があります）。
(6)．FacebookアプリIDが取得出来ました。真ん中の赤線枠内の数字があなたのアプリIDです。
（画面キャプチャはモザイクをかけていますが、実際の画面には数字が表示されます。）
アプリIDの数字をメタタグに記述してください。
・・・実は、これで完了ではありません。
アプリIDを使用するためには、Facebookのセッティングを行う必要があります。
左メニューにある「Settings」をクリックします。
(7)．「Contact Email」にメールアドレスを入力し、「＋Add Platform」をクリックします
(8)．「WebSite」をクリックします。
(9)．サイトURL（下はモバイルURL）を入力して、右下の「Save Change」をクリックします。
(10)．左メニューの「Status＆Review」をクリックします。
(11)．赤線枠内の空白部分をクリックすると画面にダイアログが表示されるので、「確認」をクリックします。
(12)．キャプチャ画像のように緑の丸が表示されたら設定は正常に完了です。
以上がFacebookのOGPに関するIDの取得、確認となります。
結構面倒ですね・・・
ちなみに私は過去のFacebookの設定画面を参考にして設定を行っていたので、なかなかうまくいきませんでした。
そういった混乱を避けるべく、なるべく更新日を確認して、最新の情報、方法をお探しすることをおススメします。
4.Facebook上でのOGP確認
Facebookでは、OGPの設定を確認するための公式ツールとして、「Open Graph Debugger」というものがあります。
使い方は、OGP設定を確認したいページのURLを入力して「Debug」ボタンを押すだけです。
もし不具合があればエラーの詳細が表示されますので、それを元にOGP設定を見直してみてください。
（今回は基本となる設定だけなので割愛しましたが、）Facebookにはその他にも独自のOGP設定があります。
詳しくはFacebookの開発者向けページをご覧ください。
Open Graph Reference Documentation | Facebook Developers（英語）
5.Twitter独自のOGP設定
最後にTwitter独自のOGP設定についてです。
TwitterもFacebookのOGP設定と同じでように、必要なプロパティを<meta>タグに追加することで実現します。
Twitterの基本的なOGP設定は以下の通りです。
「OGPの設定方法」で紹介したタグが設定済みの場合、以下の2つを加えるだけでTwitter カードに対応できます。
※ 以前はFacebookと同様に、OGPを有効にするためにはTwitterへの登録設定が必要でしたが、2015年4月13日現在では設定ページがなくなっており、メタタグ設定を行った後に、Twitterカードのテストを実施することで登録とみなすように変更されたようです。
<meta name=”twitter:site” content=”Twitterのアカウント”>
各項目について説明します。
１．twitter:card
Twitterカードの種類を指定します。カードの種類については、下記をご参照ください。
https://dev.twitter.com/cards/types
今回はデフォルト設定である「content=”summary”」を指定した例について説明します。
（他にも「content=”summary_large_image”」という、画像を大きく表示する指定もあり、その他カード指定も出来ます。適宜、変更してご指定ください。）
２．twitter:site
Twitterのアカウントを「@」をつけて指定します。弊社のアカウントの場合だと「@united_rivers」、私個人のアカウントの場合だと「@kshikida」なります。
（例として、私のアカウントを使用したTwitterカードで説明します。）
6.TwitterカードのOGP確認
上記のメタタグの設定を行うことで、TwitterカードのOGPを確認することが出来ます。
TwitterカードのOGP確認は以下のURLにアクセスして確認します。
https://cards-dev.twitter.com/validator
では、実際にURLを入力して確認してみましょう。
URLを入力し、「Preview card」ボタンをクリックしてください。
（下記は、「content=”summary”」を指定した私のサイトが、Twitterカードでどのように表示されるかの確認画面キャプチャです。）
メタタグ設定が正常に行われていれば、上記のようなTwitterカードが表示されます。
（今回は基本となる設定だけなので割愛しましたが、）もちろんTwitterにも、その他に独自のOGP設定があります。
詳しくはTwitterのリファレンスページをご覧ください。
Cards Markup Tag Reference（英語）
設定は面倒かもしれませんが
こうして見るとFacebookもTwitterも、独自のメタタグの埋め込みや、OGPを有効にする設定を行わないといけないため、かなり面倒な作業に感じるかもしれません。
（実際、私もかなり面倒に感じましたし、何より苦労したのはFacebookのアプリID取得画面が仕様変更されていたため、かなり戸惑いました・・・）
しかし、この面倒な設定も一度設定を行ってしてしまえば後が楽になることはもちろん、その効果はとても大きいものとなります。
人目を惹きやすいことはもちろん、面倒だからこそ設定を行っていない他のサイトに差をつけることが出来るからです。
それならば是非ともOGP設定は行っておくべきと言えるでしょう。
その他のノウハウ集＆コラム
SEO対策事例