🌟

構造化マークアップとは？書き方まとめ

2022/03/21に公開

SEO

構造化マークアップ

tech

構造化マークアップとは

Webページにどんな内容が書かれているのか「構造化データ」を書き込み、GoogleにWebページの意図を伝える明示的に伝えるための施策のこと。
Googleも推奨しているSEO対策です。

Google 検索では、ページのコンテンツを理解するための取り組みを日々続けています。ページの意図を伝える明示的な手がかりとして構造化データを提供してもらうと、Google はそのページをより正確に理解できるようになります。構造化データとは、ページに関する情報を提供し、そのコンテンツ（たとえば、レシピページの場合は材料、加熱時間と加熱温度、カロリーなど）を分類するために標準化されたデータ形式です。

例えばレシピページに構造化データを含めると、検索結果が画像付きで表示されます。

構造化マークアップの書き方

構造化マークアップの方法は2通りあり、どちらの方法もボキャブラリーとシンタックスが必要になります。

HTML形式で構造化データを書く
JavaScript形式で構造化データを書く

ボキャブラリーとは

ボキャブラリーとは、構造化データとして認識させるための言葉の定義のようなもの。
例えば、会社名「株式会社hogehoge」に対して「name」と定義するような感じです。

代表的なボキャブラリーにschema.orgがあり、「どの単語」に「どのような意味」を持たせるかといった定義をすることができます。
使い方については後述します。

シンタックスとは

シンタックスとは、構造化データ（ボキャブラリー）を記述する記述方法のこと。
代表的なシンタックスは3つあり、それぞれの特徴は以下の通りです。

形式	内容
JSON-LD（Google推奨）	ページの見出しまたは本文の `<script>` タグ内に埋め込まれる JavaScript 表記。
microdata	HTML コンテンツ内に構造化データをネストするために使用される、
RDFa	検索エンジンに伝えたいユーザー表示コンテンツに対応する HTML タグ属性を追加することによってリンクデータをサポートする HTML5 の拡張機能。

よく見かけるのは、JSON-LDかmicrodataです。
HTMLの標準仕様を設計しているLiving Standardはmicrodataを推奨しているようなので、とりあえずmicrodataは知っておいて役に立つと思います。

それでは実際に構造化マークアップを記述していきます。

RDFa

構造化マークアップの手順

vocabとtypeofで構造化マークアップの規格を定義し、propertyでプロパティを指定していきます。

属性	内容
vocab	`http://schema.org`を指定
typeof	利用するschema.orgのタイプを指定
property	指定したタイプのプロパティを選択

会社情報をマークアップ

以下のような会社情報があったとして、これをRDFaで構造化マークアップしてみます。

株式会社hogehoge
〒000-0000 東京都新宿区hogehoge
Tel:000-0000-000
Fax:000-0000-000
E-mail:email@example.com

<div vocab="https://schema.org/" typeof="Organization">
  <span property="name">株式会社hogehoge</span>
  <div property="address" typeof="PostalAddress">
    <span property=”postalCode”>000-0000</span>
    <span property=”addressRegion”>東京都</span>
    <span property=”addressLocality”>新宿区</span>
    <span property=”streetAddress”>hogehoge</span></span>
  </div>
  Tel: <span property="telephone">000-0000-000</span>,
  Fax: <span property="faxNumber">000-0000-000</span>,
  E-mail: <span property="email">email@example.com</span>
</div>

パンくずリストをマークアップ

次に以下のようなパンくずリストをRDFaで構造化マークアップしてみます。
Home > News > Category

<ol vocab="https://schema.org/" typeof="BreadcrumbList">
  <li property="itemListElement" typeof="ListItem">
    <a property="item" typeof="WebPage" href="https://example.com/books">
      <span property="name">Home</span></a>
    <meta property="position" content="1">
  </li>
  >
  <li property="itemListElement" typeof="ListItem">
    <a property="item" typeof="WebPage" href="https://example.com/books/sciencefiction">
      <span property="name">New</span></a>
    <meta property="position" content="2">
  </li>
  >
  <li property="itemListElement" typeof="ListItem">
    <span property="name">Category</span>
    <meta property="position" content="3">
  </li>
</ol>

microdataの場合

構造化マークアップの手順

1.構造化したい要素を、itemscope属性要素で囲む
2.itemtype属性でタイプを指定する
3.各要素にitemprop属性を追加し、プロパティを作る

microdataはitemscope属性、itemtype属性、itemprop属性があります。

会社情報をマークアップ

<div itemscope itemtype="https://schema.org/Organization">
  <span itemprop="name">株式会社hogehoge</span>
  <div itemprop="address" itemscope itemtype="https://schema.org/PostalAddress">
    <span itemprop="postalCode">000-0000</span>
    <span itemprop="addressRegion">東京都</span>
    <span itemprop="addressLocality">新宿区</span>
    <span itemprop="streetAddress">hogehoge</span></span>
  </div>
  Tel: <span itemprop="telephone">000-0000-000</span>,
  Fax: <span itemprop="faxNumber">000-0000-000</span>,
  E-mail: <span itemprop="email">email@example.com</span>
</div>

パンくずリストをマークアップ

<ol itemscope itemtype="https://schema.org/BreadcrumbList">
  <li itemprop="itemListElement" itemscope itemtype="https://schema.org/ListItem">
    <a itemprop="item" href="https://example.com/books">
      <span itemprop="name">Home</span></a>
      <meta itemprop="position" content="1" />
  </li>
  >
  <li itemprop="itemListElement" itemscope itemtype="https://schema.org/ListItem">
    <a itemscope itemtype="https://schema.org/WebPage"
    itemprop="item" itemid="https://example.com/books/sciencefiction"
    href="https://example.com/books/sciencefiction">
      <span itemprop="name">New</span></a>
      <meta itemprop="position" content="2" />
  </li>
  >
  <li itemprop="itemListElement" itemscope itemtype="https://schema.org/ListItem">
    <span itemprop="name">Category</span>
    <meta itemprop="position" content="3" />
  </li>
</ol>

JSON-LDの場合

構造化マークアップの手順

JSON-LDは<script>タグ内に記述します。
記述方法はJSON形式で、キー名 : 値の関係という感じで書いていきます。
JSON-LDはheadやbodyの中など、任意の場所に置けますがhead内に書くことが一般的です。

キー名 : 値という感じで書いていきます。

Key	Head
@context	`http://schema.org`を指定
@type	利用するschema.orgのタイプを指定
プロパティ	指定したタイプのプロパティを選択

会社情報をマークアップ

<script type="application/ld+json">
{
  "@context": "https://schema.org",
  "@type": "Organization",
  "address": {
    "@type": "PostalAddress",
    "postalCode": "000-0000",
    "addressRegion": "東京都",
    "addressLocality": "新宿区",
    "streetAddress": "hogehoge",
  },
  "email": "email@example.com",
  "faxNumber": "000-0000-000,
  "name": "株式会社hogehoge",
  "telephone": "000-0000-000"
}
</script>

パンくずリストをマークアップ

<script type="application/ld+json">
  {
    "@context": "https://schema.org",
    "@type": "BreadcrumbList",
    "itemListElement": [{
      "@type": "ListItem",
      "position": 1,
      "name": "Home",
      "item": "https://example.com/books"
    },{
      "@type": "ListItem",
      "position": 2,
      "name": "News",
      "item": "https://example.com/books/sciencefiction"
    },{
      "@type": "ListItem",
      "position": 3,
      "name": "Category"
    }]
  }
</script>

検証ツールを使う

実際に案件などで使う場合は、構造化マークアップのテストツールで検証してみるのがおすすめです。
エラーが出ていないか、正しく書けているかを確認することができます。

参考文献

構造化データの仕組みについて
 schema.org

構造化マークアップとは

構造化マークアップの書き方

ボキャブラリーとは

シンタックスとは

RDFa

構造化マークアップの手順

会社情報をマークアップ

パンくずリストをマークアップ

microdataの場合

構造化マークアップの手順

会社情報をマークアップ

パンくずリストをマークアップ

JSON-LDの場合

構造化マークアップの手順

会社情報をマークアップ

パンくずリストをマークアップ

検証ツールを使う

参考文献

Discussion