少々難しい内容ですが OGPという仕組みがあるからなんだなくらいで捉えておいていただければそれでも十分ですそれともうひとつウェブサイトやブログなどへ設置されるいいねボタンや +1 ボタンツイートボタンなどのことを総称してソーシャルプラグインと呼ぶことを押さえておきましょうソ

(1)

ソーシャルメディアビジネス活用講座（全12回）

第2回：OGP設定とソーシャルプラグインで、ソーシャルメディア経由のトラフィックを獲得しよう！

執筆：大月茂樹（ニイハチヨンサン）「ソーシャルメディアビジネス活用講座」では、ソーシャルメディアをビジネスに活用するための心得、ソーシャルメディアを使った集客手法やコミュニケーションなどについて解説していきます。第2回のテーマは、「OGP設定とソーシャルプラグインで、ソーシャルメディア経由のトラフィックを獲得しよう！」です。

「OGP」って何？

フェイスブックのユーザーの方であれば良く目にしてらっしゃるはずですが、フェイスブックでは「AさんがBさんの投稿について「いいね！」と言っています」という情報が流れているのはもちろん、「Aさんが○○について「いいね！」と言っています」のように、外部のウェブサイトのコンテンツ（ページ）についての情報がニュースフィードへ表示されます。これは、そのウェブサイトに「いいね！」ボタンが設置されていて、それをあなたの友達が押したからですが、本来「いいね！」というのはフェイスブック特有のものです。にも関わらず、フェイスブックには関係のない外部のウェブサイトの情報がニュースフィードへ表示されるのには、それを実現する何かしらの仕組みがあるということです。その仕組みが「OGP（オージーピー）」です。「OGP」とは「Open Graph Protocol（オープングラフプロトコル）」の略で、例えばあなたのウェブサイトやブログ内のコンテンツを、ソーシャルメディア内のコンテンツと同様に（あたかも、そのソーシャルメディア上での投稿であるかのように）扱えるようにする仕組みのことで、フェイスブックやGoogle+などのソーシャルメディアが採用しています。前回掲載した図を再掲しますが、「いいね！」ボタンや「+1」ボタンが押されたときにそれが友達へと伝播するのは、この OGPという仕組みがあるからこそ実現されているものです。

(2)

少々難しい内容ですが、「OGPという仕組みがあるからなんだな」くらいで捉えておいていただければ、それでも十分です。それともうひとつ。ウェブサイトやブログなどへ設置される「いいね！」ボタンや「+1」ボタン、「ツイート」ボタンなどのことを総称して「ソーシャルプラグイン」と呼ぶことを押さえておきましょう。ソーシャルプラグインの設置方法は、後半で解説します。さて、このOGPを利用する際に是非押さえておきたいのが「Open Graphタグ」なのですが、これについて解説する前に、おそらく皆さんご存知と思われる<meta name="description">タグについておさらいしてみましょう。

検索エンジンへウェブサイトやブログの内容を伝える

<meta name="description">タグ

以下は、Googleで「ニイハチヨンサン」と検索してみた結果です。

(3)

ここで赤く囲ってある箇所はウェブサイトの要約文で、HTMLファイル内の<meta name="description">タグへ記述した内容が表示されます。 <meta name="description">タグには、そのウェブサイトやウェブページの内容の要約文を記述します。この<meta name="description">を使った要約文の記述がなければ、本文中から適当な箇所が抜粋されて表示されます。これは要約文に限らず、そのウェブサイトやウェブページのタイトルについても同様です。みなさん、SEO（検索エンジン最適化）施策のひとつとして、<title>タグ、<meta name="description">タグ、<h1>タグの内容を良く吟味されることと思いますが、それは、魅力的、かつ、簡潔な記述をしてそれを検索エンジンやユーザーへ伝えることで、ウェブサイトへアクセスをしてもらいたいからですよね。

ソーシャルメディアへウェブサイトやブログの内容を伝えるOpen Graphタグ

検索エンジンへウェブサイトやブログの内容を伝えるのが<meta name="description">タグ、あるいは、<title>タグなどであるとすれば、ソーシャルメディアへそれらの内容を伝えるのが「Open Graphタグ」です。Open Graphタグは<meta

name="description">タグと同様にHTMLファイルの中で<head>タグの内側に記述します。

(4)

content="ニュースフィードへ表示させたい画像のURL"> <meta property="og:description" content="ウェブサイトやウェブページの要約文"> Open Graphタグには、ここに示した5つのタグの他にも数種のタグが存在し、また、<meta property="og:image">タグは複数個記述できるなど奥は深いですが、最低限この5つの記述ができていれば十分です。よりわかりやすいように、私のウェブサイトでの例を示してみます。

content="http://xxx.2843.jp/2013/social-media/vol02/sample-02.html"> <meta property="og:image" content="http://xxx.2843.jp/2013/social-media/vol02/img/logo.png"> <meta property="og:description" content="ニイハチヨンサンは、Webサイト・ホームページの企画・制作・運営、Webアプリケーション・システムの設計・開発・運用などで、一貫してクライアントのビジネスをサポートします。"> 一般のウェブサイトにおいては、<meta property="og:type">へは、"website"、もしくは、"blog"、あるいは、"article"のいずれかとしますが、ウェブサイトのトップページであれば"website"、ブログのトップページであれば"blog"、その他のページは全て"article"とします。 <meta property="fb:app_id">タグを記述すると、Facebookで「ドメインインサイト」を利用できます。ドメインインサイトは、「いいね！」ボタンが何回押されたか？やそれによりニュースフィードへウェブサイトやブログのURLが何度表示されたか？などを解析できるツールです。 <meta property="fb:app_id">タグへは、FacebookアプリのアプリIDを設定するのですが、これにはFacebookアプリ開発者登録が必要となり、今回のコラムの内容ではなくなってきますので、解説は割愛します。それでは、まずOpen Graphタグを記述していないウェブページをFacebookでシェアしたときの様子を見てみましょう。

(5)

赤く囲ってある箇所を見てください。ページタイトルは<title>タグから拾われているようですが、Open Graphタグが記述されていないためにページの要約文は本文中から適当に抜粋されてしまっています。場合によっては、意味の全く通じない要約文になってしまったり、何も表示されなかったりもします。この例では幸い、何とか意味の通じる要約文になってはいるもののダラダラと文章が続いており、何について書かれたウェブページなのかがわかりにくいですね。一方、Open Graphタグを記述したウェブページをFacebookでシェアしたときの様子を見てみましょう。赤く囲ってある箇所を見てください。こちらはOpen Graphタグに記述した内容がキチンと表示されています。表示されている画像はOpen Graphタグのひとつである<meta property="og:image">に記述したロゴ画像です。

(6)

実際にニュースフィードへ表示された様子を比較してみましょう。

上段がOpen

Graphタグが設定されていないウェブページ、下段が設定されているウェブページがシェアされた様子です。また、Google+のストリームでの表示の様子も見てみましょう。

(7)

このように、Open Graphタグを使うとニュースフィードやストリームでの表示内容を意図通りに設定できます。検索サイトでの表示と同様に、ユーザーが思わずクリックして見たくなるようなタイトルや要約文、画像をOpen Graphタグを使って記述できていれば、ソーシャルメディア経由のアクセスをより多く獲得できます。だとすれば、Open Graphタグを活用しない手はありませんよね。まだ、Open Graphタグを使っておられない方は、是非チャレンジしてみましょう。

ソーシャルプラグインを設置する

「ソーシャルプラグイン」とは、ウェブサイトやブログへ設置される「いいね！」ボタンや「+1」ボタン、「ツイート」ボタンなどのことです。みんビズではもちろん、ブログサービスなどであれば特に難しい設定をしなくても、これらはまず利用できます。

(8)

みんビズでのOGP設定の方法は、原一宣。さんの「みんビズ制作講座：集客を考えてみよう -第1回：META要素・OGPを登録してみよう」で解説されています。最近では一般のウェブサイトやブログにおいても、これらが設置されているウェブサイトがどんどん増えています。というのも、ウェブサイトへアクセスしたユーザーが「いいね！」ボタンや「+1」ボタン、「ツイート」ボタンを押してくれると、それをキッカケにしてそのユーザーのフェイスブック友達やサークルの友人、フォロワーがアクセスしてくれ、これが連鎖すればたくさんのトラフィックを獲得できるからです。ソーシャルメディア経由のトラフィックを獲得するには、先に解説したOpen Graphタグとソーシャルプラグインの活用は外せません。そこで、ソーシャルプラグインの中からフェイスブックの「いいね！」ボタン、Google+の「+1」ボタン、ツイッターの「ツイート」ボタンの設置方法を解説しますので、まだ、ソーシャルプラグインを設置されていない方は、以下を参考に是非チャレンジしてください。

「いいね！」ボタンを設置する

まずは、フェイスブックの「いいね！」ボタンの設置にチャレンジしましょう。フェイスブックの開発者サイト内にあるLike Buttonページへアクセスします。ページの中程に、上のような入力フォームが表示されているはずです。こちらで、「いいね！」ボタンを設置したいウェブページのURL（赤く囲った入力欄）や「いいね！」ボタンの表示形式などを入力・設定します。

(9)

URL to Like…「いいね！」ボタンを設置するウェブページのURLを入力。 ● Layout Style…表示形式を選択。 ● Width…「いいね！」ボタンの横幅を指定。 ● Show Faces…「いいね！」した人のプロフィール画像を表示・非表示を選択。 ● 入力・選択を終えたら、フォームの一番下にある「Get Code」ボタンを押します。すると、次のようなダイアログが表示されます。 1.に表示されているHTMLタグとJavaScriptを、「いいね！」ボタンを設置するウェブページのHTMLファイルに貼り付けます。貼り付ける場所は、<body>タグの直後がベストです。次に、2.に表示されているHTMLタグを「いいね！」ボタンを表示させたい箇所に貼り付けます。

(10)

ウェブページに「いいね！」ボタンが表示されることを確認し、「いいね！」ボタンを押してみましょう。

自分のプロフィールページへアクセスし、「最近のアクティビティ」の欄に「いいね！」ボタンを押したことが表示されていれば、「いいね！」ボタンを正しく設置できたことになります。

「+1」ボタンを設置する

(11)

ページの上部の右側に「+1」ボタンを設置するためのHTMLタグとJavaScript（スニペット）が表示されているので、これを「+1」ボタンを設置するウェブページのHTMLファイルに貼り付けます。

(12)

自分のプロフィールページへアクセスし、「+1」の欄に「+1」ボタンを押したことが表示されていれば、「+1」ボタンを正しく設置できたことになります。

「ツイート」ボタンを設置する

最後は、ツイッターの「ツイート」ボタンを設置する方法です。ツイッターサイト内の素材/Twitterボタンページへアクセスします。「ボタンを選択」の欄において「リンクを共有する」のラジオボタンを押しましょう。すると、以下のように「ボタンのオプション」フォームが表示されます。

(13)

フォームの右側の「コードのプレビューを見る」の欄に「ツイート」ボタンを設置するためのHTMLタグとJavaScriptが表示されているので、これを「ツイート」ボタンを設置するウェブページのHTMLファイルへ貼り付けます。

(14)

ウェブページに「ツイート」ボタンが表示されることを確認し、「ツイート」ボタンを押してみましょう。このように、ツイートのダイアログが表示されるはずですので、ここでもう一度「ツイート」ボタンを押します。自分のプロフィールページへアクセスし、ツイートを確認できれば「ツイート」ボタンを正しく設置できたことになります。

ソーシャルメディア上でネタとなり、トラフィックを獲得できると…

以下は、Google アナリティクスの「ユーザーサマリー」画面を表示させた様子です。ズバ抜けてアクセス数の多い日があることを見ていただけると思います。実は、これは私のブログなのですが、このような山ができたのは、ある投稿がソーシャルメディア上で「ネタ」となり、かなり盛り上がった結果です。

(15)

Open Graphタグをキチンと設定し、「いいね！」ボタンや「+1」ボタン、「ツイート」ボタンといったソーシャルプラグインもキチンと設置しておいたからこそ、このような結果を得られたことは言うまでもありません。

まとめ

今回はとても長くなってしまいましたが、最後まで読んでいただき、ありがとうございます。「OGP」とは、あなたのウェブサイトやブログ内のコンテンツを、ソーシャルメディア内のコンテンツと同様に（あたかも、 ● そのソーシャルメディア上での投稿であるかのように）扱えるようにする仕組みのこと検索エンジンへウェブサイトやブログの内容を伝えるのが<meta ● name="description">タグ、あるいは、<title>タグなどであるとすれば、ソーシャルメディアへそれらの内容を伝えるのが「Open Graphタグ」「ソーシャルプラグイン」とは、ウェブサイトやブログへ設置される「いいね！」ボタンや「+1」ボタン、「ツイート」ボタンな ● どのことソーシャルメディア経由のトラフィックを稼ぐには、Open Graphタグの設定とソーシャルプラグインの設置は必須！ ● 今回は、ソーシャルメディアからトラフィックを獲得する上で是非押さえておきたい、OGPとソーシャルプラグインについて解説しました。単にフェイスブックユーザーとして、Google+ユーザーとして、ツイッターユーザーとして利用するだけでなく、それらとご自身のウェブサイトやブログとをOpen Graphタグやソーシャルプラグインを活用してうまく連携し、ソーシャルメディア経由のトラフィック獲得にチャレンジしてください。（第3回に続く）次回のコラムを見る » 大月茂樹（おおつき・しげき）ニイハチヨンサン代表 http://2843.jp/ 1975年、岡山県加賀郡吉備中央町生まれ、岡山市在住。岡山大学大学院自然科学研究科修了。地元岡山のSIerにて主に官公庁向けのシステム開発やサーバー構築へ従事。その後、Webプロダクションにてフロントエンド・バックエンド開発、Flash制作、一般企業にてインハウスでECサイト運営や各種制作業務を経て、2010年に独立。岡山を拠点にWebサイト制作・Web活用のコンサルティング、スマホアプリ開発などに携わる傍ら、それらをテーマとした講演活動も行なっている。

(16)

KDDIウェブコミュニケーションズ

CPIエバンジェリスト、倉敷芸術科学大学芸術学部デザイン学科非常勤講師、中小企業庁「中小企業・小規模事業者ワンストップ総合支援事業」登録派遣専門家、岡山県商工会連合会「エキスパート・バンク」登録派遣専門家。

著書に『マルチデバイス時代のWebデザインガイドブック』（共著、ソシム）がある。