インデックス最適化！SEO対策に必要な正しいHTML構造とURLの付け方（3/3ページ）

section

sectionは主に、見出しと文章でセットになるものを1つのセクションとしてくくります。自己完結していればaticleでくくらなければいけません。なので、主にarticle中の自己完結していないそれぞれの見出しと文章のセットを1つのセクションとしてくくります。

<article>  
    <h1>見出し</h1>  
    <section>  
        <h2>見出し1</h2>
        <section>
            <h3>見出し1-1</h3>
        </section>
        <section>
            <h3>見出し1-2</h3>
        </section>
    </section>
</article>

footer

footerは記事やページのフッター要素を表します。著作権や注釈、作者の情報、その他リンクなどを含めます。

aside

asideはそれをページから切り離しても問題ない、軽く触れておきたいコンテンツをくくります。たとえば、主要なコンテンツが入っていないサイドバーや、記事中のSNSボタンの集まりなどをasideくくるといいでしょう。

time

timeはその記事の作成時刻などを示すときに使います。主に記事の上部や下部、もしくは見出しの近くなどで利用すると良いでしょう。headerでく見出しと一緒にくくる使い方をしてもよいでしょう。中身はマシンが可読できるフォーマットで記載する必要がありますが、そうでないときはdatetime属性に可読できるフォーマットで記載しておきます。

<time datetime="2014-10-05">October 5</time>

small

smallタグは免責事項や著作権などの注釈に対して使います。あまり長い文章には使いません。主にページの最後のfooterの中のAll Rights Reservedの表記に使います。

<small>All Rights Reserved</small>

pre

preタグは整形済みテキストを表し、preタグの中で記載した改行やスペースがそのまま表示されるようになります。以下のテキストは、スペースと改行がそのままで表示されます。

<pre>  
明日は　晴れるで　　　　　しょうか
昨日は　晴れたでしょう　　
　　　　　か
晴れたら　　　いいです
　　　ね
</pre>

表示例↓

明日は　晴れるで　　　　　しょうか
昨日は　晴れたでしょう　　
　　　　　か
晴れたら　　　いいです
　　　ね

code

codeはプログラムコードを表すときに使います。プログラムコードは空白や改行などをそのまま表すときが多いので、主にpreタグと一緒に使用します。なお、特殊文字がプログラムとして認識されてそのまま表示されない場合は特殊文字を｢&キーワード；｣で記述します。たとえば「>」は「&gt;」で表されます。

<pre>
    <code>
        var a=1;
        var b=2;
        var c=a+b;
    </code>
</pre>

div

divタグはよく使われるタグですが、これは他に使用できるタグがない場合の最終手段、もしくはデザインのためのグループ分けとして使いましょう。すべてdivでくくってあるサイトもありますが、見出しはh1、文章はpというように、それぞれに最適なタグを選択するようにしましょう。

span

spanは主に文章中の特定の文字の大きさや太さを変えるなどのデザインに用います。divなどと違って、フレージング・コンテンツなので、テキストレベルのものしかくくることができません。divのようにいくつかのタグをグループ分けにするというような使い方はできません。

<p>
  私が恋人を愛するのは<span style="font-weight:bold">ただ単に好きだから</span>です。
</p>

まとめ

以上がインデックスを最適化するためのHTMLやURLについての最適化です。

特にHTMLはきちんと正しいタグを使うことで、クローラーにしっかりとコンテンツの内容を把握させることができ、コンテンツの正しい評価につながりますので、きちんと最適なタグを使うようにしましょう。