Help us understand the problem. What is going on with this article?

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

More than 1 year has passed since last update.

リッチカードとは?

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

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

yoshito410kam
沖縄でのんびり暮らしている暇人です
http://utina.yoshitokamizato.com/
Why not register and get more from Qiita?
  1. We will deliver articles that match you
    By following users and tags, you can catch up information on technical fields that you are interested in as a whole
  2. you can read useful information later efficiently
    By "stocking" the articles you like, you can search right away
Comments
No comments
Sign up for free and join this conversation.
If you already have a Qiita account
Why do not you register as a user and use Qiita more conveniently?
You need to log in to use this function. Qiita can be used more conveniently after logging in.
You seem to be reading articles frequently this month. Qiita can be used more conveniently after logging in.
  1. We will deliver articles that match you
    By following users and tags, you can catch up information on technical fields that you are interested in as a whole
  2. you can read useful information later efficiently
    By "stocking" the articles you like, you can search right away
ユーザーは見つかりませんでした