プログラミング基礎知識

なぜ header main footer aside タグを使うのか?SEO 対策になるのか?

なぜ header main footer aside タグを使うのか?SEO 対策になるのか?

HTML5 から導入された header、main、footer、aside タグを使う理由を「もし自分でクローラーを作るとしたら」と言う観点から考えてみたいと思います。

※クローラーは過去に何度か作った経験があります。

クローラーの目的

クローラーを作る目的は、企業によって様々ではないかと思います。

ただ、多くは企業の営業目的になると思いますが、例えば、その企業の顧客になりそうな企業のリストを作成するためにクローラーを巡回させる…といった目的が多いのではないかと思います。
以前に僕が作ったときも 自社の営業のため 全国の店舗のホームページを収集するようなクローラーを作ったことがありました。

検索エンジン用クローラー

今回考えるのは、検索エンジン用のクローラーになります。
営業目的のクローラーであれば 会社名に加えて電話番号、メールアドレス、入力フォーム…などの収集が主要目的になりますが、検索エンジンのクローラーの場合には「そのページに書かれている独自コンテンツ」を取得することが最大のテーマになります。

クローラーの基本機能

クローラーの基本的な処理手順は、以下の通りとなります。

  1. 特定のウェブページの HTML を取得する
  2. 取得した HTML から a タグを分析して、そのページからリンクされているページをリストとして取得・保存する
  3. 必要なデータを収集する
  4. 保存しておいたリンクページに移動し、手順1. から同様の処理を行う

こんな感じでインターネットを順次巡回していきます。もちろん取得したデータの保存するためのデータベースも必要になります。

独自コンテンツを取得するには?

上記の基本的なクロール機能ができると、検索エンジン用クローラーとして必要な機能は「そのページで書かれていること」=「独自コンテンツ」を取得する…という作業です。

営業目的のクローラーであれば、a タグの他に form タグ、type=tel、mailto: などをうまく抽出することができれば目的は果たせるのですが、独自コンテンツを取得するとなると むしろ div タグや p タグといった それら以外のタグの方が重要になります。

例題

例えば [トップページ][商品紹介][会社案内][お問い合わせ] といったメニューがあるホームページの [商品紹介] ページをクロールした場合を考えてみます。

商品紹介ページ

[商品紹介ページ] 内部には、おそらくページ上部に [ヘッダー] があり、中段に [商品紹介] コンテンツ、下段に [フッター] … と、ざっくりそのようなことが書かれているだろうと予想されます。

では、ページ上部に [トップページ][商品紹介][会社案内][お問い合わせ] このような文字列が並んでいるからといって、そのページの独自コンテンツに「会社案内」が書かれている!?と認識するのは間違いですよね。

ただ、人間の頭でこのように考えれば きっと「[会社案内] はナビゲーションメニューなんだろう」とは予想できますが … コンピュータは何をもってそれをナビゲーションメニューと判断できるでしょうか?

もし仮に div タグで括り ul タグでナビゲーションメニューを書いていたら…その下に続く [商品紹介] コンテンツとの違いは?!もう主題がどれか…よくわからなくなってきますね、、汗

これが HTML4 以前のウェブサイトだったのです。
(ただおそらく Google は、他の [トップページ][会社案内][お問い合わせ] メニューもすべて取得して、それらの共通コードを「一部重複コンテンツ」として認識し、これらは [ナビゲーションメニュー] であろう…と判断したのだと思います)。

header タグ、nav タグの登場

とはいえ、インターネット上のすべてのページが 複数ページ内で完全に同一の [ナビゲーションメニュー] がコーディングされ「一部重複コンテンツ」であるか否かを判断することも … 簡単なことではありません。
(大抵のページには例外処理があり、完全に同一コードが重複しているとは限らないためです)

その結果 HTML5 から header タグ、nav タグ…が追加され「これらの中身はウェブサイト内の一部共通コンテンツですよ」とクローラーが完璧に理解できるタグ構造が定義された…という訳です。

もちろん main タグ、footer タグも同様で、main タグがあることで「どのコンテンツがウェブページの独自コンテンツなのか」を一目で見分けることが可能になりました。

SEO 対策になるのか?

では、header、main、footer、nav、article、aside タグなどを使用してコーディングすることが SEO 対策になるのか?といえば、それは Google 先生のみぞ知るところですが…おそらく、それらのタグをきちんと使っているサイトの方が div のみで書いているサイトと比較すると「条件によっては評価が高くなる」といったところではないかと思います。

ではその「条件」はなにかと言うと「コンテンツが全く同じ品質の場合」ということです。

理由は、Google はコンテンツを非常に重要視してますので、例えば main タグを使っているがコンテンツがしょーもないウェブページと div タグのみで作られているが コンテンツが非常に素晴らしいウェブページであれば…おそらく Google は後者を上位に上げるのではないか?と考えられるからです(実際のところはわかりません、、)。

ただし、コンテンツが全く同程度のサイトが複数あるとするなら…やはり HTML5 のタグをきちんと使っているサイトの方が「より新しい」とか「デザイン性に期待できる」とか…そういった理由で そちらを上位にはしますよね。そういう意味では SEO 対策になる…といえるのではないかと思います。

余談ですが…

上記は プログラミングの話しと似ているように思いますが、プログラミングを学んでいるエンジニアの方の中には「より新しい言語を学ぼう」と考えて “Python” を選択…される方もいらっしゃるかもしれません。

ただ、クライアント様にとっては Python で作られたしょーもないシステムと、PHP で作られた使い勝手の良いシステムと…どちらに開発費を支払いたいでしょうか?

※品質が全く同程度であったときに、はじめて “言語の将来性” なども考慮していくこと…のような気がします。

COMMENT

メールアドレスが公開されることはありません。