SEO

Google が推奨するリッチカードについて調べてみた

リッチカードとは?

リッチカードとは、「ユーザーやクローラに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>

構造化データの実装方法についてもっと学びたい場合は、公式チュートリアルをご利用ください。また、構造化データのサンプル集もあわせてご利用ください。

構造化データの実装方法

こちらでは、構造化データの実装方法について書いていきます。

構造化データのタイプを定義

  1. <head>タグの中に<script>を記述し、typeapplication/ld+jsonにしてください。
  2. Googleにschema.orgという構造化データを使用することを伝えるため、@contextにはhttp://schema.org/を記述します。
  3. @typeには、どういう種類の構造化データにするかを記述します。料理サイトの場合は、下記のようにRecipeと記述します。
<html>
  <head>
    ...
    <script type="application/ld+json">
    {
      "@context": "http://schema.org/",
      "@type": "Recipe"
    }
    </script>
  </head>
</html>

推奨データの追加

構造化データには、記述を推奨されているデータがあります。これらのデータもぜひ実装するようにしましょう。

  1. name属性はページの内容を伝えるために重要な要素です。基本的に記述するようにしましょう。
  2. 下の例では、nameにどういうレシピのページなのかを記述しています。
<html>
<head>
...
<script type="application/ld+json">
{
  "@context": "http://schema.org/",
  "@type": "Recipe",
  "name": "Party Coffee Cake"
}
</script>
</head>
</html>
  1. 推奨データを全て実装すると以下のようになります。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>

サンプルプレビュー画面を見ると、構造化データがどういう風に表示されるかを確認することができます。実装する際は参考にしてみてください。