サイトの各ページにコードを数行追加すると、ソーシャル メディアでサイトを共有する際の表示内容を変更できます。この処理を行うことで、リッチな情報が追加でプレビュー表示され、より多くの人にサイトを閲覧してもらうことができます。
サイトの各ページにコードを数行追加すると、ソーシャル メディアでサイトを共有する際の表示内容を変更できます。この処理を行うことで、リッチな情報が追加でプレビュー表示され、より多くの人にサイトを閲覧してもらうことができます。
概要
- 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>
ほとんどのメタデータはウェブページのヘッダー部分に埋め込みますが、microdata はコンテキストがある場所に挿入します。
itemscope を追加してマイクロデータのスコープを定義する
itemscope を追加すると、タグを特定のアイテムに関するコンテンツのブロックとして指定できます。
itemtype を追加してウェブサイトの種類を定義する
アイテムのタイプは、itemscope とともに itemtype 属性を使用して指定できます。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">
このメタデータをページのヘッダー部分に含めると、ページが共有されたときに、リッチ スニペットの情報が表示されます。
og: Namespace の meta タグを使用してメタデータを記述する
meta タグは、property 属性と content 属性で構成されます。プロパティとコンテンツには、次の値を指定できます。
| プロパティ | コンテンツ |
|---|---|
og:title |
ウェブページのタイトル。 |
og:description |
ウェブページの説明。 |
og:url |
ウェブページの正規 URL。 |
og:image |
共有する投稿に添付する画像の URL。 |
og:type |
ウェブページのタイプを示す文字列。ウェブページに適した文字列は、こちらで確認できます。 |
これらのメタタグによって、Facebook などのソーシャル サイトのクローラに意味情報が提供されます。
その他の情報
Facebook の投稿に表示できる画像やデータの詳細については、Open Graph Protocol の公式サイトをご覧ください。
リッチ スニペットを検証する
Facebook のマークアップを検証する場合は、次のようなツールを使用できます。
Twitter カードを使用して Twitter にリッチ スニペットを表示する
Twitter カードは、Twitter に適用できる Open Graph Protocol を拡張したものです。Twitter カードを使用すると、ウェブページへのリンクを含むツイートに、画像や動画などのメディアを添付できます。適切なメタデータを追加することで、ページへのリンクが記載されたツイートに、詳細なリッチメディアを追加したカードが表示されるようになります。
twitter: 名前空間のメタタグを使用してメタデータを記述する
Twitter カードを適切に表示するには、ドメインが承認されていることに加え、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 では次のツールが用意されています。
ベスト プラクティス
ベスト プラクティスは、ウェブページに対して上記の 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タグを使用しています。
最後に、ウェブページを公開する前に、各ソーシャル サイトにウェブページが想定どおりに表示されることを確認してください。