ソーシャル ディスカバリー

サイトの各ページにコードを数行追加すると、ソーシャル メディアでサイトを共有する際の表示内容を変更できます。 この処理を行うことで、リッチな情報が追加でプレビュー表示され、より多くの人にサイトを閲覧してもらうことができます。

TL;DR

  • schema.org microdata を使用して、ページのタイトル、説明、Google+ 用の画像を提供します。
  • Open Graph Protocol(OGP)を使用して、ページのタイトル、説明、Facebook 用の画像を提供します。
  • Twitter カードを使用して、ページのタイトル、説明、画像、Twitter の Twitter ID を提供します。

サイトの各ページにコードを数行追加すると、ソーシャル メディアでサイトを共有する際の表示内容を変更できます。 リッチな情報を追加でプレビュー表示すると、エンゲージメントを高めることができます。この対応を行わないと、ソーシャル サイトの基本情報しか表示されず、画像やその他の有用な情報が提供されません。

ユーザーは以下のどちらのページをクリックする可能性が高いと思いますか。ユーザーは画像に引かれるため、先にプレビューが目に入ると、そのサイトにさらに興味を持つようになります。

適切なマークアップが設定されている場合: 正しいタイトル、短い説明、画像が含まれています。 これらのアイテムを追加すると、エンゲージメントを高めることができます。
適切なマークアップが設定されていない場合: ページ タイトルのみが表示されています。

ユーザーがソーシャル ネットワークで任意のウェブサイトを友人と共有する場合、そのユーザーはウェブサイトの魅力を伝えるコメントを追加したうえで、友人に紹介するでしょう。しかし、一般的にウェブサイトの説明は面倒であり、説明の内容が本来のページの趣旨からずれてしまうこともあります。

また、サービスによっては、コメントとして入力できる文字数に制限があります。

適切なメタデータをページに追加すると、タイトルや説明、魅力的な画像が表示されるため、ユーザーの共有プロセスを簡素化することができます。

つまり、ユーザーは貴重な時間(または文字)を使って、リンク先のサイトの説明をせずに済みます。

schema.org と microdata を使用して Google+ にリッチ スニペットを表示する

クローラはさまざまな方法でページを解析し、そのコンテンツを把握しています。microdataschema.org のボキャブラリを使用すると、ソーシャル サイトと検索エンジンによってページのコンテンツがより適切に把握されるようになります。

次に例を示します。

<div itemscope itemtype="http://schema.org/Article">
  <h1 itemprop="name">Enjoy fireworks</h1>
  <p itemprop="description">Fireworks are beautiful.
   This article explains how beautiful fireworks are.</p>
  <img itemprop="image" src="//developers.google.com/web/imgs/fireworks.jpg" />
</div>

ほとんどのメタデータはウェブページのヘッダー部分に埋め込みますが、microdata はコンテキストがある場所に挿入します。

itemscope を追加して microdata のスコープを定義する

itemscope を追加すると、タグを特定のアイテムに関するコンテンツのブロックとして指定できます。

itemtype を追加してウェブサイトのタイプを定義する

itemscope と一緒に itemtype 属性を使用すると、アイテムのタイプを指定できます。 itemtype の値は、ウェブページのコンテンツ タイプに応じて決まります。 このページで関連する値を見つけることができます。

itemprop を追加して schema.org ボキャブラリで各アイテムを記述する

itemprop は、スコープ内の itemtype のプロパティを定義します。メタデータをソーシャル サイトに提供する場合、一般的に使用する itemprop の値は namedescription、および image です。

詳細

このような microdata によって、主に Google+ や Google 検索用の意味情報がクローラに提供されます。 Google+ のスニペットやレンダリングの詳細については、次のドキュメントをご覧ください。

リッチ スニペットを検証する

Google+ のリッチ スニペットを検証する場合、次のようなツールを使用できます。

Open Graph Protocol(OGP)を使用して Facebook でリッチ スニペットを表示する

Open Graph Protocol(OGP)は、Facebook にメタデータを提供します。このメタデータは、ウェブページに他の Facebook オブジェクトと同じ機能を提供するために必要です。

<html prefix="g: http://ogp.me/ns#">
  <head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <link rel="stylesheet" href="https://fonts.googleapis.com/icon?family=Material+Icons">
    <link rel="stylesheet" href="https://code.getmdl.io/1.2.1/material.indigo-pink.min.css">
    <script defer src="https://code.getmdl.io/1.2.1/material.min.js"></script>
    <style>
      body {
        margin: 2em;
      }
    </style>
    <meta property="og:title" content="Enjoy Fireworks">
    <meta property="og:description" content="Fireworks are beautiful.
     This article explains how beautiful fireworks are.">
    <meta property="og:image" content=
     "https://developers.google.com/web/imgs/fireworks.jpg">
    <meta property="og:url" content=
     "{{site.sample_link_base}}discovery-and-distribution/optimizations-for-crawlers/social-sites.html">
    <meta property="og:type" content="website">

このメタデータをページのヘッダー部分に含めると、ページが共有されたときに、リッチ スニペットの情報が表示されます。

og: 名前空間付きの meta タグを使用してメタデータを記述する

meta タグは、property 属性と content 属性で構成されます。使用できるプロパティの値と内容は以下のとおりです。

プロパティ 内容
og:title ウェブページのタイトル。
og:description ウェブページの説明。
og:url ウェブページの正規 URL。
og:image 共有する投稿に添付する画像の URL。
og:type ウェブページのタイプを示す文字列。ここでウェブページに適した文字列を見つけることができます。

これらのメタタグによって、主に Google+Facebook などのソーシャル サイトのクローラに意味情報が提供されます。

詳細

Facebook の投稿に表示できる画像やデータの詳細については、Open Graph Protocol の公式サイトをご覧ください。

リッチ スニペットを検証する

Facebook のマークアップを検証する場合、次のようなツールを使用できます。

Twitter カードを使用して Twitter にリッチ スニペットを表示する

Twitter カードは、Twitter に適用できる Open Graph Protocol の拡張機能です。 Twitter カードを使用すると、ウェブページへのリンクを含むツイートに、画像や動画などのメディアを添付できます。

適切なメタデータを追加することで、ウェブページへのリンクが記載されたツイートに、詳細なリッチメディアを追加したカードが表示されるようになります。

twitter: 名前空間付きメタタグを使用してメタデータを記述する

Twitter カードを適切に表示するには、ドメインが承認されていることに加えて、property 属性ではなく、name 属性を使用して twitter:card を含むメタタグを指定する必要があります。簡単な例を次に示します

<html prefix="g: http://ogp.me/ns#">
  <head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <link rel="stylesheet" href="https://fonts.googleapis.com/icon?family=Material+Icons">
    <link rel="stylesheet" href="https://code.getmdl.io/1.2.1/material.indigo-pink.min.css">
    <script defer src="https://code.getmdl.io/1.2.1/material.min.js"></script>
    <style>
      body {
        margin: 2em;
      }
    </style>
    <meta property="og:title" content="Enjoy Fireworks">
    <meta property="og:description" content="Fireworks are beautiful.
     This article explains how beautiful fireworks are.">
    <meta property="og:image" content=
     "https://developers.google.com/web/imgs/fireworks.jpg">
    <meta property="og:url" content=
     "{{site.sample_link_base}}discovery-and-distribution/optimizations-for-crawlers/social-sites.html">
    <meta property="og:type" content="website">
    <meta name="twitter:card" content="summary_large_image">
    <meta name="twitter:site" content="agektmr">

Twitter ID の値を twitter:site に指定すると、この情報が共有される投稿に埋め込まれます。これにより、閲覧者がページの所有者と簡単に交流できるようになります。

詳細

Twitter カードの詳細については、次のサイトをご覧ください。

リッチ スニペットを検証する

マークアップの検証のために、Twitter では次のツールが用意されています。

ベスト プラクティス

ベスト プラクティスは、ウェブページに対して上記の 3 つの対策をすべて実施することです。 次に例を示します。

<!-- namespace declaration -->
<html prefix="og: http://ogp.me/ns#">
  <!-- define microdata scope and type -->
  <head itemscope itemtype="http://schema.org/Article">
    <title>Social Site Example</title>
    <!-- define ogp and itemprop of microdata in one line -->
    <meta property="og:title" itemprop="name" content="Enjoy Fireworks">
    <!-- define ogp image -->
    <meta property="og:image" content=
     "https://developers.google.com/web/imgs/fireworks.jpg">
    <!-- use link[href] to define image url for microdata -->
    <link itemprop="image" href="//developers.google.com/web/imgs/fireworks.jpg">
    <!-- define ogp and itemprop of microdata in one line -->
    <meta property="og:url" content=
     "{{site.sample_link_base}}discovery-and-distribution/optimizations-for-crawlers/social-sites2.html">
    <!-- define ogp type -->
    <meta property="og:type" content="website">
    <!-- define twitter cards type -->
    <meta name="twitter:card" content="summary_large_image">
    <!-- define site's owner twitter id -->
    <meta name="twitter:site" content="agektmr">
    <!-- define description for ogp and itemprop of microdata in one line -->
    <meta property="og:description" itemprop="description"
     content="Fireworks are beautiful. This article explains how beautiful fireworks are.">
    <!-- general description (separate with ogp and microdata) -->
    <meta name="description" content="Fireworks are beautiful.
     This article explains how beautiful fireworks are.">
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <link rel="stylesheet" href="https://fonts.googleapis.com/icon?family=Material+Icons">
    <link rel="stylesheet" href="https://code.getmdl.io/1.2.1/material.indigo-pink.min.css">
    <script defer src="https://code.getmdl.io/1.2.1/material.min.js"></script>
    <style>
      body {
        margin: 2em;
      }
    </style>
  </head>

microdata と OGP が同じマークアップを共有していることに注目してください。

  • itemscope は、head タグにあります。
  • titledescription は、microdata と OGP で共有されています。
  • itemprop="image" は、property="og:image" を指定した meta タグを再利用する代わりに、href 属性を指定した link タグを使用しています。 最後に、ウェブページを公開する前に、各ソーシャル サイトにウェブページが想定どおりに表示されることを確認してください。