各ページに数行のコードを追加することで、ソーシャル メディアを介して投稿が共有されたときに訴求力のあるサイト表示になるようにできます。これにより、より豊富な情報を含むプレビューを提供して、サイトへのアクセスを増やすことができます。
各ページに数行のコードを追加することで、ソーシャル メディアを介して共有されたときにサイトが表示される方法を調整できます。これにより、より豊富な情報を含むプレビューを提供して、サイトへのアクセスを増やすことができます。
概要
- schema.org の microdata を使用して、Google+ 用のページのタイトル、説明、画像を提供します。
- Open Graph プロトコル（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 セクションに埋め込まれますが、マイクロデータはコンテキストが存在する場所に配置されます。
itemscope を追加して microdata のスコープを定義する
itemscope を追加することで、特定のアイテムに関するコンテンツのブロックとしてタグを指定できます。
itemtype を追加して、ウェブサイトの種類を定義します。
アイテムのタイプを指定するには、itemscope とともに itemtype 属性を使用します。itemtype の値は、ウェブページのコンテンツの種類に応じて決定できます。こちらのページで、関連するものを確認できます。
itemprop を追加して、schema.org の語彙を使用して各アイテムを記述します。
itemprop は、スコープ内の itemtype のプロパティを定義します。ソーシャル サイトにメタデータを提供する場合、一般的な itemprop 値は name、description、image です。
リッチ スニペットを検証する
Google+ でリッチ スニペットを検証するには、次のようなツールを使用できます。
- 構造化データ テストツール - Search Console
Open Graph プロトコル（OGP）を使用して Facebook にリッチ スニペットを提供する
Open Graph プロトコル（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 属性で構成されます。プロパティとコンテンツには、次の値を指定できます。
| プロパティ | コンテンツ |
|---|---|
og:title |
ウェブページのタイトル。 |
og:description |
ウェブページの説明。 |
og:url |
ウェブページの正規 URL。 |
og:image |
共有された投稿に添付された画像の URL。 |
og:type |
ウェブページのタイプを示す文字列。ウェブページに適した構造化データは、こちらで確認できます。 |
これらのメタタグは、Facebook などのソーシャル サイトのクローラーにセマンティック情報を提供します。
詳細
Facebook の投稿に添付できるものの詳細については、Open Graph Protocol の公式ウェブサイトをご覧ください。
リッチ スニペットを検証する
Facebook でマークアップを検証するには、次のようなツールを使用できます。
Twitter カードを使用して Twitter にリッチ スニペットを表示する
Twitter カードは、Twitter に適用可能な Open Graph プロトコルを拡張したものです。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:site の値に Twitter ID を割り当てることで、Twitter はこの情報を共有投稿に埋め込み、ユーザーがページ所有者と簡単につながることができるようにします。
詳細
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タグを使用しています。
最後に、公開する前に、各ソーシャル サイトでウェブページが想定どおりに表示されることを確認してください。