HTML5でのSEO対策
最近、HTML5で記述するサイトが増えてきました。 新しい時代の到来です。 しかしながらHTML5と、いままでのHTML4では仕様の違いにより、全く違うSEOをしなければならないものがあります。 HTML5のサイトを運営する際、その違いによりどのようにSEOをすればいいのか判断に迷う場面が増えているのではないでしょうか？ 更にその上、現在はHTML4とHTML5の混在している時期のため両方に配慮したSEO対策が重要と考えられます。 単純なHTML5に最適化すればいいというものでもないようです。 そこで、HTML5とHTML4とで変わらないものと、 HTML5におけるSEO対策の変わったもので重要な部分を厳選してピックアップします。HTML5になっても変わらないもの
HTML4のときとと変わらないSEOとして以下があります。 titleタグ metaディスクリプションタグ metaキーワード strongタグ emタグ これらについては、以下のような今まで通りのSEOのでかまいません。今まで通りのSEO（おさらい）
titleタグ
非常に重要なままです。 対策キーワードを前の方に配置し、1～2回程度使用し、20～36文字程度で記載する。 各ページごとに固有のものを入力する。metaディスクリプションタグ
重要度はタイトルタグほどではありませんが、かならず各ページごと固有の内容を入力。metaキーワード
GoogleはmetaキーワードをSEOの評価基準からは除外していますが、表記のゆれなどを記載する。strongタグやemタグ
キーワードに使用し、各ページごとに1個～2個迄使用する。SEO上、HTML5になって大きく変わったもの
大きく変わったものに、HTML4のSEOでとても重要だったh1～h6タグの扱いが上げられます。 HTML4において、見出しと段落の階層構造を、h1～h6で意味付けをし、 順序を守ることが重要でした。 この階層構造を「ネスト」、あるいは「ネストする」などと表現する場合があります。 さておき、html5においてはこの階層構造をh1～h6タグで表現しません。 しかも、すべてh1でも問題ありませんし、順序が逆でも問題がないそうです。 ページ上で最も重要な見出しは <header></header>タグ内にてhタグで記述し、それ以下の 見出しと段落の階層構造はセクショニングコンテンツの <section></section>や<article></article>のタグで表現するそうです。HTML4での表現 <h1>見出し</h1> <p>文章</p> <h2>見出し</h2> <p>文章</p> <h3>見出し</h3> <p>文章</p>
HTML5での表現（h1が複数あっても正しい） 例1） <header> <h1>見出し</h1> <p>文章</p> </header> <section> <h1>見出し</h1> <p>文章</p> <section> <h1>見出し</h1> <p>文章</p> <section> <h1>見出し</h1> <p>文章</p> </section> </section> </section>
HTML5での表現（ｈ１～ｈ６を区別しないので以下でも正しい） 例2） <header> <h1>見出し</h1> <p>文章</p> </header> <section> <h4>見出し</h4> <p>文章</p> <section> <h2>見出し</h2> <p>文章</p> <section> <h1>見出し</h1> <p>文章</p> </section> </section> </section> ※しかし、例1、例2はおすすめしません。後述します。
補足）articleタグについて <article>タグは、<article>タグで囲まれている範囲だけでも 独立していて、まとまっている内容に<article>タグを使用します。 そこだけを、SNSなどで共有されても意味が通じるほど、 独立してまとまっていることがポイントです。 例えば、ブログの記事や、ブログに記載されたコメントなどに使用するといわれています。 また、そのような場合は <section>タグでなく、<section>タグの代替として、 <article>を使用したほうがいいそうです。 ぜひとも意識的に使用しましょう。
例3） <header> <h1>見出し</h1> <p>文章</p> </header> <article> <h1>見出し</h1> <p>独立した内容</p> <section> <h1>見出し</h1> <p>文章</p> <article> <h1>見出し</h1> <p>さらに独立した内容</p> </article> </section> </article>
html4との兼ね合い。
h1～h6タグについて区別をしないとはいえ、現状h1～h6の階層構造により評価され、 h2があるからこそ、h3があるからこそ評価されるという状況がありえます。 その際に受けるSEO上のメリットが否定出来ない以上、html5であったとしても、 HTML4同様h1～h6の階層構造を整えておくことをおすすめします。例4） <header> <h1>見出し</h1> <p>文章</p> </header> <section> <h2>見出し</h2> <p>文章</p> <section> <h3>見出し</h3> <p>文章</p> <section> <h4>見出し</h4> <p>文章</p> </section> </section> </section>
