SEO 公開日: 2024.07.03 更新日: 2024.09.11

SEOでよく使われる構造化マークアップは?有名サイトを徹底調査!

pickup
SEOでよく使われる構造化マークアップ

構造化マークアップは、検索エンジンのクローラーをはじめとしたロボットなどが、ページ内のテキストや画像などが何について書かれたものかを明示するためのマークアップです。

そのため、SEOにおいても活用され、GoogleにWebサイトのコンテンツを正しく理解させるのに役立ちます。構造化マークアップにはさまざまな種類があり、使用されるマークアップはサイトごとに特色があります。

今回は、SEO評価の高いサイトの構造化マークアップを調査し、SEOでよく使われる構造化マークアップを紹介します。サイトごとの特徴を読み取れるため、自社サイトに必要な構造化マークアップがわかるでしょう。ぜひ最後までご覧ください。

構造化マークアップとは?

構造化マークアップとは、Googleにページ内の情報を正しく認識させるために、どの情報が何の情報かを明確にした形式で情報をマークアップすることです。

構造化データとは?

構造化データとは、決められたルールに従って意味を付加したデータのことです。

Googleはページのコンテンツを収集し、適切な内容のページを検索結果画面に表示させています。その一方で、Googleは必ずしも人間と同じようにテキストを読み取ることはできず、情報を誤認してしまう可能性があります。

そのため、Googleにページ内のテキストや画像を理解してもらうためには、Googleが読み取れる形でページ内容を記述する必要があります。そこで、ルールに従ったタグを記述して、Googleにページの内容や構造を伝えるデータ形式のことを構造化データと呼びます。

例えば、「株式会社ヒトノテ」という文字列に対して、「ここの記述は社名を表している」と表現する(マークアップする)ことで、ページやコンテンツの意味を正しくGoogleに認識させることができます。

このような、Googleにデータの意味を理解させるために生まれたのが「セマンティックWeb」と呼ばれる考え方です。

セマンティックWeb
統一化された形式に基づいてデータを記載することで、コンピュータシステムが効率的・構造的に情報を収集・解釈できるようにすること

構造化データは、このセマンティックWebの考え方に基づいて生まれています。

▼関連記事
構造化データとは?マークアップを行うメリットやSEOへの影響を解説

構造化マークアップによるSEO効果はあるのか?

構造化マークアップを実装するだけで、検索順位が一気に向上するようなことはありませんが、一定のSEO効果は見込めます。

上記で述べたように、構造化マークアップによってGoogleがページ内の情報を正しく認識できるようになり、正しいコンテンツ評価の獲得につながります。それによって、コンテンツや内容に適した検索結果に表示される可能性も高まるといえます。

加えて、構造化マークアップを実装することによって、リッチリザルトが表示されることもあります。リッチリザルトとは、キーワードに関連して検索結果画面に表示されるコンテンツのことです。

Googleの検索結果画面に表示されるリッチリザルト

上記のレビュー(星)表示は、リッチリザルトの一種です。リッチリザルトはユーザーの目に留まりやすいため、クリック率向上が期待できます。クリック率が上がると当然流入が増えることになるため、構造化マークアップによるSEO効果はあるといえるでしょう。

ただし、構造化マークアップを実装しても、必ずリッチリザルトに表示されるとは限りませんし、FAQリッチリザルトのように、突然表示されなくなるリッチリザルトもあります。

構造化マークアップによって期待できるSEO効果
・Googleに正しくコンテンツを評価してもらう
・リッチリザルトへの表示

【種類別】各サイトの構造化マークアップの使用例

ここでは、SEO評価の高いサイトで使用されている構造化マークアップを、トップページ・一覧ページ・詳細ページに分けて紹介します。自社サイトにはどのようなマークアップが必要なのかを考えながらご覧ください。

今回の調査では、Googleが提供しているリッチリザルトテストを活用しています。

転職サイト

転職サイトの例として、豊富な求人情報が掲載されているマイナビ転職の構造化マークアップを調査しました。マイナビ転職の各ページで実装されている構造化マークアップは以下の通りです。

ページ実装されている構造化マークアップ
トップページなし
一覧ページパンくずリスト
詳細ページパンくずリスト
求人情報
項目@type概要
パンくずリストBreadcrumbList検索結果画面に、ページの階層が日本語で表示される
ページ内では、そのページがサイトの階層のどこに位置するかが示される
求人情報JobPosting検索結果画面に、求人情報が表示されることがある(Google for jobs)

構造化マークアップの各項目の詳しい解説は、後ほど「よく使われる構造化マークアップ一覧と記述方法」の箇所で行います。

トップページ

リッチリザルトテスト

マイナビ転職のトップページに実装されている構造化マークアップはありませんでした。

一覧ページ

リッチリザルトテスト

求人一覧ページでは、「パンくずリスト」が構造化マークアップとして実装されています。

詳細ページ

リッチリザルトテスト

求人詳細ページでは、「パンくずリスト」と「求人情報」が構造化マークアップとして実装されています。基本的には、Googleで定義されている内容に基づいて設定されていますが、一部エラー表示も出ています。

例えば、求人情報の中で、jobLocationの箇所の「streetAddress」「addressLocality」「postalCode」と、「experienceRequirements」の項目にエラーが出ています。

リッチリザルトテスト

リッチリザルトテスト

streetAddress・addressLocality・postalCodeは、詳細な住所を明記する要素で、任意項目であるため記述していないと考えられます。また、勤務地が多岐にわたることがページ内で確認できます。そのため、住所情報を明記する項目に、一意の情報を入れられず空欄になっているとも推察できます。

・streetAddress:勤務地のそれ以降の住所
・addressLocality:勤務地の市区町村
・postalCode:勤務地の郵便番号

一方、experienceRequirementsでは、「列挙値が無効」と書かれているため、きちんと整理して記入するとよいと考えられます。

・experienceRequirements:必須の経験やスキル

不動産サイト

不動産サイトの例として、豊富な物件が掲載されているSUUMO(スーモ)の構造化マークアップを調査しました。スーモの各ページで実装されている構造化マークアップは以下の通りです。

ページ実装されている構造化マークアップ
トップページなし
一覧ページパンくずリスト
詳細ページパンくずリスト
項目@type概要
パンくずリストBreadcrumbList検索結果画面に、ページの階層が日本語で表示される
ページ内では、そのページがサイトの階層のどこに位置するかが示される

構造化マークアップの各項目の詳しい解説は、後ほど「よく使われる構造化マークアップ一覧と記述方法」の箇所で行います。

トップページ

リッチリザルトテスト

スーモのトップページに実装されている構造化マークアップはありませんでした。

一覧ページ

リッチリザルトテスト

物件一覧ページでは、「パンくずリスト」が構造化マークアップとして実装されています。

階層nameとid(名前とURL)
第1階層SUUMO[不動産/住宅]
第2階層賃貸
第3階層東京都

「トップページ→物件の種類→エリア」と、しっかり階層分けがされています。

詳細ページ

リッチリザルトテスト

物件詳細ページでも、「パンくずリスト」が構造化マークアップとして実装されています。

階層nameとid(名前とURL)
第1階層SUUMO[不動産/住宅]
第2階層賃貸
第3階層東京都
第4階層渋谷区
第5階層西新宿五丁目駅

物件一覧ページの階層に加え、物件のエリア(渋谷区)と最寄り駅(西新宿五丁目駅)の階層が用意されています。このように一覧で見ると、ユーザーにとってもクローラーにとっても非常にわかりやすく階層が分けられていることがわかります。

また、上記のように賃貸の物件詳細ページではパンくずリストの構造化マークアップしかありませんでしたが、同サイトの新築マンション(購入)の物件詳細ページでは「商品スニペット」や「販売者のリスティング」の構造化マークアップが実装されていました。

もしかしたら、賃貸の物件詳細ページにも、商品スニペットや販売者のリスティングの構造化マークアップを設定してもよいかもしれません。

ECサイト

ECサイトの例として、楽天市場の構造化マークアップを調査しました。ECサイトは、サポートされている構造化マークアップの種類が多いのが特徴です。楽天市場も各マークアップにしっかり対応しています。楽天市場の各ページで実装されている構造化マークアップは以下の通りです。

ページ実装されている構造化マークアップ
トップページなし
一覧ページ商品スニペット
販売者のリスティング
パンくずリスト
カルーセル
レビュースニペット
詳細ページ商品スニペット
レビュースニペット
項目@type概要
商品スニペットProduct検索結果画面に、評価・レビュー情報・価格・在庫状況などの商品情報が表示されることがある
販売者のリスティングProduct検索結果画面に、ナレッジパネルや人気商品の結果、商品スニペットなどが表示されることがある
パンくずリストBreadcrumbList検索結果画面に、ページの階層が日本語で表示される
ページ内では、そのページがサイトの階層のどこに位置するかが示される
カルーセルItemList検索結果画面に、リスト・カード形式でコンテンツが表示されることがある
レビュースニペットReview検索結果画面に、星や要約情報が表示されることがある

構造化マークアップの各項目の詳しい解説は、後ほど「よく使われる構造化マークアップ一覧と記述方法」の箇所で行います。

トップページ

リッチリザルトテスト

楽天市場のトップページに実装されている構造化マークアップはありませんでした。

一覧ページ

リッチリザルトテスト

商品一覧ページでは、「商品スニペット」「販売者のリスティング」「パンくずリスト」「カルーセル」「レビュースニペット」が構造化マークアップとして実装されています。

その結果、検索結果画面にも商品の画像や価格などの情報が、リッチリザルトとして表示されています。

Googleの検索結果画面に表示されるリッチリザルト
Googleの検索結果画面に表示されるリッチリザルト

また、基本的にGoogleで定義されている内容に基づいて構造化マークアップが設定されていますが、一部エラー表示も出ています。

例えば、商品スニペットと販売者のリスティングでは、以下のエラー表示が出ています。

リッチリザルトテスト

商品スニペットのoffersの箇所の「priceValidUntil」と「availability」は、任意項目のため記入していないと考えられます。

・priceValidUntil:価格が有効な日付
・availability:在庫状況

リッチリザルトテスト

販売者のリスティングのoffersの箇所の「hasMerchantReturnPolicy」「shippingDetails」「availability」は、任意項目のため記入していないと考えられます。

・hasMerchantReturnPolicy:返品に関するポリシー
・shippingDetails:配送ポリシーやオプション情報
・availability:在庫状況

description(ディスクリプション)も任意項目となっており記入されていませんが、一般的には記入したほうがよいでしょう。

詳細ページ

リッチリザルトテスト

商品詳細ページでは、「商品スニペット」と「レビュースニペット」が構造化マークアップとして実装されています。

メディアサイト

メディアサイトの例として、ファッションや生活雑貨などのさまざまなアイテムを紹介しているキナリノの構造化マークアップを調査しました。キナリノの各ページで実装されている構造化マークアップは以下の通りです。

ページ実装されている構造化マークアップ
トップページなし
一覧ページパンくずリスト
詳細ページ記事
パンくずリスト
項目@type概要
パンくずリストBreadcrumbList検索結果画面に、ページの階層が日本語で表示される
ページ内では、そのページがサイトの階層のどこに位置するかが示される
記事Article検索結果画面に、記事のタイトルテキストや画像、日付情報を適切に表示できるようになる

構造化マークアップの各項目の詳しい解説は、後ほど「よく使われる構造化マークアップ一覧と記述方法」の箇所で行います。

トップページ

リッチリザルトテスト

キナリノのトップページに実装されている構造化マークアップはありませんでした。

一覧ページ

リッチリザルトテスト

記事一覧ページでは、「パンくずリスト」が構造化マークアップとして実装されています。

詳細ページ

リッチリザルトテスト

記事ページでは、「記事」と「パンくずリスト」が構造化マークアップとして実装されています。

リッチリザルトテスト

基本的には、Googleで定義されている内容に基づいて構造化マークアップが設定されていますが、一部エラー表示も出ています。

例えば、authorのurlにエラーが表示されています。該当記事には、著者・執筆者が明記されていないため、構造化マークアップにも記入していないと考えられます。

一方で、著者や執筆者がいる場合は、きちんと明記したほうがよいでしょう。

よく使われる構造化マークアップ一覧と記述方法

よく使用される構造化マークアップを一覧で紹介します。それぞれのマークアップの検索結果画面(リッチリザルト)での表示例や記述方法も解説するので、参考にしてください。

パンくずリスト

パンくずリストは、そのページがサイトのどの階層に位置しているかを示します。パンくずリストがあることによって、サイト構造が整理され、ユーザーがサイト内を回遊・移動しやすくなります。

検索結果画面での表示例

パンくずリストの構造化マークアップを実装することによって、検索結果画面には以下のように表示されます。

Googleの検索結果画面に表示されるリッチリザルト

通常、パンくずリストはURLを区切った形で表示されますが、構造化マークアップを行うと、日本語で表記されるようになります。

記述例

パンくずリストの書き方は以下の通りです。@typeに「BreadcrumbList」を指定します。

<script type="application/ld+json">
{
  "@context": "https://schema.org",
  "@type": "BreadcrumbList",
  "itemListElement": [{
    "@type": "ListItem",
    "position": 1,
    "name": "1階層目の名前",
    "item": "1階層目のURL"
  },{
    "@type": "ListItem",
    "position": 2,
    "name": "2階層目の名前",
    "item": "2階層目のURL"
  },{
    "@type": "ListItem",
    "name": "3階層目の名前",
    "item": "3階層目のURL"
  }]
}
</script>

求人情報

構造化マークアップを行うことによって、求人情報がリッチリザルトで表示されることがあります。リッチリザルトとして表示されることによって、ユーザーの目に留まりやすくなります。クリックされる確率が高まり、流入数増加につながります。

検索結果画面での表示例

求人情報の構造化マークアップを実装することによって、検索結果画面には以下のように表示されます。

Googleの検索結果画面に表示されるリッチリザルト

記述例

求人情報の書き方は以下の通りです。@typeに「JobPosting」を指定します。

<script type="application/ld+json">
{
  "@context" : "https://schema.org/",
  "@type" : "JobPosting",
  "title" : "タイトル(求人名)",
  "description" : "<p>求人内容</p>",
  },
  "datePosted" : "求人情報の公開日(例:2024-01-01)",
  "validThrough" : "求人情報の掲載期限(例:2024-03-31)",
  "employmentType" : "雇用形態",
  "hiringOrganization" : {
    "@type" : "Organization",
    "name" : "企業名",
    "sameAs" : "企業のサイトURL",
    "logo" : "ロゴの画像URL"
  },
  "jobLocation": {
  "@type": "Place",
    "address": {
    "@type": "PostalAddress",
    "streetAddress": "勤務地のそれ以降の住所",
    "addressLocality": "勤務地の市区町村",
    "addressRegion": "勤務地の都道府県",
    "postalCode": "勤務地の郵便番号",
    "addressCountry": "勤務地の国名"
    }
  },
  "baseSalary": {
    "@type": "MonetaryAmount",
    "currency": "JPY",
    "value": {
      "@type": "QuantitativeValue",
      "value": 年収,
      "unitText": "YEAR"
    }
  }
}
</script>

商品スニペット

商品スニペットは、商品のレビューや販売者などを示します。ECサイトなどの商品ページに記述するとよいでしょう。

検索結果画面での表示例

商品スニペットの構造化マークアップを実装することによって、検索結果画面には以下のように表示されます。

Googleの検索結果画面に表示されるリッチリザルト

記述例

商品スニペットの書き方は以下の通りです。@typeに「Product」を指定します。

<script type="application/ld+json">
{
  "@context": "https://schema.org/",
  "@type": "Product",
  "name": "商品名",
  "description": "ディスクリプション",
  "review": {
    "@type": "Review",
    "reviewRating": {
      "@type": "Rating",
      "ratingValue": 平均評価(例:4),
      "bestRating": 最高評価(例:5)
    },
    "author": {
      "@type": "Person",
      "name": "販売者名"
    }
  },
  "aggregateRating": {
    "@type": "AggregateRating",
    "ratingValue": 評価の平均(例:4.4),
    "reviewCount": 評価の人数(例:89)
  }
}
</script>

販売者のリスティング

販売者のリスティングの構造化マークアップを実装すると、価格や在庫状況、配送と返品に関する情報など、商品のさらに詳しい情報をハイライトで表示できます。ECサイトなどの商品ページには、上記の商品スニペットに加え、販売者のリスティングも記述するとよいでしょう。

検索結果画面での表示例

販売者のリスティングの構造化マークアップを実装することによって、検索結果画面には以下のように表示されます。

Googleの検索結果画面に表示されるリッチリザルト

記述例

販売者のリスティングの書き方は以下の通りです。商品スニペットと同じく、@typeに「Product」を指定します。

<script type="application/ld+json">
{
  "@context": "https://schema.org/",
  "@type": "Product",
  "name": "商品名",
  "image": [
    "商品画像(1×1の画像URL)",
    "商品画像(4×3の画像URL)",
    "商品画像(16×9の画像URL)"
   ],
  "description": "ディスクリプション",
  "sku": "販売者固有の識別子(例:0446310786)",
  "mpn": "製品番号(例:925872)",
  "brand": {
    "@type": "Brand",
    "name": "ブランド"
  },
  "review": {
    "@type": "Review",
    "reviewRating": {
      "@type": "Rating",
      "ratingValue": 平均評価(例:4),
      "bestRating": 最高評価(例:5)
    },
    "author": {
      "@type": "Person",
      "name": "販売者名"
    }
  },
  "aggregateRating": {
    "@type": "AggregateRating",
    "ratingValue": 評価の平均(例:4.4),
    "reviewCount": 評価の人数(例:89)
  },
  "offers": {
    "@type": "Offer",
    "url": "商品ページのURL",
    "priceCurrency": "JPY",
    "price": 料金,
    "priceValidUntil": "価格が有効な日付(例:2024-11-20)",
    "itemCondition": "商品状態",
    "availability": "在庫状況"
  }
}
</script>

記事

記事ページに構造化マークアップを実装すると、検索結果にページのタイトルテキストや画像、公開日などを表示できるようになります。

特に、構造化データの中に記事更新日や著者情報を入れ込むことによって、SEOで一定の効果が生まれます。

記事更新日をマークアップすることで、検索結果画面に更新日が表示されやすくなります。Googleはもちろん、ユーザーにも「最新」「情報が更新されている」と伝わり、SEO評価やクリック率の向上につながります。(Googleも記事作成日と記事更新日の両方をマークアップすることを推奨している)

あわせて、著者情報を入れ込むことによって、執筆者や監修者が明確になり、E-E-A-T観点でも効果があります。

E-E-A-Tとは?
Googleがユーザーにとって有益で的確な情報を提供しているかどうかを評価する指標の1つ
Experience(経験)、Expertise(専門性)、Authoritativeness(権威性)、Trust(信頼性)のそれぞれの頭文字をとった総称

▼関連記事
E-E-A-Tとは?Googleが評価するコンテンツの基準や対策を解説

記述例

記事の書き方は以下の通りです。@typeに「Article」を指定します。

<script type="application/ld+json">
{
  "@context": "https://schema.org",
  "@type": "Article",
  "headline": "ページタイトル",
  "description": "ディスクリプション",
  "mainEntityOfPage": {
    "@type": "WebPage",
    "@id": "ページURL"
  },
  "image": [
    "OGP画像(横幅696px以上の1×1の画像URL)",
    "OGP画像(横幅696px以上の4×3の画像URL)",
    "OGP画像(横幅696px以上の16×9の画像URL)"
   ],
  "datePublished": "記事作成日(例:2024-01-05T08:00:00+08:00)",
  "dateModified": "記事更新日(例:2024-02-05T09:20:00+08:00)",
  "author": [{
    "@type": "Person",
    "name": "執筆者",
    "url": "執筆者のプロフィールページURL"
  }]
}
</script>

構造化マークアップの確認方法

構造化マークアップを正しく実装できているか、エラーが出ていないかなどを確認する際は、Googleの公式ツール「リッチリザルトテスト」を活用しましょう。

リッチリザルトテスト

検索窓にページのURLを打ち込んで検索すると、構造化マークアップによって生成されるリッチリザルトやマークアップの構造を確認できます。また、Googleの検索結果画面で、リッチリザルトがどのように表示されるかのプレビューもできます。

まとめ

今回は、SEO評価の高いサイトで使用されている構造化マークアップを紹介しました。

サイトトップページ一覧ページ詳細ページ
転職サイト
(マイナビ転職)
なしパンくずリストパンくずリスト
求人情報
不動産サイト
(スーモ)
なしパンくずリストパンくずリスト
ECサイト
(楽天市場)
なし商品スニペット
販売者のリスティング
パンくずリスト
カルーセル
レビュースニペット
商品スニペット
レビュースニペット
メディアサイト
(キナリノ)
なしパンくずリスト記事
パンくずリスト

構造化マークアップによって、正しいコンテンツの評価やリッチリザルトへの表示が期待できます。構造化マークアップを実装するだけで、検索順位が一気に向上するようなことはありませんが、一定のSEO効果は見込めます。

特に記事ページでは、更新日や著者情報をマークアップすることによって、情報の鮮度やE-E-A-T観点で効果が生まれます。

本記事を参考に、自社サイト・ページにあった構造化マークアップを実装するようにしてください。

ヒトノテでは、さまざまな観点でWebサイトへの流入や問い合わせが増えるようにご支援をさせていただいております。

  • SEO観点での自社サイトのベストプラクティス
  • SEOの基礎知識や原理原則
  • 効果的なSEO施策

などを知りたい場合は、ぜひこちらからお気軽にご相談ください。不明点や疑問点に対して、1つ1つ丁寧にご説明いたします。

ヒトノテ坪昌史

監修者:坪昌史

株式会社ヒトノテの代表取締役CEO。 エンジニアとしてキャリアスタートし、サイバーエージェントのSEO分析研究機関を経て、リクルートの横断マーケティング組織のマネージャー&全社SEO技術責任者を務める。その後、独立しSEOを中心としたクライアントの課題解決を行う。2017年、株式会社ヒトノテを創業し、様々な企業のウェブマーケティングの支援を行う。

元リクルートのSEO責任者へ無料相談

    送信することで、プライバシーポリシーに同意したものといたします。