低関与ウェブの静的生成とHTMLキャッシュ基準

低関与型ウェブの検索クロールを助けるには、初期HTMLに主要な本文を含める必要があります。公開コンテンツには、静的生成とCDNのHTMLキャッシュが役立ちます。ただし、TTFB 0.8秒の達成だけでは、検索結果への表示を保証できません。

TTFBの数値の根拠は、2025年11月18日に更新されたweb.devのドキュメントです。

低関与型ウェブで最初に確認する技術的な条件

この記事では、必要な情報を短時間で確認するウェブサイトを低関与型ウェブと呼びます。レンダリングと転送速度は、こうしたサイトで技術的に点検する項目です。ただし、この2項目だけで検索結果への表示の違いをすべて説明できるわけではありません。

検索クロールは、ロボットがページを取得する過程です。インデックス登録は、取得した内容を検索対象として処理する過程です。Googleは、クロールされたすべてのページがインデックスに登録されるわけではないと説明しています。Googleのクロールバジェットに関するガイド

×

コンテンツの修正後は、再生成したHTMLがキャッシュにも反映されているか確認する必要があります。

Reactページが空のHTMLに見える理由

Reactページの初期HTMLは、実装方法によって異なります。ブラウザで本文を生成する方式をCSRと呼びます。この方式では、最初のレスポンスに本文がなく、実行用コードだけが含まれる場合があります。

GoogleはChromiumを使ってJavaScriptを実行します。ページは、クロール後にレンダリングを待つ場合があります。ブロックされたページやファイルは、レンダリングの対象から除外される場合があります。すべてのロボットがJavaScriptを実行するわけでもありません。GoogleのJavaScript SEOの基本ガイド

そのため、画面が正常に表示されるという事実だけで、クロールの状態を判断しないでください。まず、初期レスポンスに本文があるかを確認してください。Googleがレンダリングした結果は、Search ConsoleのURL検査で確認できます。

静的生成とサーバーレンダリングの比較

公開する本文の更新方法に応じて、HTMLの生成方法を選べます。静的生成は、リクエストを受ける前にHTMLを生成する方式です。サーバーレンダリングは、リクエストを受けたときにサーバーでHTMLを生成します。Reactでも、こうした方式を使えます。web.devのレンダリング方式ガイド

静的生成とCDNは、それぞれ役割が異なります。静的生成は、HTMLを生成するタイミングについての選択です。CDNは、コンテンツを配信し、再利用する仕組みです。サーバーで生成したHTMLも、条件を満たせばCDNにキャッシュできます。

TTFB 0.8秒は何を意味しますか？

TTFBは、ページ遷移の開始からレスポンスの最初のバイトが届くまでの時間です。web.devは、ほとんどのサイトに対して0.8秒以下を大まかな目標として示しています。これは、ページ全体が表示されるまでの時間とは異なります。TTFB自体はCore Web Vitalsの項目でもありません。web.devのTTFBの説明

TTFBには、サーバー内部の処理以外の遅延も含まれます。DNSルックアップは、ドメインの接続先アドレスを調べる過程です。TCPとTLSの接続にも時間がかかる場合があります。別のアドレスへ転送するリダイレクトも影響します。

• DNSルックアップと接続準備の時間
• ネットワークを通じてリクエストとレスポンスが移動する時間
• オリジンサーバーでのデータ取得とHTML生成の時間
• 最初のレスポンスまでに発生するリダイレクトの時間

サーバーがソウルにあるという事実だけで、0.8秒を超えると断定することはできません。接続する場所や接続を再利用するかどうかによって、結果は変わります。Googleのクローラーは、主に米国のIPアドレスを使います。ただし、ほかの国のIPアドレスからアクセスする場合もあります。Googleクローラーの技術的な特性

継続的なレスポンスの遅延は、Googleのクロール処理能力に影響します。サーバーエラーも、クロール量が減る原因になります。だからといって、0.8秒を一度超えるとクロールが停止するというルールではありません。クロールの需要には、ページの品質や更新頻度も関わります。Googleのクロールバジェットに関するガイド

CDNでHTMLキャッシュを確認する必要がある理由

Cloudflare CDNは、デフォルトではHTMLをキャッシュしません。画像やCSSがキャッシュされていても、本文のドキュメントは別途確認する必要があります。ほかのCDNのデフォルトの動作は、そのサービスのドキュメントで確認してください。

Cloudflare CDNは、デフォルトではHTMLやJSONをキャッシュしません。

Cloudflare, Default cache behavior

この文は、HTMLとJSONがデフォルトのキャッシュ対象ではないことを意味します。公開HTMLは、Cache Rulesでキャッシュ対象に含められます。実際に保存されるかどうかには、レスポンスヘッダーやCookieなどの条件も関わります。Cloudflareのデフォルトのキャッシュ動作

キャッシュは、保存しておいたレスポンスを再利用する機能です。CDNに接続したからといって、すべてのドキュメントが世界中に即座に複製されるわけではありません。Cloudflareは、リクエストを処理するデータセンターにコンテンツをキャッシュします。キャッシュにないリクエストでは、オリジンサーバーへの問い合わせが必要になる場合があります。Cloudflareのキャッシュの導入ガイド

公開HTMLにキャッシュルールを適用するときは、パーソナライズされたページを除外してください。Cloudflareは、動的HTMLのキャッシュによって、ほかの人の情報が配信されるおそれがあると警告しています。ログインページやアカウントページはキャッシュしないでください。CloudflareのCache Everythingの注意事項

ページの条件別のキャッシュ適用基準

訪問者に同じ内容を表示するかどうかが、キャッシュの範囲を決める出発点です。公開された説明文は、共通で再利用しやすい対象です。ログイン状態によって内容が変わるレスポンスは、別に処理する必要があります。

リアルタイムデータを後から読み込むと、静的な本文を維持しやすくなります。ただし、検索に必要な主要な内容をすべて後回しにしないでください。初期HTMLを提供する目的と矛盾するおそれがあるためです。

よくある間違いと確認基準

技術の名前や設定画面だけで結果を判断すると、エラーを見落としやすくなります。実際のHTMLとレスポンスヘッダーをあわせて確認してください。以下は、それぞれ区別する必要がある状態です。

CloudflareのCF-Cache-Statusは、キャッシュ状態を示すヘッダーです。HITは、キャッシュ内にレスポンスが見つかったことを意味します。MISSは、リクエスト時にキャッシュになく、オリジンから取得したことを意味します。DYNAMICは、キャッシュ対象として処理されていない状態です。Cloudflareのキャッシュレスポンスの説明

コンテンツ修正後のキャッシュ更新

静的ファイルとCDNキャッシュは、修正内容を反映するまでの流れも設計する必要があります。オリジンを修正しても、以前のキャッシュが残っていれば古い内容が配信されます。HTMLとJSONを一緒に公開する場合は、両形式の内容も揃える必要があります。

以下は、ドキュメントとデータファイルを一緒に運用するときの点検手順です。

1. 元のデータで変更内容を確定してください。
2. 同じ変更版からHTMLとデータファイルを再生成してください。
3. 新しいファイルをデプロイした後、変更したURLのキャッシュを更新してください。
4. 各URLを再度リクエストし、修正内容が一致しているか確認してください。

Cloudflareは、URL単位でのキャッシュ削除を推奨しています。キャッシュ削除は、保存されたレスポンスを取り除く作業です。静的HTMLを再生成する作業は、別途必要です。そのため、ファイル生成とキャッシュ更新を同じデプロイ手順に組み込んでください。Cloudflareのキャッシュ削除ガイド

更新間隔は、そのコンテンツで許容できる情報の遅延に合わせて決めてください。説明文とリアルタイムの数値に、同じ周期を適用する必要はありません。キャッシュの有効期間を短くするだけでは、すべての更新の問題を解決できません。

多言語サイトのhreflangの基準

hreflangは、同じコンテンツの言語・地域別のアドレスを関連付ける情報です。翻訳文を作成する機能ではありません。Googleが訪問者に適した言語版を見つけるのを助けます。

Googleは、これらの方法を同等に扱います。そのため、HTML内にだけ記述しなければならないわけではありません。各言語のドキュメントには、自分自身を含め、代替言語のドキュメントを示す必要があります。対応するページ同士の関連付けも確認してください。Googleの多言語ページに関するガイド

デプロイ結果の確認手順

デプロイ後は、本文の配信とキャッシュの動作を別々に検証してください。速度の測定値には、測定地域とキャッシュ状態も記録してください。次の順序で確認すると、問題のある箇所を区別しやすくなります。

1. ブラウザの開発者ツールでHTMLドキュメントのレスポンスを確認してください。主要な本文がレスポンスに含まれているか調べてください。
2. Search ConsoleのURL検査で、レンダリングされたHTMLを確認してください。実際のインデックス処理状態も別途点検してください。
3. HTMLレスポンスのキャッシュヘッダーを確認してください。CloudflareではCF-Cache-Statusを読み取ってください。
4. 主なアクセス地域から同じドキュメントを測定してください。キャッシュにないリクエストと、キャッシュにヒットしたリクエストを区別してください。
5. コンテンツを修正した後、更新結果を確認してください。ログインページがキャッシュから除外されているかも点検してください。

Cloudflareは、動的HTMLを過度にキャッシュすると、ログインが正常に動作しなくなるおそれがあると警告しています。ログインフォームと認証済みページはキャッシュしないでください。修正後は、認証Cookieが維持されているかも確認してください。Cloudflareのログイン問題に関するガイド

AIコーディングに伝える実装条件

AIには、技術の名前とともに、検証できる結果を求めてください。初期HTMLの内容と、キャッシュから除外する範囲を明記する方法が役立ちます。以下の文面は、公開ナレッジページを作る場合の依頼例です。

公開ナレッジページの主要な本文を初期HTMLに含めてください。
公開ドキュメントは静的生成を優先して検討してください。
変動データの更新方法を別途説明してください。
CDNのHTMLキャッシュが適用されているか確認してください。
ログイン・アカウント・決済ページは共有キャッシュから除外してください。
コンテンツの修正時には、静的ファイルの再生成とキャッシュ更新を連動させてください。
多言語ページがある場合は、hreflangの関連付けを設定してください。
初期HTML、キャッシュ状態、修正の反映状況を確認する方法を示してください。