HTML5における意味に基づくマークアップの重要性とその効果
HTML5ではセマンティックなマークアップが可能になったということはご存じの方も多いかもしれませんが、新しい要素（header,footerなど）についてしか知らない、という方が大半だと思います。
今回は、HTML5におけるセマンティックなマークアップの形式とその効果について見ていこうと思います。
HTML5におけるセマンティックなマークアップの形式
具体的には、以下のような形式があります。
- マイクロデータ
- マイクロフォーマット
- RDFa
今回はどんなものがあるか知るだけで十分ですので、具体的な説明は省きますが、どれもこれまでのマークアップとは異なるものです。
どの形式も、基本的に名前や住所などの「単語」区切りでspan要素を用いてマークアップしていきます。
ですので、非常にマークアップが面倒になりがちという特徴があります。
また、詳しい仕様が気になる方は次に紹介するスライドや、Googleの構造化についてのページを見ていただければだいたいのことはわかると思います。
意味の基づくマークアップの重要性とその効果
実は、自分もこれまでは上記のマークアップをして何らかの効果があるのか、する意味があるのかと思っていたのですが、どうやら実際にやって効果が出た例があるのでそれをご紹介します。
まず、セマンティックなマークアップで得られるメリットの1つに「検索結果にリッチスニペットがつく」というものがあります。
リッチスニペットがつくと、その分他のサイトより目立ちますし、差別化が図れます。
それだけでなく、そのページが何を指しているか、何が書かれているかがひと目で分かるようになるので、検索した人が望んでいるサイトに行く確率が上がります。
つまり、質の良いユーザー(CVにつながるユーザー)を獲得できるというわけですね。
これは結構大きいと思うので、多少面倒でもセマンティックなマークアップをする意味はあるんじゃないかな、と思います。
さいごに
意味付けを重視したマークアップはまだ始まったばかりで、まだ「こうしておけば間違いない」という定石がありません。
ただ、その分いまから始めれば他のサイトにより差をつけられるとも言えるので、余裕がある人はやってみてもいいかもしれませんね。