スマートフォンサイトを表示する

  1. TOP
  2. ソーシャルメディアビジネス活用講座 : 第2回 OGP設定とソーシャルプラグインで、ソーシャルメディア経由のトラフィックを獲得しよう!

エキスパートコラム

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

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

執筆:大月 茂樹(ニイハチヨンサン)

2013年5月15日更新

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

閲覧数5,023views

このコラムをPDF形式でダウンロードする

「ソーシャルメディアビジネス活用講座」では、ソーシャルメディアをビジネスに活用するための心得、ソーシャルメディアを使った集客手法やコミュニケーションなどについて解説していきます。
第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タグを使っておられない方は、是非チャレンジしてみましょう。

    12

  • このエントリーをはてなブックマークに追加
このコラムをPDF形式でダウンロードする

大月 茂樹(おおつき・しげき)

大月 茂樹(おおつき・しげき)

ニイハチヨンサン 代表
http://2843.jp/

1975年、岡山県加賀郡吉備中央町生まれ、岡山市在住。
岡山大学大学院自然科学研究科修了。地元岡山のSIerにて主に官公庁向けのシステム開発やサーバー構築へ従事。その後、Webプロダクションにてフロントエンド・バックエンド開発、Flash制作、一般企業にてインハウスでECサイト運営や各種制作業務を経て、2010年に独立。岡山を拠点にWebサイト制作・Web活用のコンサルティング、スマホアプリ開発などに携わる傍ら、それらをテーマとした講演活動も行なっている。
KDDIウェブコミュニケーションズ CPIエバンジェリスト、倉敷芸術科学大学芸術学部デザイン学科非常勤講師、中小企業庁「中小企業・小規模事業者ワンストップ総合支援事業」登録派遣専門家、岡山県商工会連合会「エキスパート・バンク」登録派遣専門家。

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

マルチデバイス時代のWebデザインガイドブック

  • 「はじめてWEB」でホームページをはじめよう!
  • Jimdoリメイク | プロがあなたのホームページを50,000円(税抜)でリニューアル!
  • 問い合わせ件数をアップさせるなら!「通話料無料・わかりやすい番号」のフリーコール
  • 文具、通信、オフィスのことなら何でもお任せ!まとめてオフィス

ホームページを作るのがはじめてのかたはまずこちらをご覧ください

コラム週間アクセスランキング[期間:2017/6/11~2017/6/17]

おすすめコンテンツ

はじめてWEBおすすめ本

創業・経営のお役立ち情報

  • ソウギョウノート

    飲食・小売・サービス業の開業スケジュールから、融資申込に必要な書類までをカンタン作成

  • 経理通信

    経営者と経理ご担当者必見!中小企業・小規模事業者のための経理サポートサイト

  • まとめてオフィス

    文具、通信、オフィスのことなら何でもお任せ

  • フリーコールS

    問い合わせ件数をアップさせるなら!「通話料無料・わかりやすい番号」のフリーコール

  • auオフィスナンバー

    事務所開設するなら固定電話番号で信頼アップ
    今ならキャンペーン実施中!