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

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

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

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

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

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

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

長すぎる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タグでそれぞれの見出しと文章をくくることが推奨されています。

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

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>