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

HTML5の場合

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

適切なタグを使用する

クローラーはタグによってそれぞれの文章のコンテンツでの役割を認識しています。h1タグで使用するところを、divやpでやってもデザイン的には大丈夫ですが、クローラーはそれが見出しであることを理解できません。

適切なHTMLのマークアップのため、上記で説明した、a、img、h1～h6のほかに、以下のタグを適切に使用するといいでしょう。詳細な説明や記述方法はリンク先のページをご覧ください。HTML5を前提にリストアップしています。

p

段落を表すタグです。主に文章で使用します。段落を変えるときは<br>の強制改行で余白を作るのではなく、pタグで段落を区別しましょう。

<p>文章</p>

ul・ol・li

このタグはリストを表します。箇条書きするときに使用します。ulは順不同のリストを表し、olは目次や箇条書きした説明文などの順序を定めるタグで使用します。それぞれの項目をliで表し、それらをulやolでくくってリストを表現します。

<ul>
    <li>項目1</li>
    <li>項目2</li>
    <li>項目3</li>
</ul>

figure・figcaption

figureは図表を示す際に使用し、主にimgタグをくくります。注意するのはすべての画像をfigureでくくるのではなく、文章中の挿絵や図表にfigureを使います。装飾などの画像には使いません。

figcaptionでその図表の題名を示すことができます。また、ulやolのリストに題名をつけるときも、図表なのでfigureとfigcaptionを使えます。figcaptionは省略できます。

<figure>
    <figcaption>図表の題名</figcaption>
    <img src="…" alt="…">
</figure>

table・caption・thead・tfoot・tbody・tr・th・td・colgroup・col

tableタグは表を表します。デザインに便利ですが、デザインとしては用いないで、表として表したい時だけ用いてください。caption・thead・tfoot・tbody・tr・th・td・colgroup・colのタグと一緒に使います。

<table>
    <caption>{テーブル名}</caption>

    <colgroup>
        <col>
    </colgroup>
    <colgroup></colgroup>
    <colgroup></colgroup>

    <thead>
        <tr>
            <th>{列1タイトル}</th>
            <th>{列2タイトル}</th>
            <th>{列3タイトル}</th>
        </tr>
    </thead>

    <tfoot>
        <tr>
            <td>{注釈や著者名などのフッター要素}</td>
        </tr>
    </tfoot>

    <tbody>
        <tr>
            <td>{行1列1}</td>
            <td>{行1列2}</td>
            <td>{行1列3}</td>
        </tr>
        <tr>
            <td>{行2列1}</td>
            <td>{行2列2}</td>
            <td>{行2列3}</td>
        </tr>
    </tbody>
</table>

q・blockquote・cite

qやblockquoteは引用文を表し、citeで引用元を明記します。qは短い文に使い、blockquoteは複数の段落に分かれている文章などに使います。

<p>
夏目漱石の<cite>吾輩は猫である</cite>の出だしは、「<q>吾輩は猫である。名前はまだ無い。</q>」という文章で、実に単純で奥深いものである。
</p>
<p>
 田中さんが運営している<cite>タナカワールド</cite>というブログから以下を引用してみる。
</p>
<blockquote cite="http://example.com/">
    <p>私は・・・</p>
    <p>なのでこの場合・・・</p>
    <p>よって私が下した結論は・・・</p>
</blockquote>

dl・dt・dd

これらのタグは説明文つきリストを表します。dlで全体をくくり、dtで説明する言葉や対象を、ddでその説明文を表します。ulなどのそれぞれの要素に説明を加えたい時はこちらを使用するといいでしょう。

<dl>
    <dt>説明する言葉や日付、質問文など①</dt>
        <dd>説明文</dd>
    <dt>説明する言葉や日付、質問文など②</dt>
        <dd>説明文</dd>
    <dt>説明する言葉や日付、質問文など③</dt>
        <dd>説明文</dd>
</dl>

header

headerは記事の本文やページ全体のヘッダーを表します。見出しタグやナビゲーションなどを包括します。ヘッダー部分が見出しタグのみであれば使用する必要はありません。

<header>
    <h1></h1>
    <nav></nav>
</header>

nav

navは主要なナビゲーションをくくります。主要なというところに注意し、コンテンツから除外しても問題はないナビゲーションはnavではくくりません。主にヘッダーのメインナビゲーションなどで使用します。

<nav>
    <ul>
        <li></li>
        <li></li>
        <li></li>
    </ul>
</nav>

article

articleは主にメインの記事部分をマークアップします。articleでくくることができるものは、独立してもそれだけで自己完結できるコンテンツです。この意味からブログの記事一覧のそれぞれの記事のエントリもarticleでくくることができます。