Zenn
😊

【ざっくり理解】SEO対策のためにHTMLタグとクローラーの関係を理解してみよう💡

2024/04/15に公開
HTML
SEO
#
検索エンジン
#
クローラー
tech

前置き

divタグだけでwebサイトを構成することはできます。
しかし、それだと検索上位には表示されません。なぜならクローラーの優先順位が大きく下がるからです。
クローラーとは、検索ワードを基に世界中のWebサイトを読み込み、検索表示の順位を決めるプログラムのことです。
まずは簡単に見比べてみましょう。

divタグだけで構成した場合

index.html
<div class="header">
  <div>
    <div class="header-logo">ヘッダーロゴ</div>
    <div class="navigation">ナビゲーション</div>
  </div>
</div>
<div class="main">
  <div class="list">
    <div>リスト</div>
    <div>リスト</div>
    <div>リスト</div>
    <div>リスト</div>
  </div>
</div>
<div class="footer">
  <div>フッター</div>
  <div class="contact-link"><a href="#">問い合わせ</a></div>
</div>

適宜HTMLタグを使用した場合

index.html
<header class="site-header">
  <div class="header-inner">
    <div class="header-logo">ヘッダーロゴ</div>
    <nav class="site-navigation">ナビゲーション</nav>
  </div>
</header>
<main class="main-content">
  <ul class="item-list">
    <li class="item">リスト</li>
    <li class="item">リスト</li>
    <li class="item">リスト</li>
    <li class="item">リスト</li>
  </ul>
</main>
<footer class="site-footer">
  <div class="footer-content">フッター</div>
  <a href="#" class="contact-link">問い合わせ</a>
</footer>

初学者のうちは「画面にちゃんと表示されるなら、どのタグ使っても良くね？」と思ってしまいそうですが、適切なHTMLタグを使用しないとクローラーの優先度が大きく下がり、SEOにも大きく影響してきます。

HTMLタグとクローラーの関係性

検索エンジンを構成する3つのプログラム

  1. Webサイトの情報（HTML,画像）を集めてデータベース化するクローラー
  2. クローラーが集めた情報を評価するプログラム
  3. 検索キーワードに対して②の評価に基づき検索結果を表示させるプログラム

クローラーの役割

クローラーは、Webサイトのリンクを辿って自動的にクローリング（徘徊）しています。
移動先のWebサイトのページを解析して、以下のようなファイルデータを収集します。

  • HTMl
  • CSS
  • JavaScript
  • PDF
  • img
    ...etc
    収集したファイルデータを、検索アルゴリズムが扱いやすいデータ変換し、データベースに登録します。
    このように、適切なHTMLタグを使用していないと、そもそもクローラーに徘徊してもらいにくくなり、サイトの評価が始まらないのです。

クローラビリティの改善方法

クローラーに検索されやすくすることを、クローラビリティの改善と言います。
今回は、グーグル検索エンジンを例にご紹介します💡

1、Googleにクロールをリクエストする

具体的にはGoogle Search Consoleというツールの「URL検査」という機能を使ってリクエストを送ることができます。

こちらを利用することで、サイトを新規作成したりコンテンツを更新したときなどに、速やかにクローリングされます。

2、URLの階層を3段までにする

階層の浅いサイトからクロールを実行します。なのでトップページからすべてのページに数クリックでアクセスできる設計すると良いかもしれません。もちろん大規模なWebサイトになってくると多重階層になってきますので、別の工夫が必要になってくるとは思います。

3、テキストリンクを設定する

画像をクリックさせてリンク遷移させる場合も多いですが、実は画像リンクよりもテキストリンクの方がクローリングされやすいです。かと言ってテキストリンクに寄せすぎてしまうと、サイトのUI・UXが悪化してしまいますので、アクセシビリティの観点からもバランスが必要となります。

最後に

今回は以上です！最後までご覧いただき、ありがとうございました！

Discussion