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

構造化マークアップとは、テキスト情報をマークアップしてクローラーが理解できるようにタグ付けしたものを指します。
構造化マークアップをきちんと実装すると、副次的効果として検索結果の表示が変化することがあります。
商品のレビューやパンくずリストを検索結果に表示することができ、ページの内容が検索ユーザーに伝わりやすくなるため、クリック率が上がります。
こういった、検索結果で表示される情報（スニペット）の情報を豊か（リッチ）にすることをリッチスニペットといいます。
Googleではmicrodataを推奨しているので今回はmicrodataを使用したいと思います。

HTMLで直接マークアップする方法

通常のHTML

<a href="#">
  <img src="/images/logo.png" alt="">
</a>

マークアップを実装したHTML

<div itemscope itemtype="http://schema.org/Organization">
  <a itemprop="url" href="#">
    <img itemprop="logo" src="/images/logo.png">
  </a>
</div>

構造化マークアップ例

ヘッダー

<header itemscope="itemscope" itemtype="http://schema.org/WPHeader"></header>

サイドバー

<aside role="complementary" itemscope="itemscope" itemtype="http://schema.org/WPSideBar"></aside>

フッター

<footer role="contentinfo" itemscope="itemscope" itemtype="http://schema.org/WPFooter">

ナビゲーション

<ul>
  <li itemprop="url"><a href="#" itemprop="name" title="Page">Page</a></li>
  <li itemprop="url"><a href="#" itemprop="name" title="Page">Page</a></li>
  <li itemprop="url"><a href="#" itemprop="name" title="Page">Page</a></li>
  <li itemprop="url"><a href="#" itemprop="name" title="Page">Page</a></li>
  <li itemprop="url"><a href="#" itemprop="name" title="Page">Page</a></li>
</ul>

パンくず

<ol itemscope itemtype="http://schema.org/BreadcrumbList">
  <li itemprop="itemListElement" itemscope itemtype="http://schema.org/ListItem"><a href="#" title="Home" itemprop="item"><span itemprop="name">Home</span></a><meta itemprop="position" content="1"></li>
  <li itemprop="itemListElement" itemscope itemtype="http://schema.org/ListItem"><a href="#" title="親階層" itemprop="item"><span itemprop="name">親階層</span></a><meta itemprop="position" content="2"></li>
  <li itemprop="itemListElement" itemscope itemtype="http://schema.org/ListItem"><span itemprop="name">現在地</span><meta itemprop="position" content="3"></li>
</ol>

企業・店情報

<div itemscope="itemscope" itemtype="https://schema.org/LocalBusiness">
  <p itemprop="name">XXX会社名XXX</p>
  <p itemprop="address">〒XXX-XXX 住所</p>
  <p>TEL:<span itemprop="telephone">000-000-0000</span></p>
  <p>営業時間：<time itemprop="openinghours" datetime="Mo, Tu, We, Th, Fr, Sa XX:XX-XX:XX">平日XX:XX～XX:XX</time></p>
</div>