Googleの検索結果画面から文字情報だけでなく、画像、価格、評価などを表示させることができるリッチスニペット。他にもパンくずやサイト内検索ボックスも検索結果画面上で表示させることができます。
わざわざサイト内に入らずとも、検索結果画面上でいろいろな情報を表示してくれるのはSEO的にも有利に働きます。
リッチスニペットを使うためには、あらかじめクローラーにHTMLで書かれた情報が何を意味するのかを事前に伝えておく必要があります。これを構造化データと言います。構造化データを使うには細かく記述が決められていて、記述漏れがあるとリッチスニペットとして表示してもらえません。
この記事では個人的によく使う構造化データの書き方をまとめましたので参考にしてください。
構造化データ テストツール
記述した構造化データが正しいかどうかはGoogleが提供している「構造化データ テストツール」で調べることができます。
構造化データ テストツール
https://search.google.com/structured-data/testing-tool?hl=ja
投稿
ブログ、ニュースの記事などで使われます。
JSON-LDで記述する場合は以下のように書きます。
<script type="application/ld+json">
{
"@context": "https://schema.org",
"@type": "NewsArticle",
"mainEntityOfPage": {
"@type": "WebPage",
"@id": "https://site-name.jp/article/"
},
"headline": "【記事タイトル】",
"image": {
"@type": "ImageObject",
"url": "【サムネイルURL】",
"height": 【サムネイルの高さ・例：500】,
"width": 【サムネイルの幅・例：1000】
},
"datePublished": "【公開日・例：2016-12-06T00:00:00+08:00】",
"dateModified": "【最終変更日・例：2016-12-06T00:30:00+08:00】",
"author": {
"@type": "Person",
"name": "【著者名】"
},
"publisher": {
"@type": "Organization",
"name": "【出版社、サイト名】",
"logo": {
"@type": "ImageObject",
"url": "【ロゴURL】",
"width": 【サムネイルの幅・例：1000】,
"height": 【ロゴの高さ・例：500】
}
},
"description": "記事の説明文です。"
}
</script>
パンくずリスト
<ol itemscope itemtype="https://schema.org/BreadcrumbList">
<li itemprop="itemListElement" itemscope
itemtype="https://schema.org/ListItem">
<a itemprop="item" href="https://example.com/books">
<span itemprop="name">トップページ</span></a>
<meta itemprop="position" content="1" />
</li>
›
<li itemprop="itemListElement" itemscope
itemtype="https://schema.org/ListItem">
<a itemscope itemtype="https://schema.org/WebPage"
itemprop="item" itemid="https://example.com/books/sciencefiction"
href="https://example.com/books/sciencefiction">
<span itemprop="name">サービス一覧</span></a>
<meta itemprop="position" content="2" />
</li>
›
<li itemprop="itemListElement" itemscope
itemtype="https://schema.org/ListItem">
<span itemprop="name">Web制作</span>
<meta itemprop="position" content="3" />
</li>
</ol>
JSON-LDで記述する場合は以下のように書きます。
<script type="application/ld+json">
{
"@context": "https://schema.org",
"@type": "BreadcrumbList",
"itemListElement": [
{
"@type": "ListItem",
"position": 1,
"item": {
"@id": "https://site-name.jp/",
"name": "トップページ"
}
}, {
"@type": "ListItem",
"position": 2,
"item": {
"@id": "https://site-name.jp/2/",
"name": "サービス一覧"
}
}, {
"@type": "ListItem",
"position": 3,
"item": {
"@id": "https://site-name.jp/3/",
"name": "Web制作"
}
}
]
}
</script>
よくあるご質問
<div itemscope itemtype="https://schema.org/FAQPage">
<div itemscope itemprop="mainEntity" itemtype="https://schema.org/Question">
<h3 itemprop="name">質問</h3>
<div itemscope itemprop="acceptedAnswer" itemtype="https://schema.org/Answer">
<div itemprop="text">回答</div>
</div>
</div>
<div itemscope itemprop="mainEntity" itemtype="https://schema.org/Question">
<h3 itemprop="name">質問</h3>
<div itemscope itemprop="acceptedAnswer" itemtype="https://schema.org/Answer">
<div itemprop="text">回答</div>
</div>
</div>
</div>
JSON-LDで記述する場合は以下のように書きます。
サイト内検索ボックス
サイト内検索ボックスを表示させるには、JSON-LDで記述すればOK
<script type="application/ld+json">
{
"@context": "https://schema.org",
"@type": "WebSite",
"url": "【サイトURL】",
"potentialAction": {
"@type": "SearchAction",
"target": "【検索結果ページURL】?q={search_term}",
"query-input": "required name=search_term"
}
}
</script>
