【検索結果を正常化】サイトをHTML5対応してみた

どうもサイトの検索結果がおかしい。
サイト名がグチャグチャになっているのだ。

【例】
ページタイトル -サイト名１- -サイト名２-
ページタイトル -サイト名１-
ページタイトル -サイト名１- -サイト名１-
ページタイトル

まさにメッチャメチャである。
サイト名が２重になっていることも、サイト名が１つだけのことも、サイト名がないこともある。

これではダメだと言うことで、検索クローラーにサイト情報を正確に読み取ってもらうにはどうすれば良いのか、色々と考えてみた。

そして、HTML5にちゃんと対応してみようと思ったのだった。

HTML5 と HTML4 の違い（タグに意味を持たせる）

HTMLには、バージョンがいくつかある。
最初はHTML1、そして2、3、と続き、２０１６年現在は『 5 』だ。

HTML5では、今までは大きく異る点が出てきた。
それは、『タグに意味をもたせるようになった』 と言うことだ。

例えば、各カテゴリーへのリンクや、管理人のプロフィールページなど、そう言うナビゲーション機能のあるひと塊のものには <nav></nav> と言うタグを付ける。
すると、検索クローラーなどの機械が、ああ、これはナビゲーションなんだなと理解できる。

また、記事が<main></main>と言うタグで囲まれてたとする。
すると、検索クローラーなどの機械が、『これはこのページのメインになるもの、記事本文なんだな』と言うことがわかるのだ。

今、情報系ブログなどは特に、一ページの情報量がものすごくなっている。
そんな中で、正確にクローラーなどの機械が、これがメインになるもの、記事本文なんだと把握しずらくなっている。

HTML５では、それをサポートしてあげようと言う話なのだ。

HTML4では、<div></div>や<p></p>タグで囲ってしまえばいいや、人が見るもので、別に機械が見るもんじゃないと思われていたが、徐々に、クローラーなどの機械の読み取る情報の重要性が重要視されるようになって、HTML５では、それが反映した形になった。

HTML5 と HTML4 の違い（H1を複数個使える）

この他、大きな違いとしては、<h1></h1>を複数個使えるようになったと言う点がある。
h1 h2 h3 h4 h5 h6 などのタグは、見出しタグだ。

サイトのタイトルや、ページのタイトルや、記事の中の小見出しとして使われるものなのだが、HTML4では、H1は一個だけ。
二個は使えない。

そして、見出しは大きなところから順序良く降りていく形にすることが大事だった。

<h1>サイトタイトル</h1> <h2>ページタイトル</h2> <h3>ページの小見出し</h3>

こんな感じで、綺麗に順序良く降りていく形にするのが良く、サイトタイトルやページタイトルにつける<h1>タグを、無闇矢鱈に使うことは良くないとされていた。

でも、HTML5では、<h1>タグは何個使っても良くなった。
なので、こんなこともできるようになった。

<h1>サイトタイトル</h1> <h1>ページタイトル</h1> <h1>ページ内のタイトル</h1> <h1>ページ内のタイトル</h1>

どうやって変更するか？

ヘッダー情報を知らせる

そんなこんなで、実際にうちのサイトでHTML5対応するにはどうすればよいのか考えた。
まず、ヘッダーはヘッダーの情報であることを知らせるために↓のように変更した。

<header> <h1>サイトロゴ</h1> </header>

今までは <div id="header"></div> としていた。
でも、これではヘッダーかどうかを機械に伝えることはできない。
これで、ヘッダーであることを伝えられる。

ただし、以前は <div id="header"></div> の中に、カテゴリ用のリンクやメニューバーなども設置してあったので、それはナビゲーション用のタグに置き直した。

ナビゲーション用だと知らせる

<div id="header"></div> の中に放り込んであったカテゴリ用のリンクやメニューバーなどは、<nav><nav> で囲み直した。
<header></header> の中にはロゴだけを残した。

記事本文だと知らせる

記事本文の周りを <main> と <article> で囲んだ。

<main> <article> <h1>ページタイトル</h1> <p>文章文章文章文章文章文章</p> </article> </main>

<main> は、これ一つしか無いもの、そのページの核になる大事な部分を囲むときに使う。
なのでこれは必須として、問題は <article> にするか <section> にするかが問題だった。

【メイン <main>】
サイト内にそれ一つしか無いオリジナルなもの。
ページ内の重要な部分（記事など）をこれで囲むと、これが大事な部分なのだと言うことを示すことができる。

でも、<article> と <section> を色々と調べてみると、<article> と <section> には以下のような違いがあるようだったので、<article> にすることに決めた。

ページ内を <section> で分割して囲むことも考えたが、それはさすがに作業量的に無理だと思ったので、それをするのはやめた。

【アーリィクー <article>】
<article></article>の中で、内容が自己完結しまうもの。
投稿・ブログのエントリ・コメントなど。

【セクション <section>】
文章の一部・意味や機能の一塊。
導入部分・新着情報など。

サイドバーをエサイド <aside> に変更した

HTML5では、サイドバーのようなサブ情報（副次的な情報）は、<aside>タグを割り当てられるようになった。

これによって、サイドバーにちょっとした文章を入れても、サブの情報だと知らせることができるようになった。
（プロフィールやお知らせなどを埋め込んでいる場合は、クローラーなどにこれはサブ情報なので、軽い扱いでもいいよと知らせることができる）

<aside> サイドバー </aside>

フッターを <footer>に変更した

今までは、フッターでも <div id="footer"> で囲っていたが、これも <footer></footer>で囲ってやることで、フッターですよと言う情報を与えてあげることができる。

変更後はこのような形になった。
（本当は、もっと <div> タグを沢山使用しているが、わかりやすくするために、HTML5タグを中心にして、そう言う細々としたものはのは端折った）

サイトタイトルにも<h1>を割り当てた

HTML5の切り替えだけでも時間がかかってしまったのだが、HTML4 の負の遺産（H1を複数個使えないこと）により、見出しタグの数字がバラバラになってしまっていたのを大幅に修正したので、さらに時間がかかってしまった。

個人的には、ちょっと嫌だなあと思っていたところがHTML5になってからスッキリできてよかった。
（<h1>の次に<h2>にするつもりが、<h1>一つしか使えないので、<h1>と<h2>を共用にしていたところがあり、それを全部<h1>に置き換え、さらに<h3>と<h4>をそれぞれ<h2>と<h3>にした）

【前の状態】
<h1>　ページタイトル・サイトタイトル
<h2>　<h1>をページタイトルとして使えないところは<h2>で置き換え
<h3>　<h2>の下の見出し
<h4>　<h3>の下の見出し

【変更後の状態】
<h1>　ページタイトル・サイトタイトル
<h2>　<h1>の下の見出し
<h3>　<h2>の下の見出し

<!DOCTYPE html><html lang="ja"> <head></head> <body> <header> <h1>サイトロゴ<h1> </header> <nav> <ul> <li>カテゴリー１</li> <li>カテゴリー２</li> <li>カテゴリー３</li> </ul> </nav> <main> <article> <h1>ページタイトル</h1> <p>文章文章文章文章文章文章文章文章文章文章</p> <h2>サブタイトル</h2> <p>文章文章文章文章文章文章文章文章文章文章</p> </article> </main> <aside> サイドバー </aside> <footer> フッター </footer> </body>