ソーシャルでの発見

各ページに数行のコードを追加することで、ソーシャル メディアでサイトを共有する際のサイトの表示方法を変えることができます。これにより、他の方法よりも豊富な情報を含むプレビューを表示できるため、より多くのユーザーをサイトに誘導できます。

Eiji Kitamura

各ページに数行のコードを追加すると、ソーシャル メディアでの共有時のサイトの表示方法を変えることができます。これにより、他の方法よりも豊富な情報を含むプレビューを表示できるため、より多くのユーザーをサイトに呼び込むことができます。

まとめ

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

各ページに数行のコードを追加すると、ソーシャル メディアでの共有時のサイトの表示方法を変えることができます。これにより、他の方法では得られない豊富な情報を含むプレビューが提供されるため、エンゲージメントを高めることができます。使用しない場合、ソーシャル サイトは基本情報のみを提供し、画像やその他の有用な情報は表示されません。

どちらがクリックされる可能性が高いと思いますか。ユーザーは画像に引き付けられ、早期プレビューがあれば気に入ります。

適切なマークアップを使用する場合: 正しいタイトル、簡単な説明、画像が含まれます。こうした項目を追加すると、エンゲージメントを高めることができます。
適切なマークアップを使用する場合: 正しいタイトル、簡単な説明、画像が含まれます。こうした項目を追加すると、エンゲージメントを促進できます。
適切なマークアップがない場合、ページタイトルのみが含まれます。
適切なマークアップがない場合、ページタイトルのみが含まれます。

ソーシャル ネットワーク上の誰かがウェブサイトを友だちと共有したいと思ったら、そのウェブサイトのすばらしさを説明したメモを書き留めて共有します。しかし、ウェブサイトの説明は煩雑なものになりがちで、ページ所有者の視点から見ると要点を見逃してしまう可能性があります。一部のサービスでは、ユーザーがメモに入力できる文字数が制限されています。

ページに適切なメタデータを追加することで、タイトル、説明、魅力的な画像を提供することで、ユーザーによる共有プロセスを簡素化できます。つまり、ユーザーはリンクの説明に貴重な時間（または文字）を費やす必要がなくなります。

schema.org と microdata を使用して Google+ でリッチ スニペットを提供する

クローラーはさまざまな方法でページを解析し、コンテンツを把握します。microdata と schema.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>

ほとんどのメタデータはウェブページの head セクションに埋め込まれていますが、microdata はコンテキストが存在する場所に存在します。

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

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

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

itemtype 属性を itemscope と一緒に使用すると、アイテムのタイプを指定できます。itemtype の値は、ウェブページのコンテンツの種類に応じて決まります。こちらのページで関連するものをお探しください。

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

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

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

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

構造化データ テストツール

Open Graph Protocol（OGP）を使用して Facebook でリッチ スニペットを提供する

Open Graph Protocol（OGP）は、ウェブページが他の Facebook オブジェクトと同じ機能を持たせるために必要なメタデータを Facebook に提供します。

<html prefix="og: 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="https://example.com/discovery-and-distribution/optimizations-for-crawlers/social-sites.html">
    <meta property="og:type" content="website">

このメタデータをページの head セクションに含めると、ページが共有されたときにリッチ スニペット情報が提供されます。

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

meta タグは、property 属性と content 属性で構成されます。プロパティとコンテンツは、次のいずれかの値を取ります。

プロパティ Content
og:title ウェブページのタイトル。
og:description ウェブページの説明。
og:url ウェブページの正規 URL。
og:image 共有された投稿に添付された画像の URL。
og:type ウェブページの種類を示す文字列。こちらから、お客様のウェブページに適したものを見つけることができます。

これらのメタタグは、Facebook などのソーシャル サイトからクローラーにセマンティック情報を提供します。

詳細

Facebook の投稿に添付できるものについて詳しくは、Open Graph Protocol の公式サイトをご覧ください。

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

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

Twitter カードを使用して Twitter でリッチ スニペットを提供する

Twitter カードは、Twitter に適用されるオープングラフ プロトコルの拡張版です。ウェブページへのリンクを含むツイートに画像や動画などのメディアを添付できます。適切なメタデータを追加することで、ページへのリンクがあるツイートに、追加した詳細な情報を含むカードが追加されます。

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

Twitter Card を機能させるには、ドメインが承認されている必要があります。また、property 属性ではなく、name 属性として twitter:card を持つメタタグが含まれている必要があります。

簡単な例:

<html prefix="og: 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="https://example.com/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 Cards について詳しくは、以下をご覧ください。

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

マークアップを検証するために、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="https://example.com/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 タグにあります。
  • title と description は microdata と OGP の間で共有されます
  • itemprop="image" は、property="og:image" で meta タグを再利用する代わりに、href 属性を含む link タグを使用しています。

最後に、ウェブページを公開する前に、各ソーシャル サイトでウェブページが正しく表示されることを確認します。