HTML5のSEO

2014.9.12|SEO ノウハウ紹介

このエントリーをはてなブックマークに追加
Check

html5

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での表現(h1~h6を区別しないので以下でも正しい)

例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>

 


まとめ

HTML5を使いこなすサイトオーナーが増えている状況のなかで、
難しい判断をせまられるSEO状況においても、的確に検索エンジン対策をすすめましょう。

今回の記事は、HTML5の基礎的な部分についてはあまりふれませんでしたが
HTML5のSEO上の注目の変更点にフォーカスしましたので、ご参考いただき
HTML5の波にのりながら、よりメリットを享受する検索エンジン最適化を実施していただければ幸いです。

コメント一覧

コメントはありません。

この記事にコメント

*

トラックバックURL