セマンティックとSEO

SEOなどでも話題になるWEBサイトのセマンティックというものがあります。

セマンティックとは、簡単に説明すると、どの部分がHTMLの中でデータ(本文)とメタデータ(本文に付随する情報)を示しているかはっきりさせるということです。

どこからどこまでが人間が読む本文で、タイトルや要約、更新日時などコンピュータが読み取る部分がどれか、ということです。

HTMLをデータファイルとして見る上で、どこを見ればどんな情報を読めるかということが明確化されていることがセマンティックであるとされています。

さらにHTML5によって、本文中のどの部分がどんな情報をもっているかを細分化してセマンティックにすることができるようになりました。

WEBサイトのどの部分が記事(article)であるか、ナビゲーション部分(nav)、ヘッダ・フッタ(header,footer)であるかなどを直接HTMLとして書き込みことができるようになりました。

HTML5の登場までは本文(body)中の要素はdiv(部分)という記述で区切られていました。

HTML5までは

タイトル、ヘッダー、本文(部分、部分、部分…)

HTML5以降は

タイトル、ヘッダー、本文(ヘッダ、ナビゲーション、記事、フッタ)

と本文内の要素についてもわかりやすく記述できるようになりました。

どのような記述であっても読者としてはデザインの差はあれ、同じように記事を読むことができます。

人間としては美しいHTML記述であるかどうかは大きな意味を持ちませんが、検索エンジンやブラウザにとっては大きな意味を持つものです。

検索エンジンやブラウザがユーザーに対してわかりやすい誘導や、リッチな体験を目指す時にこのセマンティックな情報は大きく活用できます。

ブラウザが利用する例としてあげると、iPhoneのSafariが持っているリーディングモードは、WEBサイトから記事の部分を抜き出して電子書籍のように読みやすくユーザーに提供するものです。

Googleもサイトから情報をうまく抜き取り、ユーザーにわかりやすく検索結果画面から誘導するリッチスニペットを強化しています。

数年前のGoogleの検索結果画面からは考えられないほど多くの情報が現在の検索結果画面から得ることができます。

Googleがセマンティックによりユーザー利便性が強化されていると判定したサイトはSEOとして強くなります。

現在のGoogleのSEOといえば、いかにユーザー利便性が強いサイトかが判定基準になっており、セマンティック以外にもモバイル最適化が行われているか、スニペットに用いられるメタデータを用意できているかなどが大きな判定要素です。

セマンティックなどユーザー利便性が高くなるように追求することで、Google検索結果では上位に来る仕組みになっています。

それは小手先の技術ではなく記事内の記述などについても読者を中心に考えていれば自然と行われるべきものです。