セマンティックWEBなホームページ制作

「セマンティックWEB」、言葉はどっかで読んだような聞いたような気が・・・
という程度しか分からなかったので、最近、会社でも話題となったので、もう少し掘り下げて調べてみることにしました。

まず、「セマンティックWEB」という単語を検索してみました。
wikipediaも上位に引っかかったのですが、ちょっと分かりにくかったので、
IT用語辞典を参考にしました。IT用語辞典によると、

”Webページおよびその中に記述された内容について、それが何を意味するかを表す情報(メタデータ)を一定の規則に従って付加することで、
コンピュータが効率よく情報を収集・解釈できるようにする構想。
インターネットを単なるデータの集合から知識のデータベースに進化させようという試みがセマンティックWebである。”

幅広い意味の捉え方がありますが、ホームページ制作に関してのとらえ方としては、、
構造化マークアップをし、検索エンジンが分かりやすいようにしましょうという事ですね。

構造化というとリッチスニペットを思い出す方も多いのではないかと思いますが、
ひとまずリッチススニペットはおいとき、ホームページ作成時のマークアップってなんぞや?という事を考えていきたいと思います。

HTMLはマークアップ言語なので、普段コーディングで基本的なマークアップはできているはずです。
たとえば一般的な下記のようなタグの例をあげます。

<h1>~<h6>
H は Heading(見出し)の意味です。文章の見出しを記述します。
見出しのレベルは h1~h6 まであり、h1 が一番大きな見出し、h6 が一番小さな見出しになります

<p>
p は Paragraph(段落)の略です。<p>~</p> でひとつの段落を示します。

コーディングをしたことがある人なら、間違いなく使用したことがあるはずですね。
タグには、ちゃんと意味があり、決まりに従って書いていけば基本的なマークアップは問題ないはずです。

たまに見かるNG例として、行間を大きくとるために<br>を連続して使用。
<br>は改行であり、余白を調整するのであればmarginやpadding <p>などで調整するのが本来のやり方です。

では、何故いまになって基本的なマークアップ、構造化の話題が出てきたのでしょうか?
個人的には以下の2つの理由が考えられるのではないかと思いました。
1、HTML5の出現

HTML5では構造化タグと呼ばれる新しい要素(タグ)が追加され、構造化が明確にできるようになりました。
これにより検索エンジンに対して明確に文章構造を伝えることができます。
構造化タグはあくまでも文章構造をとして使用するすもので、レイアウトは従来どうりの<div>で行います。
※下記のような構造化タグが追加されました

<article> …… 記事であることを示す
<aside> ……… 余談であることを示す
<audio> ……… 音声を再生する
<canvas> …… 図形を描く
<embed> …… プラグインデータを埋め込む
<figcaption> …… 図表のキャプションを示す
<figure> ……… 図表であることを示す
<footer> …… フッタであることを示す
<header> ……ヘッダであることを示す
<hgroup> …… セクションの見出しを表す、見出しをまとめる
<keygen> …… フォーム送信時にキーを発行する
<mark> ……… 文書内の該当テキストを目立たせる
<menu> ……… 操作メニューを作成する
<meter> …… 規定範囲内の測定値を表す
<nav> ………… ナビゲーションであることを示す
<output> …… 計算結果を示す
<progress> … タスク完了までの進行状況を示す
<section> …… 一つのセクションであることを示す
<source> …… 動画や音声などのURLや種類を指定する
<summary> …… <details>の内容の要約を示す
<time> ……… 日付や時刻を正確に示す
<video> …… 動画を再生する

スマホサイトは古いブラウザを意識しなくてよいのでHTML5で作成するのが一般的ですが、
PCサイトでは、まだまだ古いブラウザを考慮しながら作成するが多いです。
「クロスブラウザ」「プログレッシブ・エンハンスメント」どちらがいいの?という話にもなりますが、それは、また今度。
2、googleのアルゴリズム変更によるアップデート

SEOの観点では切っても切れないgoogle、近年のアップデートにより順位が大幅に変動し、涙した人も少なくないはず。・゚・(ノД`)
そのgoogle先生がサイトを構造化することを推奨としています。
実際にウェブマスター ツールには、構造化を支援する「構造化データ マークアップ支援ツール」「データハイライター」なるツールがあります。
これらを利用することによりリッチスニペットが反映されサイトの情報を細かく伝えることができます。
検索順位と構造化マークアップの関係性にについては、構造化データを利用しても順位にほぼ影響ないとのことですが、
リッチスニペットによる露出が増えるのでクリック率は高まると思われますし、構造化マークアップはgoogleにとって解析のしやすい好印象な仕様なので、
やっておいて損はないどころか、やるべきですね!
一言に構造化マークアップといっても、HTML5の新要素タグから、
「構造化データ マークアップ支援ツール」「データハイライター」などのツールなど様々であり、
ツールを使用しないのであれば、ボキャブラリーやシンタックスなど学ばないといけない事は多いですね。
今回でた、「構造化データ マークアップ支援ツール」「データハイライター」などの使い方なども機会があればしていければと思います。