構造化マークアップとは?コピペでOK 書き方まとめ

コーディングの質を高める 構造化マークアップ

  • 構造化マークアップって何?
  • 構造化マークアップの書き方が知りたい
  • 構造化マークアップでSEO対策したい

以上の悩みを解決できる記事を用意しました。

構造化マークアップとは

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

Googleも推奨しているSEO対策です。

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

Googleドキュメント

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

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

構造化マークアップの方法は2通り

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

どちらの方法もボキャブラリーシンタックスが必要になります。

ボキャブラリーとは


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

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

シンタックスとは

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

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

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

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

RDFaでマークアップ

RDFaで書いていきます。
構造化したい箇所を<span>タグなどで囲い、要素に応じたプロパティを定義していきます。

会社情報をマークアップ

会社情報
株式会社from Failer
612-0000 京都府京都市新伏見区淀水垂町509-16
Tel: 000-0000-000
Fax: 000-0000-000
E-mail: email@example.com

例えば上のような会社情報があったとして、これを構造化マークアップしたのが以下のコードになります。

<div vocab="https://schema.org/" typeof="Organization">
  <span property="name">株式会社from Failer</span>
  <div property="address" typeof="PostalAddress">
    <span property=”postalCode”>160-0022</span>
    <span property=”addressRegion”>東京都</span>
    <span property=”addressLocality”>新宿区</span>
    <span property=”streetAddress”>新宿 JR新宿ミライナタワー</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>

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

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

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

タイプはschema.org 日本語訳を参照して、プロパティはschema.orgを参照してみてください。
プロパティは、schema.orgページ右上の検索ボックスに「Organization」のようにタイプ名を入れて検索すれば確認できます。

Schema.orgでプロパティ名を検索

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

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でマークアップ

会社情報をマークアップ

会社情報
株式会社from Failer
612-0000 京都府京都市新伏見区淀水垂町509-16
Tel: 000-0000-000
Fax: 000-0000-000
E-mail: email@example.com

こちらの会社情報をmicrodataでマークアップしていきます。

<div itemscope itemtype="https://schema.org/Organization">
  <span itemprop="name">株式会社from Failer</span>
  <div itemprop="address" itemscope itemtype="https://schema.org/PostalAddress">
    <span itemprop="postalCode">160-0022</span>
    <span itemprop="addressRegion">東京都</span>
    <span itemprop="addressLocality">新宿区</span>
    <span itemprop="streetAddress">新宿 JR新宿ミライナタワー</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>

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

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

microdataはitemscope 属性、itemtype属性、 itemprop属性があります。
itemscopeの中にitemscopeを入れたりもするので、ちょっと複雑に見えますね。

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

Home > News > Category

これを構造化マークアップしたのが以下のコードになります。

<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でマークアップ

Googleが推奨しているJSON-LDで書いていきます。
<script> ~ </script> 構造化したいWebページのhead内に埋め込めばOKです。

会社情報をマークアップ

会社情報
株式会社from Failer
612-0000 京都府京都市新伏見区淀水垂町509-16
Tel: 000-0000-000
Fax: 000-0000-000
E-mail: email@example.com

先ほど使用した会社情報を、JSON-LDで構造化マークアップしていきます。

<script type="application/ld+json">
{
  "@context": "https://schema.org",
  "@type": "Organization",
  "address": {
    "@type": "PostalAddress",
    "postalCode": "160-0022",
    "addressRegion": "東京都",
    "addressLocality": "新宿区",
    "streetAddress": "新宿 JR新宿ミライナタワー",
  },
  "email": "email@example.com",
  "faxNumber": "000-0000-000,
  "name": "株式会社from Failer",
  "telephone": "000-0000-000"
}
</script>

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

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

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

KeyValue
@contexthttp://schema.orgを指定
@type利用するschema.orgのタイプを指定
nameなどのプロパティ指定したタイプのプロパティを選択

こちらも先程と同様に、タイプはschema.org 日本語訳を参照、プロパティはschema.orgを参照してみてください。

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

Home > News > Category

先ほど使用したパンくずリストを、JSON-LDで構造化マークアップしていきます。

<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>

検証ツールを使う

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

リッチリザルトテスト

おわりに

構造化マークアップの書き方についてでした。
HTML形式とJavaScript形式の2パターンを紹介しましたが、Google推奨のJSON-LDの記述を覚えた方が汎用性も高くていいんじゃないでしょうか。

コーダーとしては知っておきたい知識ですし、ぜひ参考にしてみてください!