【初心者向け!構造化マークアップ】ボキャブラリーについて知ろう!

こんにちは。デザイナーの佐竹です。
今回は、勉強もかねて「構造化マークアップ」のボキャブラリーについて簡単にまとめてみたいと思います。

まず、「構造化マークアップ」とは何かと言いますと、

「検索エンジンが意味をより正確に理解できるようになる為の、コンテンツのマークアップ方法」です。
簡単に言うとGoogleがコンテンツを理解しやすくなるための記述ということです。
ただし、現時点では検索順位に直接的な影響はないそうです。

ボキャブラリーとは

「Google」「Microsoft」「Yahoo!」 の検索エンジン三社が仕様策定に取り組んでいる「schema.org」という組織があります。
このschema.orgで定義されているのがボキャブラリーです。

schema.orgの仕様通りにHTMLにマークアップする事で、検索エンジンに正確な情報を収集してもらい、ユーザーに最適な検索結果を提供することが可能になります。

クローラーがページの内容を解析しやすくなり、その結果検索エンジンに「リッチスニペット」を表示することができるようになります。

リッチスニペットについては、また別途記述しますが、検索結果に画像や評価が表示されるようになるので、クリック率が高まると期待できます。

ボキャブラリーの記述方法

<section itemscope itemtype=”http://schema.org/Book”>
<h1>本のタイトル</h1>
<p>本の説明</p>
</section>

itemscope itemscopeという属性がsectionに付与されています。これはこのsectionに構造化データが付与されているということを意味します。

入れ子構造にする方法

<section itemscope itemtype=”http://schema.org/Book”>
<h1>本のタイトル</h1>
<p>本の説明</p>

<div itemprop=”author” itemscope itemtype=”http://schema.org/Person”>
<p itemprop=”name”>著者名</p>
</div>
</section>

itempropは情報の項目を指定するプロパティです。
今回は本の情報の中に「著者」の情報を入れ子表示しました。

記述方法はシンプルですね。
今後も勉強を兼ねて、構造化マークアップについて書いていこうと思います!