リッチカードとは？
リッチカードとは、「ユーザーやクローラにWebサイトの構造をわかりやすく伝える」という役割を果たすものです。このリッチカードを導入することで、検索ページにおいて視覚的に強い印象を与えることができ、結果としてサイトのSEO強化に繋がります。リッチカードを導入するには、構造化データをHTMLの中に記述する必要があります。
構造化データとは？
構造化データとは、サーチエンジンにサイトの構造をわかりやすく伝えるデータのことです。そのため、この構造化データを正しく記述することができれば、検索エンジンからの評価も向上します。
構造化データの種類
構造化データには、以下の種類があります。
- Breadcrumbs
- Corporate contacts
- Carousels
- Logos
- Sitelinks Searchbox
- Social profiles
- Articles
- Books
- Courses
- Datasets
- Events
- Fact checks
- Job postings
- Local businesses
- Music
- Occupations
- Podcasts
- Products
- Recipes
- Reviews
- TV & movies
- Video
構造化データはスマホ表示にも有効
構造化データはPC、スマホなど、どちらの検索結果にも表示されます。
注意
リッチカードを導入する際は、必ずテストを行い、文法的におかしくないかどうかを確かめるようにしてください。もし何かしらのエラーが発生していた場合、SEOに悪影響があるので必ず確認するようにしましょう。確認方法に関しては、構造化データテストツールを使用してください。
構造化データの実装方法
構造化データはJavaScriptをベースとしたJSON-LDというデータ形式で記述します。こちらは、HTMLに直接埋め込むことで実装することができます。以下に書いてあるものが、実際の構造化データのサンプルになります。
<script type="application/ld+json">
{
"@context": "http://schema.org/",
"@type": "Product",
"name": "Yoast SEO for WordPress",
"image": "https://cdn-images.yoast.com/...",
"description": "Yoast SEO is the most ...",
"brand": {
"@type": "Thing",
"name": "Yoast"
},
"offers": {
"@type": "Offer",
"priceCurrency": "USD",
"price": "89.00"
}
}
</script>
構造化データの実装方法についてもっと学びたい場合は、公式チュートリアルをご利用ください。また、構造化データのサンプル集もあわせてご利用ください。
構造化データの実装方法
こちらでは、構造化データの実装方法について書いていきます。
構造化データのタイプを定義
-
<head>タグの中に<script>を記述し、typeをapplication/ld+jsonにしてください。 - Googleに
schema.orgという構造化データを使用することを伝えるため、@contextにはhttp://schema.org/を記述します。 -
@typeには、どういう種類の構造化データにするかを記述します。料理サイトの場合は、下記のようにRecipeと記述します。
<html>
<head>
...
<script type="application/ld+json">
{
"@context": "http://schema.org/",
"@type": "Recipe"
}
</script>
</head>
</html>
推奨データの追加
構造化データには、記述を推奨されているデータがあります。これらのデータもぜひ実装するようにしましょう。
-
name属性はページの内容を伝えるために重要な要素です。基本的に記述するようにしましょう。 - 下の例では、nameにどういうレシピのページなのかを記述しています。
<html>
<head>
...
<script type="application/ld+json">
{
"@context": "http://schema.org/",
"@type": "Recipe",
"name": "Party Coffee Cake"
}
</script>
</head>
</html>
- 推奨データを全て実装すると以下のようになります。
Recipeに関する推奨データはこちらのページをご参考ください。
<html>
<head>
...
<script type="application/ld+json">
{
"@context": "http://schema.org/",
"@type": "Recipe",
"name": "Party Coffee Cake",
"image": "https://www.leannebrown.com/...",
"author": {
"@type": "Person",
"name": "Mary Stone"
},
"datePublished": "2018-03-10",
"description": "This coffee cake...",
"prepTime": "PT20M",
"cookTime": "PT30M",
"totalTime": "PT50M",
"recipeYield": "10 servings",
"recipeCategory": "Dessert",
"recipeCuisine": "American",
"keywords": "cake for a party, coffee",
"nutrition": {
"@type": "NutritionInformation",
"calories": "270 calories"
},
"recipeIngredient": [
"2 cups of flour",
"3/4 cup white sugar",
"2 teaspoons baking powder",
"1/2 teaspoon salt",
"1/2 cup butter",
"2 eggs",
"3/4 cup milk"
],
"recipeInstructions": [
{
"@type": "HowToStep",
"text": "Preheat the oven to 350..."
},
{
"@type": "HowToStep",
"text": "In a medium bowl, combine..."
},
{
"@type": "HowToStep",
"text": "Mix in butter until the..."
},
{
"@type": "HowToStep",
"text": "In a large bowl, combine..."
},
{
"@type": "HowToStep",
"text": "Mix in the butter."
},
{
"@type": "HowToStep",
"text": "Spread into the prepared pan."
},
{
"@type": "HowToStep",
"text": "Sprinkle the streusel..."
},
{
"@type": "HowToStep",
"text": "Bake for 30 to 35..."
},
{
"@type": "HowToStep",
"text": "Allow to cool."
}
],
"video": [
{
"name": "How to make a Party Coffee Cake",
"description": "This is how ...",
"thumbnailUrl": [
"https://example.com/hoge.jpg",
"https://example.com/hoge.jpg",
"https://example.com/hoge.jpg"
],
"contentUrl": "http://hoge",
"embedUrl": "http://www.hoge",
"uploadDate": "2018-02-05T08:00:00+08:00",
"duration": "PT1M33S",
"interactionCount": "2347",
"expires": "2019-02-05T08:00:00+08:00"
}
]
}
</script>
</head>
</html>
サンプルプレビュー画面を見ると、構造化データがどういう風に表示されるかを確認することができます。実装する際は参考にしてみてください。