EN

クローラーとSEO：検索結果に出るまでの流れと、上位に出やすいHTML

前回の記事「CSR・SSR・SSGは『HTMLをいつ組み立てるか』の違い」では、HTMLを組み立てる場所とタイミングでCSR・SSR・SSGを整理しました。その中で「クローラーさん」に少しだけ登場してもらいましたが、クローラーそのものが何者なのか、なぜクローラーに読まれることが検索結果につながるのかは説明していませんでした。

この記事では、その抜けていた部分を次の順で埋めます。

  1. クローラーとは何か
  2. SEOとは何か
  3. なぜページが検索結果に表示されるのか
  4. どんなHTMLが検索で上位に出やすいか（SEO対策）

クローラーとは何か

クローラーは、Web上のページを自動で巡回して中身を集めてくるプログラムです。リンクをたどってページからページへ這い回る（crawl）ように動くので、こう呼ばれます。GoogleのクローラーはGooglebot、Microsoft BingのクローラーはBingbotという名前です。

やっていることは単純で、次の繰り返しです。

  1. URLにアクセスして、HTMLを受け取る
  2. HTMLから、ページの中身と、ほかのページへのリンクを読み取る
  3. 見つけたリンクを「次に見に行くURLのリスト」に加える

クローラーはどうやってページを見つけるか

入口は主に2つあります。

  • ほかのページからのリンク。すでに知っているページにリンクが貼られていれば、それをたどって新しいページにたどり着きます。
  • サイトマップ。サイトの持ち主が「このサイトにはこのURLがあります」と一覧にして渡すXMLファイルです。

サイトマップの場所は、サイトの直下に置くrobots.txtで伝えるのが一般的です。robots.txtはクローラー向けの案内板で、「どこを見てよいか」「サイトマップはどこか」を書いておきます。このブログのrobots.txtは次のとおりです。

User-agent: *
Allow: /

Sitemap: https://yomaru-tech.com/sitemap-index.xml

「すべてのクローラー（*）に、すべてのページ（/）の巡回を許可する。サイトマップはここにある」という意味です。

検索エンジン以外のクローラー

クローラーを動かしているのは検索エンジンだけではありません。XやSlackにURLを貼るとタイトルと画像つきのプレビューが出ますが、あれもSNS側のクローラーがページを取りに来て、HTMLの中のタグを読んだ結果です。前回の記事で、クローラーを「検索エンジンやSNSがWebページを自動で巡回させているプログラム」と紹介したのはこのためです。

クローラーはJavaScriptを実行するのか

前回の記事では、クローラーは「その場で調理が終わるのを待ってはくれない」と書きました。わかりやすさを優先した言い方だったので、ここで正確に補足します。

Googlebotは、JavaScriptを実行してページを組み立てる工程（レンダリング）を持っています。 ただしHTMLを受け取ってすぐではなく、いったん順番待ちの列に入り、あとから実行されます。その待ち時間は数秒のこともあれば、もっと長くかかることもあります。

一方、SNSのプレビュー用のクローラーなど、JavaScriptを実行せず、最初に受け取ったHTMLだけを読むクローラーも多くあります。CSRのページをこうしたクローラーが読むと、前回の図のとおり空の皿しか見えません。

まとめると、最初に返すHTMLに中身が入っていれば、どのクローラーにも待ち時間なしで確実に読んでもらえます。SSR・SSGが「検索に強い」と言われるのはこのためです。

SEOとは何か

SEOはSearch Engine Optimizationの略で、日本語では「検索エンジン最適化」と訳されます。検索した人に自分のページを見つけてもらいやすくするために、ページやサイトを整えることを指します。

SEOには大きく2つの面があります。

面やること例
技術面クローラーにページを正しく読んでもらう中身をHTMLに入れる、リンクをたどれるようにする、サイトマップを出す
中身の面検索した人の役に立つ内容を書く疑問に正面から答える、具体例を入れる、情報を新しく保つ

SEOというと「検索エンジンをうまくだます技術」のように聞こえるかもしれませんが、実際は逆です。Google自身が「検索エンジンのためではなく、人のためにページを作る」ことを基本方針として公開していて、検索エンジンをだます小手先の手法はむしろ評価を下げる原因になります（後述）。

なぜ検索結果に表示されるのか

Googleは、検索の仕組みをクロール → インデックス登録 → 検索結果の表示の3段階で説明しています。

検索の3段階。クロールでページを集め、インデックス登録で内容を整理して保存するところまでは検索される前に終わっている。検索されたときには、インデックスの中から検索語に合うページを選んで順番に並べる 検索される前から、ずっと続けている 検索されたとき 1. クロールページを集める 2. インデックス登録内容を整理して保存する 3. 検索結果の表示検索語に合う順に並べる 検索する人 検索語 インデックスに入ったページだけが、検索結果の候補になる

前回のレストランの例えを続けると、次のような流れです。

  1. クロール：クローラーさんが店を回って、料理の写真を撮ってくる
  2. インデックス登録：撮ってきた写真と説明を、分類してグルメガイド本に載せる
  3. 検索結果の表示：お客さんに「渋谷でおいしいラーメン」と聞かれたら、ガイド本の中から合う店を選び、おすすめ順に並べて見せる

ポイントは、検索されたその瞬間にWeb全体を探しに行っているわけではないことです。検索結果はあらかじめ作っておいたガイド本（インデックス）の中から選ばれます。つまり、ページが検索結果に出るのは、それがインデックスに入っているからです。

逆に言えば、次のようなページは検索結果に出ません。

  • どこからもリンクされておらず、サイトマップにもないので、クローラーに見つけてもらえない
  • 見つけてもらえても、中身が読み取れない（前回の記事のCSRの皿）
  • noindex（後述）が付いていて、インデックスに入れないよう指示されている

自分のページがインデックスに入っているかは、Googleが無料で提供しているGoogle Search Consoleの「URL検査」で確かめられます。

どんなHTMLが検索で上位に出やすいか

最初に断っておくと、HTMLを整えただけで順位が上がるわけではありません。順位を決める一番の要素は中身で、HTMLはその中身をクローラーに取りこぼしなく伝えるための手段です。そのうえで、効果がはっきりしているものを順に挙げます。

1. 中身を最初のHTMLに入れる

前回の記事の話そのものです。CSRでは、サーバーが最初に返すHTMLはほぼ空です。

<!-- CSR：最初に返るHTML。中身は、ブラウザがmain.jsを実行したあとで#appの中に入る -->
<body>
  <div id="app"></div>
  <script src="/main.js"></script>
</body>

クローラーにとって問題なのは、ここで返るHTMLがmain.jsを実行する前の状態だということです。JavaScriptを実行しないクローラーには、空の<div id="app"></div>しか読めません。

SSR・SSGなら、最初から中身が入っています。

<!-- SSR・SSG：最初に返るHTMLに、もう中身がある -->
<body>
  <article>
    <h1>CSR・SSR・SSGは「HTMLをいつ組み立てるか」の違い</h1>
    <p>WebページのHTMLをいつ、どこで組み立てるかには3つのやり方があります。</p>
  </article>
</body>

このHTMLを見ても、SSRで作ったのかSSGで作ったのかは区別がつきません。違うのは、このHTMLをアクセスのたびにサーバーで組み立てるか（SSR）、公開前に組み立てておくか（SSG）というタイミングだけで、返ってくるHTMLそのものは同じ形です。クローラーにとっては、どちらも「最初から中身が入ったHTML」です。

検索に出したいページは、SSRかSSGで作るのが確実です。

2. <title>と<meta name="description">を書く

<head>
  <title>CSR・SSR・SSGは「HTMLをいつ組み立てるか」の違い</title>
  <meta
    name="description"
    content="ブラウザ・サーバー・ビルド時のどこでHTMLを組み立てるか、という1つの軸でCSR・SSR・SSGを整理しました。"
  />
</head>
  • <title>は、検索結果に大きく出る見出しになります。ページごとに違う、内容が具体的にわかるものにします。全ページ同じ「ホーム」のようなタイトルでは、検索した人もGoogleも中身を判断できません。
  • <meta name="description">は、検索結果のタイトルの下に出る説明文に使われることがあります。順位を直接上げるものではありませんが、検索した人が「このページを開くか」を決める材料になります。

なお、昔よく使われた<meta name="keywords">は、Googleは順位づけに使っていません。書いても効果はありません。

3. 見出しで文書の構造を伝える

<h1>クローラーとSEO</h1>
  <h2>クローラーとは何か</h2>
    <h3>クローラーはどうやってページを見つけるか</h3>
  <h2>SEOとは何か</h2>

ページの主題を<h1>、その下の区切りを<h2>、さらにその下を<h3>と、階層どおりに使います。クローラーは見出しからページの構成と各部分の話題を読み取ります。「文字を大きくしたいから<h2>を使う」のような、見た目のための使い方はしません。見た目はCSSで調整します。

4. リンクは<a href>で書く

<!-- ✗ クローラーはたどれない -->
<span onclick="location.href='/posts/csr-ssr-ssg/'">前回の記事</span>

<!-- ✓ クローラーがたどれる -->
<a href="/posts/csr-ssr-ssg/">CSR・SSR・SSGの違いを解説した前回の記事</a>

Googlebotがたどるのは、href属性を持つ<a>要素のリンクです。クリックしたときにJavaScriptで画面を切り替えるだけの要素は、ブラウザ上ではリンクのように動いても、クローラーにはリンクとして見えません。リンク先のページが見つけてもらえなくなります。

リンクの文字（アンカーテキスト）も、「こちら」ではなく、リンク先の中身がわかる言葉にします。クローラーはこの文字を、リンク先が何のページかを知る手がかりにします。

5. 画像にはaltを付ける

<img src="/images/search-flow.png" alt="クロール、インデックス登録、検索結果の表示の3段階を示した図" />

クローラーは画像の中身を人と同じようには見られないので、altの文章で画像の内容を理解します。画像検索にも使われますし、画面読み上げソフトを使う人にも内容が伝わります。

6. 同じページが複数のURLで開けるならcanonicalを書く

https://example.com/posts/a/とhttps://example.com/posts/a/?utm_source=xのように、同じ中身が複数のURLで開けることはよくあります。放っておくと、どちらを検索結果に出すかをGoogleが推測することになります。

<link rel="canonical" href="https://example.com/posts/a/" />

canonicalで「このページの代表のURLはこれ」と伝えておくと、評価が1つのURLにまとまります。このブログでも、すべてのページにcanonicalを出しています。

7. 検索に出したくないページにはnoindexを書く

問い合わせ完了ページのように、検索から来る必要がないページもあります。

<meta name="robots" content="noindex" />

noindexは「このページをインデックスに入れないで」という指示です。このときrobots.txtでクロール自体を禁止してしまうと、クローラーがページを読めずnoindexにも気づけないので、URLだけが検索結果に残ることがあります。インデックスから外したいときは、クロールは許可したままnoindexを書きます。

8. 構造化データで「何のページか」を伝える

<script type="application/ld+json">
  {
    "@context": "https://schema.org",
    "@type": "BlogPosting",
    "headline": "CSR・SSR・SSGは「HTMLをいつ組み立てるか」の違い",
    "datePublished": "2026-09-06"
  }
</script>

構造化データは、「これはブログ記事で、タイトルはこれ、公開日はこれ」といった情報を、決まった形式（schema.org）で書いたものです。レシピなら調理時間、商品なら価格や評価、というように種類ごとに書ける項目が決まっています。

条件を満たすと、検索結果に評価の星や価格などが付いた表示（リッチリザルト）になることがあります。ただし、付けたからといって必ずそう表示されるわけではなく、順位を直接上げるものでもありません。

9. スマホで見やすく、速く表示する

GoogleはWebページを、主にスマホ版のGooglebotで読んでいます（モバイルファーストインデックス）。スマホで見づらいページは不利です。まず<head>に次の1行を入れ、画面幅に合わせて表示されるようにします。

<meta name="viewport" content="width=device-width, initial-scale=1" />

表示の速さについては、GoogleがCore Web Vitalsという3つの指標を公開しています。

指標何を測るか
LCP（Largest Contentful Paint）ページの一番大きな要素が表示されるまでの時間
INP（Interaction to Next Paint）クリックなどの操作に、画面が反応するまでの時間
CLS（Cumulative Layout Shift）読み込み中に、レイアウトがどれだけずれるか

ここでもSSGは有利です。完成したHTMLをそのまま返すので、最初の表示が速くなります。

逆効果になる書き方

最後に、やってはいけないことです。Googleのスパムに関するポリシーでは、次のような手法を禁止しています。

  • キーワードの詰め込み：同じ語を不自然に何度も並べる
  • 隠しテキスト：背景と同じ色の文字など、人には見えずクローラーにだけ読ませる文章
  • クローキング：クローラーと人とで、違う中身を見せる

こうした手法は、順位が下がったり、検索結果から外されたりする原因になります。

まとめ

  • クローラーは、リンクやサイトマップをたどってWebページを集めてくるプログラム。JavaScriptを実行しないクローラーも多く、Googlebotも実行は後回しになる。
  • SEOは、検索した人にページを見つけてもらいやすくするための工夫。クローラーに正しく読ませる技術面と、人の役に立つ中身の面がある。
  • ページが検索結果に出るのは、インデックスに入っているから。クロール → インデックス登録 → 検索結果の表示の順に進む。
  • 上位に出やすいHTMLは、中身を正しく伝えられるHTML。最初のHTMLに中身を入れる、<title>と見出しを整える、リンクは<a href>で書く、といった基本が中心になる。

前回の記事で「検索に出したいページはSSRかSSG」と書いた理由は、ここまでの話にあります。検索結果は、クローラーが読み取ってインデックスに入れた内容の中からしか選ばれません。だから、最初のHTMLに中身が入っていることが、ほかのSEO対策すべての前提になります。