インデックス最適化!SEO対策に必要な正しいHTML構造とURLの付け方

インデックス最適化!SEO対策に必要な正しいHTML構造とURLの付け方

SEO対策においては、内部リンクを張り巡らしてクロールさせやすくしたり、質の高いコンテンツを作るということが必要です。

しかし、それらの対策をやっても、HTML構造がめちゃくちゃで、クローラーが正しく読み取れず、インデックスにいつまで経っても登録されないようなことがあれば、元も子もありません。

検索結果に表示されるには、インデックスされやすいようにHTMLやURLを最適化する必要があります。

そこで、今回はそのインデックス最適化について紹介します。

SEO対策に必要な正しいHTML構造とURLの付け方

目次
  1. 長すぎるURLにしない
  2. 単語を使用した意味のあるURLにする
  3. URLの区切り記号にはハイフン(-)を使う
  4. titleタグの最適化
  5. descriptionの最適化
  6. メタタグのkeywordsの削除
  7. aタグのアンカーテキストの最適化
  8. imgタグのalt属性の最適化
  9. 見出しタグ(h1~h6)の最適化
    1. HTML5でない場合
    2. HTML5の場合
  10. 適切なタグを使用する
    1. p
    2. ul・ol・li
    3. figure・figcaption
    4. table・caption・thead・tfoot・tbody・tr・th・td・colgroup・col
    5. q・blockquote・cite
    6. dl・dt・dd
    7. header
    8. nav
    9. article
    10. section
    11. footer
    12. aside
    13. time
    14. small
    15. pre
    16. code
    17. div
    18. span

長すぎるURLにしない

長すぎるURLにすると、ユーザにとってもわかりにくいし、クローラーにとっても優しくないです。複雑なURLだとクローラーが正しく巡回できないこともあります。短いURLの方がリンクも貼られやすいし、クローラーも巡回しやすくなります。

良い例
http://example.com/flower/cosmos/
悪い例
http://example.com/flower/cosmos?id=2736183613&sess_id=jkisFRsG

単語を使用した意味のあるURLにする

URLとして使用されるファイル名やフォルダ名はそのページや画像に関連する単語などを使用して、意味のあるURLにするようにしましょう。

それによって、URLを見ただけでユーザーが何のコンテンツか把握できるし、インデックスされるときも、その単語と関連付けて登録されるので、その単語の検索のときに検索結果に表示されやすくなります。

もちろん、意味のあるURLにすることで複雑なURLになることを防ぐので、クローラーが巡回しやすくなり、複雑なものよりインデックスに登録されやすくなります。

なお、単語の使い過ぎは厳禁です。簡潔なURLにするようにしましょう。

良い例
http://example.com/flower/cosmos/
悪い例
  • http://example.com/0304/27846392/
  • http://example.com/flower/cosmos-yellow-blue-green-red-white/

URLの区切り記号にはハイフン(-)を使う

URLに使用する言葉が2つの単語から成り立つときは、区切り記号を使うといいでしょう。そして、区切り記号にはアンダーバー(_)ではなく、ハイフン(-)を使うようにGoogleは推奨しています。

良い例
http://example.com/flower/cherry-blossom/
悪い例
  • http://example.com/flower/cherryblossom/
  • http://example.com/flower/cherry_blossom/

titleタグの最適化

titleタグでキーワードを乱用したり、長すぎるタイトルにするのは厳禁です。そのサイトやページに関連したタイトルを付けるようにしましょう。

検索結果では全角32文字を超すと、省略されてしまうので、タイトルは全角32文字以内に抑えるのがベストです。

長くならない場合には、そのサイトで扱っているコンテンツに関するキーワードも含めて設定すると、その検索ワードでヒットしやすくなります。例えば「簡単レシピサイト【Cooking】」のように設定するといいでしょう。

また、他のページと重複させず、そのページに固有のタイトルを付けるようにしましょう。

descriptionの最適化

メタタグで設定するdescriptionもキーワードなど乱用しないで、ちゃんとそのサイトの説明文として、ユーザーに分かりやすく説明できるような文章を設定しましょう。

descriptionは省略することもできますが、きちんとそのページの内容をわかりやすく伝えるために、省略しないでページ固有の説明文を記載するようにしましょう。

descriptionを設定しておくと、検索結果にタイトルの下に表示され、ユーザーの関心を惹く内容であれば、アクセスの増加につながります。

descriptionの文字数は全角124文字以上は検索結果で省略されますので、それ以下にするようにしましょう。

メタタグのkeywordsの削除

Googleはメタタグのkeywordsを検索順位の評価要素として利用していないと、Official Google Webmaster Central Blog:Google does not use the keywords meta tag in web rankingの記事で正式に発表しています。

この情報は海外のものですが、発表されたのが2009年なので、日本でもとっくに無視されていると考えられています。

クローラーはheadの情報が複雑だと正しく巡回できなく、インデックスもおかしくなってしまうことがあります。

そのため、メタタグのkeywordsを削除して軽量化をすることをおすすめします。

aタグのアンカーテキストの最適化

aタグは<a href="{URL}">{アンカーテキスト}<a>のように記述しますが、このアンカーテキストの部分はかなり重要な箇所です。

アンカーテキストはしっかりとリンク先に関連のある言葉で使用します。そうすれば、ユーザーにリンク先のページがどのような内容なのかわかりやすくなります。

そしてクローラーは、このアンカーテキストをリンク先のページのキーワードとして扱います。関連のないキーワードであっても、そのリンク先ページのキーワードとして扱われるので、検索結果にその検索ワードで表示されてしまう可能性があります。

きちんとしたアンカーテキストを設定することで、ユーザビリティを損ねず、リンク先ページのキーワードの強化にもつながるので、最適なアンカーテキストを設定しましょう。なお、長すぎるのは厳禁です。

良い例
  • <a href="http:/example.com/">花見の名所<a>
  • <a href="http:/example.com/">http:/example.com/<a>
悪い例
  • <a href="http:/example.com/">①<a>
  • <a href="http:/example.com/">こちら<a>
  • <a href="http:/example.com/">花桜コスモスチューリップ満開花見見頃名所<a>

imgタグのalt属性の最適化

imgタグは<img src="{URL}" alt="{画像の代替テキスト}">で使用しますが、このalt属性もクローラーはきちんと認識します。

alt属性は本来画像が表示されない場合の代替テキストの役割をします。クローラーは画像の中身を判別できない代わりに、alt属性の名前でその画像に対してキーワードを設定したりします。

しっかりキーワードを使って何の画像を表しているか、「alt=”コスモス”」のように設定します。「alt=”①”」や「alt=”画像”」などではだめです。alt属性はその画像の代替テキストであって名前ではありません。

alt属性に画像の代替テキストとなる言葉をしっかり設定しておけば、画像検索において検索されやすくなるし、そのサイトのキーワードとしても扱われるので、SEOに有利になります。

万が一、画像が表示されない場合でもその代替テキストが表示されることで、ユーザビリティを損ないません。サイトの1つのコンテンツやキーワードとしてインデックスされるために、きちんと設定するべきです。

また、ただのデザインや装飾に使っている画像など、代替テキストを使用しないようにするべきです。そのときは、alt属性を書かないのではなく、空にして「alt=””」にするように推奨されています。なお、長すぎるのは厳禁です。

良い例
  • <img src="/image/cosmos.jpg" alt="コスモス">
  • <img src="/image/summary.jpg" alt="2014年度水質調査結果">
  • <img src="/image/background.jpg" alt="">(装飾用画像)
悪い例
  • <img src="/image/cosmos.jpg" alt="画像①">
  • <img src="/image/cosmos.jpg" alt="花コスモス満開青黄色緑赤">
  • <img src="/image/background.jpg" alt="背景装飾画像">(装飾用画像)

見出しタグ(h1~h6)の最適化

h1、h2、h3などの見出しタグはきちんと、大見出しにh1、その小見出しにh2、さらにその小見出しにh3というように、文章の階層構造によって適切なものを設定しましょう。

クローラーはこの見出しタグによって、見出しと文章の関係や、大見出し・小見出しなどの章・節・項のような階層構造を把握することができ、適切にインデックスするようになります。

なお、HTML5を使用しているのならば、sectionタグでそれぞれの見出しと文章をくくり、見出しタグはh1で統一することが推奨されていますが、SEOのためにもやはり階層構造を明確にした方がいいと思われます。

具体的な構造は以下のようにするといいでしょう。なお、以下では見出しタグのみしか記述していません。普通は見出しタグの下に文章などが存在します。

HTML5でない場合

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

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でくくることができます。

section

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

<article>  
    <h1>見出し</h1>  
    <section>  
        <h1>見出し1</h1>
        <section>
            <h1>見出し1-1</h1>
        </section>
        <section>
            <h1>見出し1-2</h1>
        </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はきちんと正しいタグを使うことで、クローラーにしっかりとコンテンツの内容を把握させることができ、コンテンツの正しい評価につながりますので、きちんと最適なタグを使うようにしましょう。