2013年5月10日金曜日

SNS対策にOGPタグは必須です。 今さら……第53回


今さら聞けないネットのあれこれ。
「SNS対策にはOGPタグは必須」
についてお話します。


重要度:★★★★
難易度:★★~★★★★


OGPタグと言う言葉を聞いた事がありますか?
最近はFacebookがそこそこ流行っているので、徐々にではありますが、一般にも広がってきています。



 OGP(Open Graph Protocol)

まぁ名前はどうでもいいのですが、どういった事をするかと言いますと。
簡単に言うと「このウェブページは何のことを書いているか」という情報を、プログラムから読める形でHTMLに付加する記述方法のことです。
もう少し解りやすく言えば、
いいねボタンを押して、コメントすれば、タイムラインに、サイト情報が画像入りで掲載される。と言う夢の様?なタグの事です。



図1
コメントしたのボックス内に画像・ページタイトル・概要などがチキンと入っている。


上記の様に、OGPタグを適切に設定してあるサイトでは「いいね」ボタンを押すと、自分のコメント欄の下に枠で囲まれた内部の内容を自動的に表示してくれます。

サンプルの画像は、Facebookですが、mixiでも同じ様な表示がされます。

ちなみに、設定が適正にされていない、あるいは設定そのものがされていない場合は、下記の画像の様になります。


図2
設定がされていないと、タイトルとサイトURLしか表示されない。


いいねを押しただけで、このようにタイムラインに表示されるのであれば、キチンと設定しておきたいですよね。
綺麗に表示されていれば、それでけで見る相手に対して、良い印象を与えられます。

設定方法は、それほど難しくは無いのですが、多少なりともHTMLの知識が必要になるので、解らない人は、解る人に聴きながら設定した方が、良いでしょうね。

またブログにも当然設定出来るのですが、設定するブログによって方法が違ったり、書き出すタグの書式が特殊だったりするので、それぞれのブログ(アメブロやYahooブログなど)に合った方法を探してください。
大抵の場合は検索にあるはずです。


では具体的な代表的な書式を書きます。
下にある書式だけもで抑えておけば、最低限の形にはなるので、やっておきましょう。

下記のメタタグをHTMLの<head>~</head>内に記述します。

1:/// <meta property="og:title" content="タイトル" />
2:/// <meta property="og:type" content="オブジェクトのタイプ" />
3:/// <meta property="og:url" content="このページのURL" /> 
4:/// <meta property="og:image" content="表示される画像のパス" /> 
5:/// <meta property="og:description" content="概要を説明する文章" /> 
6:/// <meta property="og:site_name" content="サイトの名前" />

** 以下Facebook用OGP ***
7:/// <meta property="fb:app_id" content="アプリID"/>



1:ページタイトル
個別のページタイトルを表示します。
ブログのように様々なページがある場合に、このページタイトルを表示しておくことで、他のページと区別を付ける事が出来ます。またこのタイトルが見出しの役目も果たすので、解りやすいタイトルにしておくことが重要です。

2:ページの種類
このページが、サイトのページ(企業や一般的なホームぺージ)なのか、ブログなのかを判別するタグ。
修理は
・article ・blog ・websit
の3種類

3:ページURL

現在のページURLです。


4:表示画像
表示させるサムネイル画像のパス


5:概要文章 ※
概要文ですが、これ実は設定しない方が良い場合があります。
特定のブログなどは、サイト内の本文最初に出てくる<p>~</p>の文章を自動的に取得して表示する設定になっている場合があるからです。
ただしこの項目を未設定にすると、最悪の場合、概要文章はなにも表示されない事があるので、注意が必要です。


6:サイト名称
掲載サイトの名称です。

Facebook用OGP
必ず必要という事は無いですが、Facebookに対してOGPを設定したいのであれば、必須になってきます。

7:アプリID
このOGPを動かす為に必要なアプリIDです。


最低でも、上記の6種類+1のタグを、HTMLのヘッダー部分に入れておけば、Facebookやmixiで綺麗な表示がされます。ただし、Facebookやmixiなど独自のOGPタグ設定があるので、それぞれのSNSに対応したいのであれば、その仕様を確認してた方が良いでしょう。


上記以外にも、電話番号や住所などといった要素のタグも用意されいますので、興味のある方は調べてみてください。


参考サイト


OGPタグに関して比較的詳しいサイト ////
Facebookなどで使われている「OGP」の一覧



ブログ設定に関するOGP(検索結果) ////
検索キーワード:ogp 設定 ブログ




神奈川県を中心として主に横浜・川崎・東京23区西部の中小企業・個人事業主向けホームページを制作しております。 横浜本田WEB


横浜本田WEB Facebookページ
http://www.facebook.com/hondaweb?fref=ts

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


Facebookへ投稿