schema.orgで構造化マークアップを導入してクリック率を上げたい-HTML編

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

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

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

通常のHTML

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

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

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

構造化マークアップ例

ヘッダー

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

サイドバー

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

フッター

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

ナビゲーション

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

パンくず

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

企業・店情報

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

read next