ここではHTMLコーダー向けでは無く、マーケティングやSEO担当者でもおさえてほしい構造化タグの基礎を解説します。
コーダー向けでは無いのでSEOに関連する部分を強調して解説していきます。
セマンティックWeb・構造化とは？
1998年にW3CのTim Berners-Leeという人が提唱したもので、コンピューターがサイトの構造を理解できるように、意味を持たせるものです。
具体的にどうやるのかと言えば、HTML5から導入された「構造化タグ」を用いてマークアップする事です。
サイトのこの部分はヘッダーで…
ここはナビゲーションで…
ここからが記事で…
とコンピューターでも理解しやすくなります。
簡単な例としては、
＜div class="header"＞...＜/div＞
このように、勝手にheaderと名付けただけのDIV要素だったものが、
＜header＞...＜/header＞
と、headerがヘッダであるという意味を持つ「構造化タグ」に置き換わるようなイメージです。
SEO担当者向けに構造化タグを解説
これだけは覚えておきたい基本的な構造化タグは以下のような種類があります。
| タグ | 説明 |
|---|---|
| header | ヘッダであることを示す |
| footer | コピーライトなどを記載するフッターであることを示す |
| nav | グローバルナビゲーションに使用 |
| section | 見出しをつけて一つのまとまりであるコンテンツを囲む |
| article | 記事であることを示す |
| aside | 直接的には関連しないコンテンツに使用 |
セマンティックなマークアップにおいて構造化タグの解釈は人によって微妙に違う場合もあり、どれが絶対に正しいというのも無いのですが、例えばこのような感じで構造化タグを割り当てるのが一般的でしょう。
このサンプルのようにオーソドックスなブログ形式のサイトであれば構造化タグで迷うこともそれほどないですが、比較的大規模なサイトだと構造化タグに頭を悩ますケースもあります。
コーダー担当者がSEOの知識が少なかったり関心が無いとベテランのコーダーであっても結構あやふやなタグの使い方をしてしまうケースもあるのでSEO担当者がしっかりとコードの検収作業を行うべきです。
そして根拠と一緒に修正指示を出せるようにしておいてください。
構造化マークアップをするメリット
で。
セマンティックな構造化マークアップが出来るようになるとどのようないいこと（SEO的）があるのか解説していきます。
メリットとしてはいろいろあって日々新たなメリットも生まれてきますが、よく目に付く部分としては、
検索結果でURLの代わりにより分かりやすいパンくずが表示されたり、
口コミの星マーク（★）や価格情報も目にしたことがある方もいるのではないでしょうか。
ナレッジパネル
ナレッジパネルというのは検索結果の横のところに出てくるGoogleが表示するパネルのことです。
例えば「北海道」とGoogle検索をしたところこのようなナレッジパネルが出てきました。
検索結果などで反映される構造化マークアップは他にもたくさんあります。
例えば、
- 会社情報（企業情報）
- 映画・テレビ番組
- プロフィール
- ローカルビジネス（お店など）
- レシピ
- 求人
- 医薬品成分名
- 本・書籍の情報
等があります。
Googleのドキュメントによく目を通しておくと良いでしょう。
構造化データ マークアップ支援ツール
Googleに構造化を正しく認識させるためのコーディングは案外難しいものです。
手軽に実装するための支援ツールがGoogleから提供されています。
URLを入力してマークアップしたい箇所をハイライトして情報を入力していくだけです。
作業完了したらHTMLをダウンロード可能です。
構造化マークアップが正しく認識されるかテストすることのできるツールも用意されています。
事前にエラーが無いか確認出来ます。
構造化マークアップは正しく利用すれば有利に使える機能ですが、使い方を誤ると「スパム行為」とみなされる場合もあるので正しい使い方が出来ているか事前によくチェックしてください。
