【ざっくり理解】SEO対策のためにHTMLタグとクローラーの関係を理解してみよう💡
前置き
divタグだけでwebサイトを構成することはできます。
しかし、それだと検索上位には表示されません。なぜならクローラーの優先順位が大きく下がるからです。
クローラーとは、検索ワードを基に世界中のWebサイトを読み込み、検索表示の順位を決めるプログラムのことです。
まずは簡単に見比べてみましょう。
divタグだけで構成した場合
<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タグを使用した場合
<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つのプログラム
- Webサイトの情報（HTML,画像）を集めてデータベース化するクローラー
- クローラーが集めた情報を評価するプログラム
- 検索キーワードに対して②の評価に基づき検索結果を表示させるプログラム
クローラーの役割
クローラーは、Webサイトのリンクを辿って自動的にクローリング（徘徊）しています。
移動先のWebサイトのページを解析して、以下のようなファイルデータを収集します。
- HTMl
- CSS
- JavaScript
- img
...etc
収集したファイルデータを、検索アルゴリズムが扱いやすいデータ変換し、データベースに登録します。
このように、適切なHTMLタグを使用していないと、そもそもクローラーに徘徊してもらいにくくなり、サイトの評価が始まらないのです。
クローラビリティの改善方法
クローラーに検索されやすくすることを、クローラビリティの改善と言います。
今回は、グーグル検索エンジンを例にご紹介します💡
1、Googleにクロールをリクエストする
具体的にはGoogle Search Consoleというツールの「URL検査」という機能を使ってリクエストを送ることができます。
こちらを利用することで、サイトを新規作成したりコンテンツを更新したときなどに、速やかにクローリングされます。
2、URLの階層を3段までにする
階層の浅いサイトからクロールを実行します。なのでトップページからすべてのページに数クリックでアクセスできる設計すると良いかもしれません。もちろん大規模なWebサイトになってくると多重階層になってきますので、別の工夫が必要になってくるとは思います。
3、テキストリンクを設定する
画像をクリックさせてリンク遷移させる場合も多いですが、実は画像リンクよりもテキストリンクの方がクローリングされやすいです。かと言ってテキストリンクに寄せすぎてしまうと、サイトのUI・UXが悪化してしまいますので、アクセシビリティの観点からもバランスが必要となります。
最後に
今回は以上です！最後までご覧いただき、ありがとうございました！
Discussion