内的SEO対策をするなら、アウトラインを意識したHTMLマークアップも行おう

HTMLのアウトライン

SEO と言えば、ページタイトルやキーワード、被リンク、サイト内リンク、ディレクトリ構造など対策すべきところはたくさんあり、日々試行錯誤と修正対応の繰り返しです。今回は、その中からHTMLマークアップに着目してみようと思うております。

なぜ?? HTMLマークアップが大事な理由

クロールしやすいサイトにするためです。
サイトにはクローラーと呼ばれるロボットが巡回しにきます。定期的に更新されていたり、人気があるサイトであれば巡回頻度も高くなります。クローラーはリンクを辿ったり、ページ内の情報を分析したりと検索結果に反映させるための情報を収集します。でも、HTMLのマークアップがぐちゃぐちゃだと、クローラーがHTMLを正確に読み取ってくれないかもしれません。

ユーザー目線で考える

あなたのページが適切に読み取られていれば、検索結果とのズレが少なくなります。訪問するユーザーにとっては、検索キーワードと関連性が高いページが検索結果に表示されることを望んでいるはずなので、クローラーにページ内容を正しく解釈させることはとても重要な訳です。

HTMLのアウトラインを意識する

クローラーに正しく読み取ってもらうためには、HTMLのアウトラインを整えることが重要です。アウトラインとは階層構造を指し、これは HTML5 で追加されたsectionarticleといったセクショニングタグと見出しタグのh1からh6で構成されます。

例えばよくあるのが、以下のような記述です。

<!-- html -->
<h1>サイト名</h1>
<section>
  <h2>商品名</h2>
  <p>テキスト</p>
  <section>
    <h2>見出し</h2>
    <p>テキスト</p>
    <section>
      <h3>中見出し</h3>
      <p>テキスト</p>
    </section>
  </section>
  <section>
    <h2>著者情報</h2>
    <p>テキスト</p>
  </section>
</section>

これをアウトライン化すると ↓ のようになります。

1. サイト名
    1. 見出し
        1. 中見出し
    2. 著者情報

項目数が少ないのでわかりにくいですね。自分のサイトで見てみます。(お見せできるレベルとなるようHTMLアウトラインを再度見直しましたよ。)

html outline

前回の記事をアウトライン化してみました。こうしてみると、記事やサイドバーの情報などが、入れ子でリスト化されており、ロボットでなくともかなり構造が把握できるようになります。

初めからアウトラインを意識して制作する

ページを作った後で階層構造を見直すとかなりの労力が必要になるかもしれません。それは、すでにできているHTMLのタグを入れ替えたり、順番を変えたりするからです。「タグ変更したけど、閉じタグ変えるの忘れていた」というあるあるも起こるかもしれません。
そんなリスクや手間を考えれば、最初からHTMLアウトラインを意識して制作を始めるのが得策です。

コーディングが早い人や美しいソースを書ける人は、自然とこれができていて、逆に出来ていない人は、全体像を把握せず、何も考えないで進めているといったこともあるかもしれません。
仮にそんなケースに遭遇すると、メンテナンス性が異常なほど悪く、想像を遥かに超える作業時間を取られてしまうこともあります。というか、遭遇したこともあれば、初期の頃は遭遇させていたこともあります。ごめんなさい。

ツールを使ってアウトラインの確認

HTML 5 Outliner

が便利です。ファイルのアップロードだけでなく、ソースを貼り付けやURLの読み込みにも対応しています。操作も「Outline This!」を押すだけなので、説明不要のお手軽さです。

また、Chromeを使っていれば、拡張機能で同じものが用意されています。

HTML5 Outliner - Chrome 拡張機能

extension html outline

ローカルで開発用サーバーを立ち上げて作業をすることも多い場合は、Chromeの拡張機能を使い、アウトライン化が適切に行えているのかを随時確認する方が効率的に作業できるのでオススメです。

対策の一つに加えよう

実際、これをするから検索上位表示になるという保証はどこにもありません。基本的にはコンテンツや他の施策との複合技です。
せっかく作成した記事やコンテンツのHTML内の情報を、正しく検索エンジンに拾ってもらうための施策です。

HTML5 を使っているなら、HTMLのアウトラインを見直して、ユーザーにもクローラーにも優しいサイトにすることが重要ですね。で、細かいHTML5の仕様とかは、要素で使えるrole属性とかも記載されている HTML5 情報サイト が見やすくて良いです。

そういえば、hgroupというすでに廃止されたタグもあったな。遠い昔のことのようです。

関連記事