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

構造化データは、Webページの情報を機械可読な形式で記述することにより、検索エンジンや他のアプリケーションがその情報を理解しやすくする技術です。これにより、検索結果の表示を改善したり、自社のWebサイトをより多くのユーザーに紹介したりすることができます。

構造化データの実装方法

構造化データは、主に3つの方法で実装することができます。

Microdata
HTMLタグの属性を使って、構造化データを直接マークアップする方法です。例えば、商品の価格やレビューなどをマークアップすることができます。
RDFa
HTMLタグに属性を追加することで、構造化データを定義する方法です。Microdataと同様に、商品の価格やレビューなどをマークアップすることができます。
JSON-LD
JSON形式でデータを定義し、HTMLページに埋め込む方法です。JSON-LDを使うことで、複雑なデータ構造を簡単に表現することができます。

これらの方法は、それぞれ構造化データを実装するための方法ですが、どの方法を使っても同様の効果が得られます。構造化データを実装することで、Webページの情報をより正確に認識しやすくすることができ、検索エンジンによるリッチリザルトの表示などの恩恵を受けることができます。

Microdata 形式の構造化データの書き方

BreadcrumbList:パンくずリスト

サイトのナビゲーションを表現するための型で、パンくずリストを表現します。パンくずリストは、サイト内のページの階層構造を示すもので、ユーザーが現在のページの位置を把握しやすくするために利用されます。BreadcrumbList型では、itemListElementプロパティを使用して、パンくずリストの各要素を表現します。

<div itemscope itemtype="http://schema.org/BreadcrumbList">
  <span itemprop="itemListElement" itemscope itemtype="http://schema.org/ListItem">
    <a href="/" itemprop="item">
      <span itemprop="name">ホーム</span>
    </a>
    <meta itemprop="position" content="1" />
  </span>
  <span itemprop="itemListElement" itemscope itemtype="http://schema.org/ListItem">
    <a href="/category/" itemprop="item">
      <span itemprop="name">カテゴリー</span>
    </a>
    <meta itemprop="position" content="2" />
  </span>
  <span itemprop="itemListElement" itemscope itemtype="http://schema.org/ListItem">
    <a href="/category/subcategory/" itemprop="item">
      <span itemprop="name">サブカテゴリー</span>
    </a>
    <meta itemprop="position" content="3" />
  </span>
  <span itemprop="itemListElement" itemscope itemtype="http://schema.org/ListItem">
    <a href="/category/subcategory/article/" itemprop="item">
      <span itemprop="name">記事タイトル</span>
    </a>
    <meta itemprop="position" content="4" />
  </span>
</div>

Article:記事

ウェブ記事を表現するための型で、headline、datePublished、dateModified、author、image、publisherなどのプロパティが含まれます。これらのプロパティを使用することで、検索エンジンは記事のタイトル、公開日、更新日、著者、画像、出版社などの情報を取得し、リッチリザルトとして表示することができます。

<article itemscope itemtype="http://schema.org/Article">
  <header>
    <h1 itemprop="headline">記事タイトル</h1>
    <p>
      <time itemprop="datePublished" datetime="2023-03-08">2023年3月8日</time>
      <meta itemprop="dateModified" content="2023-03-08T10:00:00+09:00" />
    </p>
    <p>
      <span itemprop="author" itemscope itemtype="http://schema.org/Person">
        <span itemprop="name">筆者名</span>
      </span>
    </p>
    <p>
      <img itemprop="image" src="https://example.com/image.jpg" alt="画像の説明" />
    </p>
    <p>
      <span itemprop="publisher" itemscope itemtype="http://schema.org/Organization">
        <span itemprop="name">出版社名</span>
        <span itemprop="logo" itemscope itemtype="http://schema.org/ImageObject">
          <img itemprop="url" src="https://example.com/logo.jpg" alt="ロゴの説明" />
        </span>
      </span>
    </p>
  </header>
  <div itemprop="articleBody">
    <p>記事の本文</p>
  </div>
</article>

Review:レビュー

商品やサービスのレビューを表現するための型で、name、reviewBody、reviewRatingなどのプロパティが含まれます。これらのプロパティを使用することで、検索エンジンは商品やサービスの評価やレビューの内容を取得し、リッチリザルトとして表示することができます。

<div itemscope itemtype="http://schema.org/Review">
  <p>
    <span itemprop="name">商品名</span>
    のレビュー:
  </p>
  <div itemprop="reviewBody">
    <p>レビューの内容</p>
  </div>
  <div itemprop="reviewRating" itemscope itemtype="http://schema.org/Rating">
    <span itemprop="ratingValue">4.5</span> / 5
  </div>
</div>

Product:商品

商品の情報を表現するための型で、name、image、description、brand、offersなどのプロパティが含まれます。これらのプロパティを使用することで、検索エンジンは商品の名称、画像、説明、ブランド、価格などの情報を取得し、リッチリザルトとして表示することができます。

<div itemscope itemtype="http://schema.org/Product">
  <h1 itemprop="name">商品名</h1>
  <div itemprop="description">
    <p>商品の説明</p>
  </div>
  <div itemprop="aggregateRating" itemscope itemtype="http://schema.org/AggregateRating">
    <span itemprop="ratingValue">4.5</span> / 5 -
    <span itemprop="reviewCount">12</span>件のレビュー
  </div>
  <div itemprop="offers" itemscope itemtype="http://schema.org/Offer">
    <span itemprop="price">1000</span>円
    <link itemprop="availability" href="http://schema.org/InStock" />
  </div>
  <div itemprop="brand" itemscope itemtype="http://schema.org/Brand">
    <span itemprop="name">ブランド名</span>
  </div>
  <div itemprop="image" itemscope itemtype="http://schema.org/ImageObject">
    <img src="https://example.com/image.jpg" alt="画像の説明" itemprop="url" />
    <meta itemprop="width" content="400" />
    <meta itemprop="height" content="400" />
  </div>
</div>

Event:イベント

イベントの情報を表現するための型で、name、startDate、endDate、location、offersなどのプロパティが含まれます。これらのプロパティを使用することで、検索エンジンはイベントの名称、開始日時、終了日時、場所、価格などの情報を取得し、リッチリザルトとして表示することができます。

<div itemscope itemtype="http://schema.org/Event">
  <h1 itemprop="name">イベント名</h1>
  <p>
    開催日時:
    <time itemprop="startDate" datetime="2023-03-10T18:00:00+09:00">2023年3月10日 18:00</time> -
    <time itemprop="endDate" datetime="2023-03-10T20:00:00+09:00">2023年3月10日 20:00</time>
  </p>
  <p>
    開催場所:
    <span itemprop="location" itemscope itemtype="http://schema.org/Place">
      <span itemprop="name">会場名</span>
      <span itemprop="address" itemscope itemtype="http://schema.org/PostalAddress">
        <span itemprop="postalCode">100-0000</span>
        <span itemprop="addressRegion">東京都</span>
        <span itemprop="addressLocality">千代田区</span>
        <span itemprop="streetAddress">1-1-1</span>
      </span>
    </span>
  </p>
  <div itemprop="offers" itemscope itemtype="http://schema.org/Offer">
    <span itemprop="price">1000</span>円
    <link itemprop="availability" href="http://schema.org/InStock" />
  </div>
</div>

FAQPage:FAQページ

FAQページを表現するための型で、質問と回答を表現するQuestion型を含みます。Question型には、nameプロパティとacceptedAnswerプロパティが含まれ、質問と回答の内容を表現します。FAQPage型では、mainEntityプロパティを使用して、FAQページの質問と回答のリストを表現します。

<div itemscope itemtype="https://schema.org/FAQPage">
  <h1 itemprop="name">よくある質問</h1>
  <div itemscope itemprop="mainEntity" itemtype="https://schema.org/Question">
    <h2 itemprop="name">Q1. 質問のタイトル</h2>
    <div itemprop="acceptedAnswer" itemscope itemtype="https://schema.org/Answer">
      <p itemprop="text">回答の本文</p>
    </div>
  </div>
  <div itemscope itemprop="mainEntity" itemtype="https://schema.org/Question">
    <h2 itemprop="name">Q2. 質問のタイトル</h2>
    <div itemprop="acceptedAnswer" itemscope itemtype="https://schema.org/Answer">
      <p itemprop="text">回答の本文</p>
    </div>
  </div>
  <div itemscope itemprop="mainEntity" itemtype="https://schema.org/Question">
    <h2 itemprop="name">Q3. 質問のタイトル</h2>
    <div itemprop="acceptedAnswer" itemscope itemtype="https://schema.org/Answer">
      <p itemprop="text">回答の本文</p>
    </div>
  </div>
</div>

参考
Mozilla Developer Network: https://developer.mozilla.org/ja/docs/Web/HTML/microdata
Schema.org : https://schema.org/docs/gs.html#microdata

ブログ一覧へ