ソーシャルメディアビジネス活用講座 全12回 第2回 OGP設定とソーシャルプラグインで ソーシャルメディア経由のトラフィックを獲得しよう 執筆 大月 茂樹 ニイハチヨンサン ソーシャルメディアビジネス活用講座 では ソーシャルメディアをビジネスに活用するための心得 ソーシャルメディア を使った集客手法やコミュニケーションなどについて解説していきます 第2回のテーマは OGP設定とソーシャルプラグインで ソーシャルメディア経由のトラフィックを獲得しよう です OGP って何 フェイスブックのユーザーの方であれば良く目にしてらっしゃるはずですが フェイスブックでは AさんがBさんの投稿に ついて いいね と言っています という情報が流れているのはもちろん Aさんが について いいね と言ってい ます のように 外部のウェブサイトのコンテンツ ページ についての情報がニュースフィードへ表示されます これは そのウェブサイトに いいね ボタンが設置されていて それをあなたの友達が押したからですが 本来 いいね というのはフェイスブック特有のものです にも関わらず フェイスブックには関係のない外部のウェブサイトの情報がニュー スフィードへ表示されるのには それを実現する何かしらの仕組みがあるということです その仕組みが OGP オージーピー です OGP とは Open Graph Protocol オープングラフプロトコル の略で 例えばあなたのウェブサイトやブログ内のコンテンツを ソーシャルメディ ア内のコンテンツと同様に あたかも そのソーシャルメディア上での投稿であるかのように 扱えるようにする仕組みの ことで フェイスブックやGoogle+などのソーシャルメディアが採用しています 前回掲載した図を再掲しますが いいね ボタンや +1 ボタンが押されたときにそれが友達へと伝播するのは この OGPという仕組みがあるからこそ実現されているものです
少々難しい内容ですが OGPという仕組みがあるからなんだな くらいで捉えておいていただければ それでも十分で す それともうひとつ ウェブサイトやブログなどへ設置される いいね ボタンや +1 ボタン ツイート ボタンなどのこと を総称して ソーシャルプラグイン と呼ぶことを押さえておきましょう ソーシャルプラグインの設置方法は 後半で解説 します さて このOGPを利用する際に是非押さえておきたいのが Open Graphタグ なのですが これについて解説する前に おそらく皆さんご存知と思われる<meta name="description">タグについておさらいしてみましょう 検索エンジンへウェブサイトやブログの内容を伝える <meta name="description">タグ 以下は Googleで ニイハチヨンサン と検索してみた結果です
ここで赤く囲ってある箇所はウェブサイトの要約文で 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>タグの内側に記述します <meta property="og:title" content="ウェブサイトやウェブページのタイトル"> <meta property="og:type" content="website もしくは blog あるいは article"> <meta property="og:url" content="ウェブサイトやウェブページのurl"> <meta property="og:image"
content="ニュースフィードへ表示させたい画像のurl"> <meta property="og:description" content="ウェブサイトやウェブページの要約文"> Open Graphタグには ここに示した5つのタグの他にも数種のタグが存在し また <meta property="og:image">タグは複数個記述できるなど奥は深いですが 最低限この5つの記述ができていれば十分で す よりわかりやすいように 私のウェブサイトでの例を示してみます <meta property="og:title" content="webサイト制作 Web活用支援 ニイハチヨンサン"> <meta property="og:type" content="website"> <meta property="og:url" 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でシェアしたときの様子を見てみましょう
赤く囲ってある箇所を見てください ページタイトルは<title>タグから拾われているようですが Open Graphタグが記述されていないためにページの要約文は本文中から適当に抜粋されてしまっています 場合によっては 意味の全く通じない要約文になってしまったり 何も表示されなかったりもします この例では幸い 何とか意味の通じる要約文になってはいるもののダラダラと文章が続いており 何について書かれた ウェブページなのかがわかりにくいですね 一方 Open Graphタグを記述したウェブページをFacebookでシェアしたときの様子を見てみましょう 赤く囲ってある箇所を見てください こちらはOpen Graphタグに記述した内容がキチンと表示されています 表示されている画像はOpen Graphタグのひとつである<meta property="og:image">に記述したロゴ画像です
実際にニュースフィードへ表示された様子を比較してみましょう 上段がOpen Graphタグが設定されていないウェブページ 下段が設定されているウェブページがシェアされた様子です また Google+のストリームでの表示の様子も見てみましょう
このように Open Graphタグを使うとニュースフィードやストリームでの表示内容を意図通りに設定できます 検索サイトでの表示と同様 に ユーザーが思わずクリックして見たくなるようなタイトルや要約文 画像をOpen Graphタグを使って記述できていれば ソーシャルメディア経由のアクセスをより多く獲得できます だとすれば Open Graphタグを活用しない手はありませんよね まだ Open Graphタグを使っておられない方は 是非チャレンジしてみましょう ソーシャルプラグインを設置する ソーシャルプラグイン とは ウェブサイトやブログへ設置される いいね ボタンや +1 ボタン ツイート ボタンなど のことです みんビズではもちろん ブログサービスなどであれば特に難しい設定をしなくても これらはまず利用できま す
みんビズでのOGP設定の方法は 原 一宣 さんの みんビズ制作講座 集客を考えてみよう 第1回 META要素 OGPを登録してみよう で解説されています 最近では一般のウェブサイトやブログにおいても これらが設置されているウェブサイトがどんどん増えています という のも ウェブサイトへアクセスしたユーザーが いいね ボタンや +1 ボタン ツイート ボタンを押してくれると それを キッカケにしてそのユーザーのフェイスブック友達やサークルの友人 フォロワーがアクセスしてくれ これが連鎖すれば たくさんのトラフィックを獲得できるからです ソーシャルメディア経由のトラフィックを獲得するには 先に解説したOpen Graphタグとソーシャルプラグインの活用は外せません そこで ソーシャルプラグインの中からフェイスブックの いいね ボタン Google+の +1 ボタン ツイッターの ツイート ボタンの設置方法を解説しますので まだ ソーシャルプラグイ ンを設置されていない方は 以下を参考に是非チャレンジしてください いいね ボタンを設置する まずは フェイスブックの いいね ボタンの設置にチャレンジしましょう フェイスブックの開発者サイト内にあるLike Buttonページへアクセスします ページの中程に 上のような入力フォームが表示されているはずです こちらで いいね ボタンを設置したいウェブペー ジのURL 赤く囲った入力欄 や いいね ボタンの表示形式などを入力 設定します
URL to Like いいね ボタンを設置するウェブページのURLを入力 Layout Style 表示形式を選択 Width いいね ボタンの横幅を指定 Show Faces いいね した人のプロフィール画像を表示 非表示を選択 入力 選択を終えたら フォームの一番下にある Get Code ボタンを押します すると 次のようなダイアログが表示されます 1.に表示されているHTMLタグとJavaScriptを いいね ボタンを設置するウェブページのHTMLファイルに貼り付け ます 貼り付ける場所は <body>タグの直後がベストです 次に 2.に表示されているHTMLタグを いいね ボタンを表示させたい箇所に貼り付けます
ウェブページに いいね ボタンが表示されることを確認し いいね ボタンを押してみましょう 自分のプロフィールページへアクセスし 最近のアクティビティ の欄に いいね ボタンを押したことが表示されてい れば いいね ボタンを正しく設置できたことになります +1 ボタンを設置する グーグルの開発者サイト内にある+1 Buttonページへアクセスします
ページの上部の右側に +1 ボタンを設置するためのHTMLタグとJavaScript スニペット が表示されているので こ れを +1 ボタンを設置するウェブページのHTMLファイルに貼り付けます ウェブページに +1 ボタンが表示されることを確認し +1 ボタンを押してみましょう
自分のプロフィールページへアクセスし +1 の欄に +1 ボタンを押したことが表示されていれば +1 ボタンを正し く設置できたことになります ツイート ボタンを設置する 最後は ツイッターの ツイート ボタンを設置する方法です ツイッターサイト内の素材/Twitterボタンページへアクセス します ボタンを選択 の欄において リンクを共有する のラジオボタンを押しましょう すると 以下のように ボタンの オプション フォームが表示されます
フォームの右側の コードのプレビューを見る の欄に ツイート ボタンを設置するためのHTMLタグとJavaScriptが表 示されているので これを ツイート ボタンを設置するウェブページのHTMLファイルへ貼り付けます
ウェブページに ツイート ボタンが表示されることを確認し ツイート ボタンを押してみましょう このように ツイートのダイアログが表示されるはずですので ここでもう一度 ツイート ボタンを押します 自分のプロフィールページへアクセスし ツイートを確認できれば ツイート ボタンを正しく設置できたことになります ソーシャルメディア上でネタとなり トラフィックを獲得できると 以下は Google アナリティクスの ユーザーサマリー 画面を表示させた様子です ズバ抜けてアクセス数の多い日があることを見てい ただけると思います 実は これは私のブログなのですが このような山ができたのは ある投稿がソーシャルメディア上 で ネタ となり かなり盛り上がった結果です
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活用のコンサ ルティング スマホアプリ開発などに携わる傍ら それらをテーマとした講演活動も行なっている
KDDIウェブコミュニケーションズ CPIエバンジェリスト 倉敷芸術科学大学芸術学部デザイン学科非常勤講師 中小企業庁 中小企業 小規模 事業者ワンストップ総合支援事業 登録派遣専門家 岡山県商工会連合会 エキスパート バンク 登録派遣 専門家 著書に マルチデバイス時代のWebデザインガイドブック 共著 ソシム がある Copyright 2018 はじめてＷＥＢ All Rights Reserved. https://hajimeteweb.jp/