HTML5がリリースされて随分経ちました。
それにより多くのタグが増え、それにより今までデザインを目的と使用されていたものが「構造化」という本来の役割を持たされるようになりました。
構造化は、目に見えにくい部分です
それぞれの役割を理解していなければ、せっかくきれいなサイトに仕上げても、Googleからみたら「何を伝えたいの？」といったような解釈をされてしまいかねません。
そこまで複雑な知識は必要ありません。
Webプログラミングの勉強を始めた方は、せっかくなので早い段階から正しい知識でスタートが切れるようにしておきましょう。
そして、古くから取り組んでいて旧式の記述方法から抜け出せていない方は、是非この機会に手直しをしてみてください。
SEO対策のためのHTML
人間の目からすると、デザインから「ナビゲーション」や「ヘッダー」、「記事」という役割を認識することができます。
しかし、クロールしてくれるGooglebotからすると、正しいタグによる構造化をしていなければ、記事なのかメニューなのか、はたまたフッターなのかわからないのです。
わからないから、正しい情報をサイトから得ることが出来ず、検索結果で伝えようにも正確に伝えられない、といったことが起こってしまうのです。
コーディングをする際は、そのサイトの所有者以上に、Googlebotのためを思って記述してあげなければいけません。
構造化タグとは
HTMLで役割をもった重要なタグとはなんでしょうか？
実際に、空ページのHTMLで見てみましょう。
<!DOCTYPE html>
<html>
<head>
</head>
<body>
<header>
<nav></nav>
</header>
<main>
<section>
<article></article>
<article>
<section></section>
</article>
</section>
<section></section>
</main>
<aside></aside>
<footer></footer>
</body>
</html>最低限のタグのみをまとめてみました。今回の構造化で注目するのは、<body>タグ内です。
役割を知る
それでは、<body>内のタグの役割を簡単に見ていきましょう。
header
その名の通りヘッダーです。導入部分、そのコンテンツのキャッチとなる部分です。
基本的に<body>内の頭で用いられますが、これ自体がセクションとしての役割があるわけではありません。
一意ではなく、<section>タグ内でキャッチになる部分に使用することもあります。
footer
その名の通りフッターです。copyrightを記載する部分に用いられています。本で例えると裏表紙部分のような役割です。
main
ページのメイン部分に使用されます。ページ内に1つであることが望ましいです。
祖先（mainタグを囲っているタグ）に<header>、<footer>、<article>、<aside>があってはいけません。
section
文のまとまりです。「章」といった役割をもっています。
サイトをコンテンツごとに大まかに分ける際などの区切りに使用することが一般的です。
また、記事内の章ごとにも使用したりと入れ子にすることができます。
nav
ナビゲーション部分に使用されます。
ヘッダー何のメインメニューや、パンくずリスト、サイトマップ等が該当します。
article
記事部分のまとまり部分を指定する際に用います。
アーカイブページなどの一覧では、記事ごとに小分けにされて使用することになります。
<section>と違い、<article>は一つのコンテンツとして完成されたものを示すので、入れ子にすることはできません。
aside
補足部分として用いられます。ブログで多いのは、サイドバー部分での使用です。
コンテンツ内の情報として強く明示したくないといったような意図があるので、広告を掲載する部分に用いたりします。
サイトを構成する際に、どの部分がどういった役割をもっていて、何を伝えたいかなどを意識した上で、それぞれタグを使用してみましょう。
そうすることで、Googlebotにもあなた作ったサイトのことを正しく伝えてあげることができます。
ルールを遵守する
タグにはそれぞれルールが存在しています。
前項の説明にも挙げていますが、役割を間違えやすい<article>と<section>タグについて見ていきましょう。
もしブログの入ったサイトであれば、<article>の使い方が重要です。
これは入れ子にできないため、記事の部分を正しく囲ってやる必要があります。
記事の単一ページであれば、大きく囲うことになります。その中で章ごとに<section>でわかりやすく構造化していきます。
<article>を使用するかどうかの判断には、それ自体が独立してもコンテンツとして成り立っているかという基準を持っておくと良いですね。
旧式の記述方法をしている人は、divタグを使って囲ってしまいがちです。
しかし、それが一つのまとまり（章）として成り立っているのであれば、<section>を用いる方が良いでしょう。
また、<article>も<section>も1つのまとまりのため、そこに導入部分やキャッチに該当する箇所があれば、<header>を用いたり、そのまとまりのタイトルに該当するような箇所には見出しタグ（h）を使用してもOKです。正しい役割で構造化していきましょう。
例）
section → article → section → header → h2
上記のように、入れ子にして子、孫を作っていくことになります。
一つのブロックごとに横並びにしてみて、ルール違反をしていないか照らし合わせてみると、それぞれの役割が理解しやすいでしょう。
そして、そのまとまりに大きな意味がない部分や、CSSを反映させるために必要な部分には<div>や<p>、<span>といったものを状況に合わせて使用しましょう。
設計はデザインの基本
タグによる構造化は、Webデザインをする上でも大きく役立ちます。それは、構造化するということが「設計」にとても類似しているからです。
実際にデザインを作ってみた際に、どの部分にどのタグが当てはまるのかを構造化していくと、どういった要素が足りていなく、または強調したい部分のなどが、より可視化されていきます。
また、デザインには設計が欠かせません。
実際にタグを基準にして、ルールを遵守しながら設計図を作り上げていくと、サイトとしてまとまりが良いものが自然と出来上がっていきます。
もちろん、コーディングのことばかりを意識してしまっては、本来出せるパフォーマンスに制限がかかってしまうこともあるので、一つの軸の基準であるということを頭の片隅においておくと良いでしょう。
まとめ
HTMLではルールを無視してしまっても、見た目に影響が出ないことが多いです。
だからこそ、本来の役割を理解せずまま作り上げてしまい、サイトのもつ本来の力を発揮できないということがあります。
駆け出しの方は、そうなってしまわないためにも、SEOの基本をしっかりと理解した上で、次のステップを目指してみてはいかがでしょうか？
また、現在最前線で活躍するエンジニアの方も、今一度見直してみてください。
参考書籍はこちら