自分のサイトを構造化データに対応させたいけれど、その方法が分からないというあなたへ。この記事では、構造化データのマークアップを埋め込む方法を紹介しています。これを見れば、コピペで解決できます。

目次

構造化データとは

構造化データとは、HTMLページのコンテンツに関する情報を提供するものです。構造化データを記述することによって、Googleの検索エンジンがコンテンツをより正確に認識できるようになります。

ウェブページに「03-1234-5678」という文字列があれば、Googleはこれを電話番号ではないかと推測できます。しかし、これはあくまでも推測に過ぎません。構造化データを使えば、サイト運営者の連絡先電話番号だと明確にすることができます。

HTMLに構造化データを記述するには、schema.org の仕様に従ってマークアップを記述します。

構造化データの種類

構造化データには、次の3種類あります。

この3種類のうち、GoogleはJSON-LDを使用することを推奨しています。

構造化データマークアップ

構造化データはマークアップで表現します。

<script type="application/ld+json">
{
  "property1" : "data",
  "property2" : "data"
}
</script>

具体的には、次のようなアイテムを構造化データでマークアップできます。

構造化データによって、ウェブサイトのロゴを指定できる。

Googleは次のような画像をロゴに使用することを推奨している。

ブランドイメージなどのロゴを構造化データで表すには、次のマークアップを記述する。

<script type="application/ld+json">
{
  "@context": "https://schema.org",
  "@type": "Organization",
  "url": "http://itref.fc2web.com",
  "logo": "http://itref.fc2web.com/images/logo.png"
}
</script>

ロゴの構造化データマークアップには、次のプロパティを指定します。

logo
ロゴ画像のURL
url
ロゴに関連付けられたウェブサイトのURL

記事(Article)

記事を構造化データで表すには、次のマークアップを記述する。

<script type="application/ld+json">
{
  "@context": "https://schema.org",
  "@type": "NewsArticle"
  "author": {
    "@type": "Person",
    "name": "tsuka"
  }
}
</script>

記事(Article)の構造化データマークアップには、次のプロパティを指定する。

@type
記事の種類
@type 説明
Article ニュース記事や調査レポートなどの記事
BlogPosting ブログの投稿
NewsArticle ニュースを報告する記事またはニュースを理解するための背景情報や関連資料を提供する記事
author
著者

個人(Person)と組織(Organization)の2種類ある。

"author": {
  "@type": "Organization",
  "name": "tsuka"
}

パンくずリストを構造化データで表すには、次のマークアップを記述する。

<script type="application/ld+json">
{
  "@context": "https://schema.org",
  "@type": "BreadcrumbList",
  "itemListElement": [{
    "@type": "ListItem",
    "position": 1,
    "name": "SE学院",
    "item": "http://itref.fc2web.com/"
  },{
    "@type": "ListItem",
    "position": 2,
    "name": "言語",
    "item": "http://itref.fc2web.com/lang/"
  },{
    "@type": "ListItem",
    "position": 3,
    "name": "HTML",
    "item": "http://itref.fc2web.com/html/"
  },{
    "@type": "ListItem",
    "position": 4,
    "name": "構造化データ",
    "item": "http://itref.fc2web.com/html/structured-data.html"
  }]
}
</script>

パンくずリストの構造化データマークアップには、次のプロパティを指定します。

@type
パンくずリスト(BreadcrumbList)
itemListElement
パンくずリスト項目のリスト

構造化データテストツールの使い方

Googleでは、構造化データをテストするためのツールを提供しています。

構造化データ テストツール

構造化データテストツールには、2つの使い方があります。

URLのテスト

URLのテストは、URLを指定して、該当ページの構造化データをツールでテストします。

構造化データテストツールの使い方

文字列のテスト

文字列のテストは、構造化データのテキストをツールに入力またはコピペしてテストします。

構造化データテストツールの使い方

構造化データテストツールの使い方

関連記事

SEO [PR] 爆速!無料ブログ 無料ホームページ開設 無料ライブ放送