{"content_id":"nz3psdk2a0","slug":"low-involvement-web-static-generation-html-cache","locale":"ja","schema_type":"TechArticle","category":"knowledge_base","category_name":"ナレッジベース","title":"低関与ウェブの静的生成とHTMLキャッシュ基準","summary":"低関与ウェブの技術設計では、初期HTMLに含まれる本文とCDNのHTMLキャッシュを併せて確認する必要があります。TTFB 0.8秒は性能改善の参考値で、キャッシュの適用範囲と修正後の更新も設計の対象です。","sponsorship_disclosure":null,"affiliate_disclosure":null,"commerce_disclosure":null,"author":{"name":"Injoys 編集部","url":"https://injoys.com/ko/about"},"key_points":["初期HTMLに本文の主要部分を含めると、JavaScriptの実行への依存を減らせます。","GoogleはJavaScriptを実行するため、Reactを使っているという理由だけで検索エンジンのクロールが失敗すると判断することはできません。","TTFB 0.8秒以下は性能改善の参考値であり、ページ全体の読み込み時間を意味するものではありません。","Cloudflare CDNは標準ではHTMLをキャッシュしないため、公開ページのキャッシュルールを確認する必要があります。","HTMLキャッシュには、ログインページの除外とコンテンツ修正後の更新ポリシーが必要です。"],"content_markdown":"低関与型ウェブの検索クロールを助けるには、初期HTMLに主要な本文を含める必要があります。公開コンテンツには、静的生成とCDNのHTMLキャッシュが役立ちます。ただし、TTFB 0.8秒の達成だけでは、検索結果への表示を保証できません。\n\nTTFBの数値の根拠は、2025年11月18日に更新されたweb.devのドキュメントです。\n\n## 低関与型ウェブで最初に確認する技術的な条件\n\nこの記事では、必要な情報を短時間で確認するウェブサイトを低関与型ウェブと呼びます。レンダリングと転送速度は、こうしたサイトで技術的に点検する項目です。ただし、この2項目だけで検索結果への表示の違いをすべて説明できるわけではありません。\n\n検索クロールは、ロボットがページを取得する過程です。インデックス登録は、取得した内容を検索対象として処理する過程です。Googleは、クロールされたすべてのページがインデックスに登録されるわけではないと説明しています。[Googleのクロールバジェットに関するガイド](https://developers.google.com/crawling/docs/crawl-budget)\n\n| 点検項目 | 確認する内容 | 解決したい問題 |\n| --- | --- | --- |\n| 初期HTML | タイトルと主要な本文がレスポンスに含まれているか | 本文を読むための追加実行への依存 |\n| レンダリング | JavaScriptの実行後に内容が正常に表示されるか | 実行エラーやブロックによる欠落 |\n| TTFB | 最初のレスポンスが届くまでにかかる時間 | 接続とサーバーレスポンスの遅延 |\n| HTMLキャッシュ | 公開ドキュメントをCDNで再利用しているか | オリジンサーバーへ繰り返しリクエストするコスト |\n| インデックスの状態 | GoogleがそのURLをどのように処理したか | クロールの成功と検索への登録を混同する問題 |\n\n## Reactページが空のHTMLに見える理由\n\nReactページの初期HTMLは、実装方法によって異なります。ブラウザで本文を生成する方式をCSRと呼びます。この方式では、最初のレスポンスに本文がなく、実行用コードだけが含まれる場合があります。\n\nGoogleはChromiumを使ってJavaScriptを実行します。ページは、クロール後にレンダリングを待つ場合があります。ブロックされたページやファイルは、レンダリングの対象から除外される場合があります。すべてのロボットがJavaScriptを実行するわけでもありません。[GoogleのJavaScript SEOの基本ガイド](https://developers.google.com/search/docs/crawling-indexing/javascript/javascript-seo-basics)\n\nそのため、画面が正常に表示されるという事実だけで、クロールの状態を判断しないでください。まず、初期レスポンスに本文があるかを確認してください。Googleがレンダリングした結果は、Search ConsoleのURL検査で確認できます。\n\n## 静的生成とサーバーレンダリングの比較\n\n公開する本文の更新方法に応じて、HTMLの生成方法を選べます。静的生成は、リクエストを受ける前にHTMLを生成する方式です。サーバーレンダリングは、リクエストを受けたときにサーバーでHTMLを生成します。Reactでも、こうした方式を使えます。[web.devのレンダリング方式ガイド](https://web.dev/articles/rendering-on-the-web)\n\n| 方式 | HTMLを生成するタイミング | 検討に適した状況 | 運用上の確認点 |\n| --- | --- | --- | --- |\n| クライアントレンダリング CSR | ブラウザでJavaScriptを実行するとき | ユーザー操作が多い画面 | 本文表示までに必要な実行とリクエスト |\n| 静的生成 SSG | ビルド時やコンテンツ生成時 | 訪問者に同じ内容を表示する公開ドキュメント | 修正後の再生成とデプロイ |\n| サーバーレンダリング SSR | ページリクエストを処理するとき | リクエストごとに最新の内容を組み立てる画面 | データ取得とHTML生成の時間 |\n| プリレンダリング | デプロイ前にアプリを実行してHTMLを取得するとき | 既存アプリの初期本文をあらかじめ提供するとき | その後の機能に必要なJavaScript |\n\n静的生成とCDNは、それぞれ役割が異なります。静的生成は、HTMLを生成するタイミングについての選択です。CDNは、コンテンツを配信し、再利用する仕組みです。サーバーで生成したHTMLも、条件を満たせばCDNにキャッシュできます。\n\n## TTFB 0.8秒は何を意味しますか？\n\nTTFBは、ページ遷移の開始からレスポンスの最初のバイトが届くまでの時間です。web.devは、ほとんどのサイトに対して**0.8秒以下**を大まかな目標として示しています。これは、ページ全体が表示されるまでの時間とは異なります。TTFB自体はCore Web Vitalsの項目でもありません。[web.devのTTFBの説明](https://web.dev/articles/ttfb)\n\nTTFBには、サーバー内部の処理以外の遅延も含まれます。DNSルックアップは、ドメインの接続先アドレスを調べる過程です。TCPとTLSの接続にも時間がかかる場合があります。別のアドレスへ転送するリダイレクトも影響します。\n\n- DNSルックアップと接続準備の時間\n- ネットワークを通じてリクエストとレスポンスが移動する時間\n- オリジンサーバーでのデータ取得とHTML生成の時間\n- 最初のレスポンスまでに発生するリダイレクトの時間\n\nサーバーがソウルにあるという事実だけで、0.8秒を超えると断定することはできません。接続する場所や接続を再利用するかどうかによって、結果は変わります。Googleのクローラーは、主に米国のIPアドレスを使います。ただし、ほかの国のIPアドレスからアクセスする場合もあります。[Googleクローラーの技術的な特性](https://developers.google.com/crawling/docs/crawlers-fetchers/overview-google-crawlers?hl=en)\n\n継続的なレスポンスの遅延は、Googleのクロール処理能力に影響します。サーバーエラーも、クロール量が減る原因になります。だからといって、0.8秒を一度超えるとクロールが停止するというルールではありません。クロールの需要には、ページの品質や更新頻度も関わります。[Googleのクロールバジェットに関するガイド](https://developers.google.com/crawling/docs/crawl-budget)\n\n## CDNでHTMLキャッシュを確認する必要がある理由\n\nCloudflare CDNは、デフォルトではHTMLをキャッシュしません。画像やCSSがキャッシュされていても、本文のドキュメントは別途確認する必要があります。ほかのCDNのデフォルトの動作は、そのサービスのドキュメントで確認してください。\n\n\u003e Cloudflare CDNは、デフォルトではHTMLやJSONをキャッシュしません。\n\u003e\n\u003e Cloudflare, Default cache behavior\n\nこの文は、HTMLとJSONがデフォルトのキャッシュ対象ではないことを意味します。公開HTMLは、Cache Rulesでキャッシュ対象に含められます。実際に保存されるかどうかには、レスポンスヘッダーやCookieなどの条件も関わります。[Cloudflareのデフォルトのキャッシュ動作](https://developers.cloudflare.com/cache/concepts/default-cache-behavior/)\n\nキャッシュは、保存しておいたレスポンスを再利用する機能です。CDNに接続したからといって、すべてのドキュメントが世界中に即座に複製されるわけではありません。Cloudflareは、リクエストを処理するデータセンターにコンテンツをキャッシュします。キャッシュにないリクエストでは、オリジンサーバーへの問い合わせが必要になる場合があります。[Cloudflareのキャッシュの導入ガイド](https://developers.cloudflare.com/cache/get-started/)\n\n公開HTMLにキャッシュルールを適用するときは、パーソナライズされたページを除外してください。Cloudflareは、動的HTMLのキャッシュによって、ほかの人の情報が配信されるおそれがあると警告しています。ログインページやアカウントページはキャッシュしないでください。[CloudflareのCache Everythingの注意事項](https://developers.cloudflare.com/cache/how-to/cache-rules/examples/cache-everything/)\n\n## ページの条件別のキャッシュ適用基準\n\n訪問者に同じ内容を表示するかどうかが、キャッシュの範囲を決める出発点です。公開された説明文は、共通で再利用しやすい対象です。ログイン状態によって内容が変わるレスポンスは、別に処理する必要があります。\n\n| ページの条件 | 検討する構成 | あわせて確認する事項 |\n| --- | --- | --- |\n| 訪問者に同じ説明文を提供 | 静的生成と公開HTMLキャッシュ | 修正後の再生成・キャッシュ更新 |\n| 公開本文に頻繁に変わる数値を含む | 本文と変動データの更新方法を分離 | 数値の基準時点と失敗時の表示 |\n| リクエスト時点の最新の公開情報が必要 | サーバーレンダリングと条件付きキャッシュを検討 | 許容できる情報の遅延 |\n| ログイン・アカウント・決済画面 | 共有HTMLキャッシュから除外 | 認証Cookieとユーザーごとのレスポンス |\n| 言語別の公開ドキュメントを提供 | 言語別のURLと各ドキュメントのキャッシュ | 翻訳文の関連付けと言語別の更新 |\n\nリアルタイムデータを後から読み込むと、静的な本文を維持しやすくなります。ただし、検索に必要な主要な内容をすべて後回しにしないでください。初期HTMLを提供する目的と矛盾するおそれがあるためです。\n\n## よくある間違いと確認基準\n\n技術の名前や設定画面だけで結果を判断すると、エラーを見落としやすくなります。実際のHTMLとレスポンスヘッダーをあわせて確認してください。以下は、それぞれ区別する必要がある状態です。\n\n| よくある判断 | 確認すべき基準 |\n| --- | --- |\n| Reactサイトは検索ロボットには読み取り不可 | 初期HTMLとGoogleのレンダリング結果 |\n| TTFBが0.8秒なら画面もすべて表示済み | 最初のレスポンスから本文表示までにかかる時間 |\n| CDNに接続したのでHTMLもキャッシュ済み | HTMLリクエストのキャッシュ状態 |\n| 静的ファイルなら常に最新の内容 | 最後に生成した時点とデプロイされた内容 |\n| 高速に応答すれば検索への登録も完了 | Search Consoleのインデックス処理状態 |\n| キャッシュヒットの結果1つでグローバルな速度を判断 | 接続地域とキャッシュヒットの有無ごとの測定結果 |\n\nCloudflareの`CF-Cache-Status`は、キャッシュ状態を示すヘッダーです。`HIT`は、キャッシュ内にレスポンスが見つかったことを意味します。`MISS`は、リクエスト時にキャッシュになく、オリジンから取得したことを意味します。`DYNAMIC`は、キャッシュ対象として処理されていない状態です。[Cloudflareのキャッシュレスポンスの説明](https://developers.cloudflare.com/cache/concepts/cache-responses/)\n\n## コンテンツ修正後のキャッシュ更新\n\n静的ファイルとCDNキャッシュは、修正内容を反映するまでの流れも設計する必要があります。オリジンを修正しても、以前のキャッシュが残っていれば古い内容が配信されます。HTMLとJSONを一緒に公開する場合は、両形式の内容も揃える必要があります。\n\n以下は、ドキュメントとデータファイルを一緒に運用するときの点検手順です。\n\n1. 元のデータで変更内容を確定してください。\n2. 同じ変更版からHTMLとデータファイルを再生成してください。\n3. 新しいファイルをデプロイした後、変更したURLのキャッシュを更新してください。\n4. 各URLを再度リクエストし、修正内容が一致しているか確認してください。\n\nCloudflareは、URL単位でのキャッシュ削除を推奨しています。キャッシュ削除は、保存されたレスポンスを取り除く作業です。静的HTMLを再生成する作業は、別途必要です。そのため、ファイル生成とキャッシュ更新を同じデプロイ手順に組み込んでください。[Cloudflareのキャッシュ削除ガイド](https://developers.cloudflare.com/cache/how-to/purge-cache/)\n\n更新間隔は、そのコンテンツで許容できる情報の遅延に合わせて決めてください。説明文とリアルタイムの数値に、同じ周期を適用する必要はありません。キャッシュの有効期間を短くするだけでは、すべての更新の問題を解決できません。\n\n## 多言語サイトのhreflangの基準\n\n`hreflang`は、同じコンテンツの言語・地域別のアドレスを関連付ける情報です。翻訳文を作成する機能ではありません。Googleが訪問者に適した言語版を見つけるのを助けます。\n\n| 実装場所 | 表示方法 | 選ぶときの確認点 |\n| --- | --- | --- |\n| HTML | ドキュメントの`head`に代替言語のリンクを表示 | 各ページのテンプレートで管理できるか |\n| HTTPヘッダー | レスポンスの`Link`ヘッダーに表示 | サーバーでヘッダーを管理できるか |\n| サイトマップ | 言語別URLの関係をサイトマップに表示 | ドキュメントの一覧を一括管理できるか |\n\nGoogleは、これらの方法を同等に扱います。そのため、HTML内にだけ記述しなければならないわけではありません。各言語のドキュメントには、自分自身を含め、代替言語のドキュメントを示す必要があります。対応するページ同士の関連付けも確認してください。[Googleの多言語ページに関するガイド](https://developers.google.com/search/docs/specialty/international/localized-versions)\n\n## デプロイ結果の確認手順\n\nデプロイ後は、本文の配信とキャッシュの動作を別々に検証してください。速度の測定値には、測定地域とキャッシュ状態も記録してください。次の順序で確認すると、問題のある箇所を区別しやすくなります。\n\n1. ブラウザの開発者ツールでHTMLドキュメントのレスポンスを確認してください。主要な本文がレスポンスに含まれているか調べてください。\n2. Search ConsoleのURL検査で、レンダリングされたHTMLを確認してください。実際のインデックス処理状態も別途点検してください。\n3. HTMLレスポンスのキャッシュヘッダーを確認してください。Cloudflareでは`CF-Cache-Status`を読み取ってください。\n4. 主なアクセス地域から同じドキュメントを測定してください。キャッシュにないリクエストと、キャッシュにヒットしたリクエストを区別してください。\n5. コンテンツを修正した後、更新結果を確認してください。ログインページがキャッシュから除外されているかも点検してください。\n\nCloudflareは、動的HTMLを過度にキャッシュすると、ログインが正常に動作しなくなるおそれがあると警告しています。ログインフォームと認証済みページはキャッシュしないでください。修正後は、認証Cookieが維持されているかも確認してください。[Cloudflareのログイン問題に関するガイド](https://developers.cloudflare.com/cache/troubleshooting/dynamic-content-and-login-issues/)\n\n## AIコーディングに伝える実装条件\n\nAIには、技術の名前とともに、検証できる結果を求めてください。初期HTMLの内容と、キャッシュから除外する範囲を明記する方法が役立ちます。以下の文面は、公開ナレッジページを作る場合の依頼例です。\n\n```text\n公開ナレッジページの主要な本文を初期HTMLに含めてください。\n公開ドキュメントは静的生成を優先して検討してください。\n変動データの更新方法を別途説明してください。\nCDNのHTMLキャッシュが適用されているか確認してください。\nログイン・アカウント・決済ページは共有キャッシュから除外してください。\nコンテンツの修正時には、静的ファイルの再生成とキャッシュ更新を連動させてください。\n多言語ページがある場合は、hreflangの関連付けを設定してください。\n初期HTML、キャッシュ状態、修正の反映状況を確認する方法を示してください。\n```","content_html":"\u003cp\u003e低関与型ウェブの検索クロールを助けるには、初期HTMLに主要な本文を含める必要があります。公開コンテンツには、静的生成とCDNのHTMLキャッシュが役立ちます。ただし、TTFB 0.8秒の達成だけでは、検索結果への表示を保証できません。\u003c/p\u003e\n\u003cp\u003eTTFBの数値の根拠は、2025年11月18日に更新されたweb.devのドキュメントです。\u003c/p\u003e\n\u003ch2\u003e\n\u003ca href=\"#%E4%BD%8E%E9%96%A2%E4%B8%8E%E5%9E%8B%E3%82%A6%E3%82%A7%E3%83%96%E3%81%A7%E6%9C%80%E5%88%9D%E3%81%AB%E7%A2%BA%E8%AA%8D%E3%81%99%E3%82%8B%E6%8A%80%E8%A1%93%E7%9A%84%E3%81%AA%E6%9D%A1%E4%BB%B6\" class=\"anchor\" id=\"低関与型ウェブで最初に確認する技術的な条件\"\u003e\u003c/a\u003e低関与型ウェブで最初に確認する技術的な条件\u003c/h2\u003e\n\u003cp\u003eこの記事では、必要な情報を短時間で確認するウェブサイトを低関与型ウェブと呼びます。レンダリングと転送速度は、こうしたサイトで技術的に点検する項目です。ただし、この2項目だけで検索結果への表示の違いをすべて説明できるわけではありません。\u003c/p\u003e\n\u003cp\u003e検索クロールは、ロボットがページを取得する過程です。インデックス登録は、取得した内容を検索対象として処理する過程です。Googleは、クロールされたすべてのページがインデックスに登録されるわけではないと説明しています。\u003ca href=\"https://developers.google.com/crawling/docs/crawl-budget\"\u003eGoogleのクロールバジェットに関するガイド\u003c/a\u003e\u003c/p\u003e\n\u003cdiv class=\"overflow-x-auto\"\u003e\u003ctable\u003e\n\u003cthead\u003e\n\u003ctr\u003e\n\u003cth\u003e点検項目\u003c/th\u003e\n\u003cth\u003e確認する内容\u003c/th\u003e\n\u003cth\u003e解決したい問題\u003c/th\u003e\n\u003c/tr\u003e\n\u003c/thead\u003e\n\u003ctbody\u003e\n\u003ctr\u003e\n\u003ctd data-label=\"点検項目\"\u003e初期HTML\u003c/td\u003e\n\u003ctd data-label=\"確認する内容\"\u003eタイトルと主要な本文がレスポンスに含まれているか\u003c/td\u003e\n\u003ctd data-label=\"解決したい問題\"\u003e本文を読むための追加実行への依存\u003c/td\u003e\n\u003c/tr\u003e\n\u003ctr\u003e\n\u003ctd data-label=\"点検項目\"\u003eレンダリング\u003c/td\u003e\n\u003ctd data-label=\"確認する内容\"\u003eJavaScriptの実行後に内容が正常に表示されるか\u003c/td\u003e\n\u003ctd data-label=\"解決したい問題\"\u003e実行エラーやブロックによる欠落\u003c/td\u003e\n\u003c/tr\u003e\n\u003ctr\u003e\n\u003ctd data-label=\"点検項目\"\u003eTTFB\u003c/td\u003e\n\u003ctd data-label=\"確認する内容\"\u003e最初のレスポンスが届くまでにかかる時間\u003c/td\u003e\n\u003ctd data-label=\"解決したい問題\"\u003e接続とサーバーレスポンスの遅延\u003c/td\u003e\n\u003c/tr\u003e\n\u003ctr\u003e\n\u003ctd data-label=\"点検項目\"\u003eHTMLキャッシュ\u003c/td\u003e\n\u003ctd data-label=\"確認する内容\"\u003e公開ドキュメントをCDNで再利用しているか\u003c/td\u003e\n\u003ctd data-label=\"解決したい問題\"\u003eオリジンサーバーへ繰り返しリクエストするコスト\u003c/td\u003e\n\u003c/tr\u003e\n\u003ctr\u003e\n\u003ctd data-label=\"点検項目\"\u003eインデックスの状態\u003c/td\u003e\n\u003ctd data-label=\"確認する内容\"\u003eGoogleがそのURLをどのように処理したか\u003c/td\u003e\n\u003ctd data-label=\"解決したい問題\"\u003eクロールの成功と検索への登録を混同する問題\u003c/td\u003e\n\u003c/tr\u003e\n\u003c/tbody\u003e\n\u003c/table\u003e\u003c/div\u003e\n\u003ch2\u003e\n\u003ca href=\"#react%E3%83%9A%E3%83%BC%E3%82%B8%E3%81%8C%E7%A9%BA%E3%81%AEhtml%E3%81%AB%E8%A6%8B%E3%81%88%E3%82%8B%E7%90%86%E7%94%B1\" class=\"anchor\" id=\"reactページが空のhtmlに見える理由\"\u003e\u003c/a\u003eReactページが空のHTMLに見える理由\u003c/h2\u003e\n\u003cp\u003eReactページの初期HTMLは、実装方法によって異なります。ブラウザで本文を生成する方式をCSRと呼びます。この方式では、最初のレスポンスに本文がなく、実行用コードだけが含まれる場合があります。\u003c/p\u003e\n\u003cp\u003eGoogleはChromiumを使ってJavaScriptを実行します。ページは、クロール後にレンダリングを待つ場合があります。ブロックされたページやファイルは、レンダリングの対象から除外される場合があります。すべてのロボットがJavaScriptを実行するわけでもありません。\u003ca href=\"https://developers.google.com/search/docs/crawling-indexing/javascript/javascript-seo-basics\"\u003eGoogleのJavaScript SEOの基本ガイド\u003c/a\u003e\u003c/p\u003e\n\u003cp\u003eそのため、画面が正常に表示されるという事実だけで、クロールの状態を判断しないでください。まず、初期レスポンスに本文があるかを確認してください。Googleがレンダリングした結果は、Search ConsoleのURL検査で確認できます。\u003c/p\u003e\n\u003ch2\u003e\n\u003ca href=\"#%E9%9D%99%E7%9A%84%E7%94%9F%E6%88%90%E3%81%A8%E3%82%B5%E3%83%BC%E3%83%90%E3%83%BC%E3%83%AC%E3%83%B3%E3%83%80%E3%83%AA%E3%83%B3%E3%82%B0%E3%81%AE%E6%AF%94%E8%BC%83\" class=\"anchor\" id=\"静的生成とサーバーレンダリングの比較\"\u003e\u003c/a\u003e静的生成とサーバーレンダリングの比較\u003c/h2\u003e\n\u003cp\u003e公開する本文の更新方法に応じて、HTMLの生成方法を選べます。静的生成は、リクエストを受ける前にHTMLを生成する方式です。サーバーレンダリングは、リクエストを受けたときにサーバーでHTMLを生成します。Reactでも、こうした方式を使えます。\u003ca href=\"https://web.dev/articles/rendering-on-the-web\"\u003eweb.devのレンダリング方式ガイド\u003c/a\u003e\u003c/p\u003e\n\u003cdiv class=\"overflow-x-auto\"\u003e\u003ctable\u003e\n\u003cthead\u003e\n\u003ctr\u003e\n\u003cth\u003e方式\u003c/th\u003e\n\u003cth\u003eHTMLを生成するタイミング\u003c/th\u003e\n\u003cth\u003e検討に適した状況\u003c/th\u003e\n\u003cth\u003e運用上の確認点\u003c/th\u003e\n\u003c/tr\u003e\n\u003c/thead\u003e\n\u003ctbody\u003e\n\u003ctr\u003e\n\u003ctd data-label=\"方式\"\u003eクライアントレンダリング CSR\u003c/td\u003e\n\u003ctd data-label=\"HTMLを生成するタイミング\"\u003eブラウザでJavaScriptを実行するとき\u003c/td\u003e\n\u003ctd data-label=\"検討に適した状況\"\u003eユーザー操作が多い画面\u003c/td\u003e\n\u003ctd data-label=\"運用上の確認点\"\u003e本文表示までに必要な実行とリクエスト\u003c/td\u003e\n\u003c/tr\u003e\n\u003ctr\u003e\n\u003ctd data-label=\"方式\"\u003e静的生成 SSG\u003c/td\u003e\n\u003ctd data-label=\"HTMLを生成するタイミング\"\u003eビルド時やコンテンツ生成時\u003c/td\u003e\n\u003ctd data-label=\"検討に適した状況\"\u003e訪問者に同じ内容を表示する公開ドキュメント\u003c/td\u003e\n\u003ctd data-label=\"運用上の確認点\"\u003e修正後の再生成とデプロイ\u003c/td\u003e\n\u003c/tr\u003e\n\u003ctr\u003e\n\u003ctd data-label=\"方式\"\u003eサーバーレンダリング SSR\u003c/td\u003e\n\u003ctd data-label=\"HTMLを生成するタイミング\"\u003eページリクエストを処理するとき\u003c/td\u003e\n\u003ctd data-label=\"検討に適した状況\"\u003eリクエストごとに最新の内容を組み立てる画面\u003c/td\u003e\n\u003ctd data-label=\"運用上の確認点\"\u003eデータ取得とHTML生成の時間\u003c/td\u003e\n\u003c/tr\u003e\n\u003ctr\u003e\n\u003ctd data-label=\"方式\"\u003eプリレンダリング\u003c/td\u003e\n\u003ctd data-label=\"HTMLを生成するタイミング\"\u003eデプロイ前にアプリを実行してHTMLを取得するとき\u003c/td\u003e\n\u003ctd data-label=\"検討に適した状況\"\u003e既存アプリの初期本文をあらかじめ提供するとき\u003c/td\u003e\n\u003ctd data-label=\"運用上の確認点\"\u003eその後の機能に必要なJavaScript\u003c/td\u003e\n\u003c/tr\u003e\n\u003c/tbody\u003e\n\u003c/table\u003e\u003c/div\u003e\n\u003cp\u003e静的生成とCDNは、それぞれ役割が異なります。静的生成は、HTMLを生成するタイミングについての選択です。CDNは、コンテンツを配信し、再利用する仕組みです。サーバーで生成したHTMLも、条件を満たせばCDNにキャッシュできます。\u003c/p\u003e\n\u003ch2\u003e\n\u003ca href=\"#ttfb-08%E7%A7%92%E3%81%AF%E4%BD%95%E3%82%92%E6%84%8F%E5%91%B3%E3%81%97%E3%81%BE%E3%81%99%E3%81%8B\" class=\"anchor\" id=\"ttfb-08秒は何を意味しますか\"\u003e\u003c/a\u003eTTFB 0.8秒は何を意味しますか？\u003c/h2\u003e\n\u003cp\u003eTTFBは、ページ遷移の開始からレスポンスの最初のバイトが届くまでの時間です。web.devは、ほとんどのサイトに対して\u003cstrong\u003e0.8秒以下\u003c/strong\u003eを大まかな目標として示しています。これは、ページ全体が表示されるまでの時間とは異なります。TTFB自体はCore Web Vitalsの項目でもありません。\u003ca href=\"https://web.dev/articles/ttfb\"\u003eweb.devのTTFBの説明\u003c/a\u003e\u003c/p\u003e\n\u003cp\u003eTTFBには、サーバー内部の処理以外の遅延も含まれます。DNSルックアップは、ドメインの接続先アドレスを調べる過程です。TCPとTLSの接続にも時間がかかる場合があります。別のアドレスへ転送するリダイレクトも影響します。\u003c/p\u003e\n\u003cul\u003e\n\u003cli\u003eDNSルックアップと接続準備の時間\u003c/li\u003e\n\u003cli\u003eネットワークを通じてリクエストとレスポンスが移動する時間\u003c/li\u003e\n\u003cli\u003eオリジンサーバーでのデータ取得とHTML生成の時間\u003c/li\u003e\n\u003cli\u003e最初のレスポンスまでに発生するリダイレクトの時間\u003c/li\u003e\n\u003c/ul\u003e\n\u003cp\u003eサーバーがソウルにあるという事実だけで、0.8秒を超えると断定することはできません。接続する場所や接続を再利用するかどうかによって、結果は変わります。Googleのクローラーは、主に米国のIPアドレスを使います。ただし、ほかの国のIPアドレスからアクセスする場合もあります。\u003ca href=\"https://developers.google.com/crawling/docs/crawlers-fetchers/overview-google-crawlers?hl=en\"\u003eGoogleクローラーの技術的な特性\u003c/a\u003e\u003c/p\u003e\n\u003cp\u003e継続的なレスポンスの遅延は、Googleのクロール処理能力に影響します。サーバーエラーも、クロール量が減る原因になります。だからといって、0.8秒を一度超えるとクロールが停止するというルールではありません。クロールの需要には、ページの品質や更新頻度も関わります。\u003ca href=\"https://developers.google.com/crawling/docs/crawl-budget\"\u003eGoogleのクロールバジェットに関するガイド\u003c/a\u003e\u003c/p\u003e\n\u003ch2\u003e\n\u003ca href=\"#cdn%E3%81%A7html%E3%82%AD%E3%83%A3%E3%83%83%E3%82%B7%E3%83%A5%E3%82%92%E7%A2%BA%E8%AA%8D%E3%81%99%E3%82%8B%E5%BF%85%E8%A6%81%E3%81%8C%E3%81%82%E3%82%8B%E7%90%86%E7%94%B1\" class=\"anchor\" id=\"cdnでhtmlキャッシュを確認する必要がある理由\"\u003e\u003c/a\u003eCDNでHTMLキャッシュを確認する必要がある理由\u003c/h2\u003e\n\u003cp\u003eCloudflare CDNは、デフォルトではHTMLをキャッシュしません。画像やCSSがキャッシュされていても、本文のドキュメントは別途確認する必要があります。ほかのCDNのデフォルトの動作は、そのサービスのドキュメントで確認してください。\u003c/p\u003e\n\u003cblockquote\u003e\n\u003cp\u003eCloudflare CDNは、デフォルトではHTMLやJSONをキャッシュしません。\u003c/p\u003e\n\u003cp\u003eCloudflare, Default cache behavior\u003c/p\u003e\n\u003c/blockquote\u003e\n\u003cp\u003eこの文は、HTMLとJSONがデフォルトのキャッシュ対象ではないことを意味します。公開HTMLは、Cache Rulesでキャッシュ対象に含められます。実際に保存されるかどうかには、レスポンスヘッダーやCookieなどの条件も関わります。\u003ca href=\"https://developers.cloudflare.com/cache/concepts/default-cache-behavior/\"\u003eCloudflareのデフォルトのキャッシュ動作\u003c/a\u003e\u003c/p\u003e\n\u003cp\u003eキャッシュは、保存しておいたレスポンスを再利用する機能です。CDNに接続したからといって、すべてのドキュメントが世界中に即座に複製されるわけではありません。Cloudflareは、リクエストを処理するデータセンターにコンテンツをキャッシュします。キャッシュにないリクエストでは、オリジンサーバーへの問い合わせが必要になる場合があります。\u003ca href=\"https://developers.cloudflare.com/cache/get-started/\"\u003eCloudflareのキャッシュの導入ガイド\u003c/a\u003e\u003c/p\u003e\n\u003cp\u003e公開HTMLにキャッシュルールを適用するときは、パーソナライズされたページを除外してください。Cloudflareは、動的HTMLのキャッシュによって、ほかの人の情報が配信されるおそれがあると警告しています。ログインページやアカウントページはキャッシュしないでください。\u003ca href=\"https://developers.cloudflare.com/cache/how-to/cache-rules/examples/cache-everything/\"\u003eCloudflareのCache Everythingの注意事項\u003c/a\u003e\u003c/p\u003e\n\u003ch2\u003e\n\u003ca href=\"#%E3%83%9A%E3%83%BC%E3%82%B8%E3%81%AE%E6%9D%A1%E4%BB%B6%E5%88%A5%E3%81%AE%E3%82%AD%E3%83%A3%E3%83%83%E3%82%B7%E3%83%A5%E9%81%A9%E7%94%A8%E5%9F%BA%E6%BA%96\" class=\"anchor\" id=\"ページの条件別のキャッシュ適用基準\"\u003e\u003c/a\u003eページの条件別のキャッシュ適用基準\u003c/h2\u003e\n\u003cp\u003e訪問者に同じ内容を表示するかどうかが、キャッシュの範囲を決める出発点です。公開された説明文は、共通で再利用しやすい対象です。ログイン状態によって内容が変わるレスポンスは、別に処理する必要があります。\u003c/p\u003e\n\u003cdiv class=\"overflow-x-auto\"\u003e\u003ctable\u003e\n\u003cthead\u003e\n\u003ctr\u003e\n\u003cth\u003eページの条件\u003c/th\u003e\n\u003cth\u003e検討する構成\u003c/th\u003e\n\u003cth\u003eあわせて確認する事項\u003c/th\u003e\n\u003c/tr\u003e\n\u003c/thead\u003e\n\u003ctbody\u003e\n\u003ctr\u003e\n\u003ctd data-label=\"ページの条件\"\u003e訪問者に同じ説明文を提供\u003c/td\u003e\n\u003ctd data-label=\"検討する構成\"\u003e静的生成と公開HTMLキャッシュ\u003c/td\u003e\n\u003ctd data-label=\"あわせて確認する事項\"\u003e修正後の再生成・キャッシュ更新\u003c/td\u003e\n\u003c/tr\u003e\n\u003ctr\u003e\n\u003ctd data-label=\"ページの条件\"\u003e公開本文に頻繁に変わる数値を含む\u003c/td\u003e\n\u003ctd data-label=\"検討する構成\"\u003e本文と変動データの更新方法を分離\u003c/td\u003e\n\u003ctd data-label=\"あわせて確認する事項\"\u003e数値の基準時点と失敗時の表示\u003c/td\u003e\n\u003c/tr\u003e\n\u003ctr\u003e\n\u003ctd data-label=\"ページの条件\"\u003eリクエスト時点の最新の公開情報が必要\u003c/td\u003e\n\u003ctd data-label=\"検討する構成\"\u003eサーバーレンダリングと条件付きキャッシュを検討\u003c/td\u003e\n\u003ctd data-label=\"あわせて確認する事項\"\u003e許容できる情報の遅延\u003c/td\u003e\n\u003c/tr\u003e\n\u003ctr\u003e\n\u003ctd data-label=\"ページの条件\"\u003eログイン・アカウント・決済画面\u003c/td\u003e\n\u003ctd data-label=\"検討する構成\"\u003e共有HTMLキャッシュから除外\u003c/td\u003e\n\u003ctd data-label=\"あわせて確認する事項\"\u003e認証Cookieとユーザーごとのレスポンス\u003c/td\u003e\n\u003c/tr\u003e\n\u003ctr\u003e\n\u003ctd data-label=\"ページの条件\"\u003e言語別の公開ドキュメントを提供\u003c/td\u003e\n\u003ctd data-label=\"検討する構成\"\u003e言語別のURLと各ドキュメントのキャッシュ\u003c/td\u003e\n\u003ctd data-label=\"あわせて確認する事項\"\u003e翻訳文の関連付けと言語別の更新\u003c/td\u003e\n\u003c/tr\u003e\n\u003c/tbody\u003e\n\u003c/table\u003e\u003c/div\u003e\n\u003cp\u003eリアルタイムデータを後から読み込むと、静的な本文を維持しやすくなります。ただし、検索に必要な主要な内容をすべて後回しにしないでください。初期HTMLを提供する目的と矛盾するおそれがあるためです。\u003c/p\u003e\n\u003ch2\u003e\n\u003ca href=\"#%E3%82%88%E3%81%8F%E3%81%82%E3%82%8B%E9%96%93%E9%81%95%E3%81%84%E3%81%A8%E7%A2%BA%E8%AA%8D%E5%9F%BA%E6%BA%96\" class=\"anchor\" id=\"よくある間違いと確認基準\"\u003e\u003c/a\u003eよくある間違いと確認基準\u003c/h2\u003e\n\u003cp\u003e技術の名前や設定画面だけで結果を判断すると、エラーを見落としやすくなります。実際のHTMLとレスポンスヘッダーをあわせて確認してください。以下は、それぞれ区別する必要がある状態です。\u003c/p\u003e\n\u003cdiv class=\"overflow-x-auto\"\u003e\u003ctable\u003e\n\u003cthead\u003e\n\u003ctr\u003e\n\u003cth\u003eよくある判断\u003c/th\u003e\n\u003cth\u003e確認すべき基準\u003c/th\u003e\n\u003c/tr\u003e\n\u003c/thead\u003e\n\u003ctbody\u003e\n\u003ctr\u003e\n\u003ctd data-label=\"よくある判断\"\u003eReactサイトは検索ロボットには読み取り不可\u003c/td\u003e\n\u003ctd data-label=\"確認すべき基準\"\u003e初期HTMLとGoogleのレンダリング結果\u003c/td\u003e\n\u003c/tr\u003e\n\u003ctr\u003e\n\u003ctd data-label=\"よくある判断\"\u003eTTFBが0.8秒なら画面もすべて表示済み\u003c/td\u003e\n\u003ctd data-label=\"確認すべき基準\"\u003e最初のレスポンスから本文表示までにかかる時間\u003c/td\u003e\n\u003c/tr\u003e\n\u003ctr\u003e\n\u003ctd data-label=\"よくある判断\"\u003eCDNに接続したのでHTMLもキャッシュ済み\u003c/td\u003e\n\u003ctd data-label=\"確認すべき基準\"\u003eHTMLリクエストのキャッシュ状態\u003c/td\u003e\n\u003c/tr\u003e\n\u003ctr\u003e\n\u003ctd data-label=\"よくある判断\"\u003e静的ファイルなら常に最新の内容\u003c/td\u003e\n\u003ctd data-label=\"確認すべき基準\"\u003e最後に生成した時点とデプロイされた内容\u003c/td\u003e\n\u003c/tr\u003e\n\u003ctr\u003e\n\u003ctd data-label=\"よくある判断\"\u003e高速に応答すれば検索への登録も完了\u003c/td\u003e\n\u003ctd data-label=\"確認すべき基準\"\u003eSearch Consoleのインデックス処理状態\u003c/td\u003e\n\u003c/tr\u003e\n\u003ctr\u003e\n\u003ctd data-label=\"よくある判断\"\u003eキャッシュヒットの結果1つでグローバルな速度を判断\u003c/td\u003e\n\u003ctd data-label=\"確認すべき基準\"\u003e接続地域とキャッシュヒットの有無ごとの測定結果\u003c/td\u003e\n\u003c/tr\u003e\n\u003c/tbody\u003e\n\u003c/table\u003e\u003c/div\u003e\n\u003cp\u003eCloudflareの\u003ccode\u003eCF-Cache-Status\u003c/code\u003eは、キャッシュ状態を示すヘッダーです。\u003ccode\u003eHIT\u003c/code\u003eは、キャッシュ内にレスポンスが見つかったことを意味します。\u003ccode\u003eMISS\u003c/code\u003eは、リクエスト時にキャッシュになく、オリジンから取得したことを意味します。\u003ccode\u003eDYNAMIC\u003c/code\u003eは、キャッシュ対象として処理されていない状態です。\u003ca href=\"https://developers.cloudflare.com/cache/concepts/cache-responses/\"\u003eCloudflareのキャッシュレスポンスの説明\u003c/a\u003e\u003c/p\u003e\n\u003ch2\u003e\n\u003ca href=\"#%E3%82%B3%E3%83%B3%E3%83%86%E3%83%B3%E3%83%84%E4%BF%AE%E6%AD%A3%E5%BE%8C%E3%81%AE%E3%82%AD%E3%83%A3%E3%83%83%E3%82%B7%E3%83%A5%E6%9B%B4%E6%96%B0\" class=\"anchor\" id=\"コンテンツ修正後のキャッシュ更新\"\u003e\u003c/a\u003eコンテンツ修正後のキャッシュ更新\u003c/h2\u003e\n\u003cp\u003e静的ファイルとCDNキャッシュは、修正内容を反映するまでの流れも設計する必要があります。オリジンを修正しても、以前のキャッシュが残っていれば古い内容が配信されます。HTMLとJSONを一緒に公開する場合は、両形式の内容も揃える必要があります。\u003c/p\u003e\n\u003cp\u003e以下は、ドキュメントとデータファイルを一緒に運用するときの点検手順です。\u003c/p\u003e\n\u003col\u003e\n\u003cli\u003e元のデータで変更内容を確定してください。\u003c/li\u003e\n\u003cli\u003e同じ変更版からHTMLとデータファイルを再生成してください。\u003c/li\u003e\n\u003cli\u003e新しいファイルをデプロイした後、変更したURLのキャッシュを更新してください。\u003c/li\u003e\n\u003cli\u003e各URLを再度リクエストし、修正内容が一致しているか確認してください。\u003c/li\u003e\n\u003c/ol\u003e\n\u003cp\u003eCloudflareは、URL単位でのキャッシュ削除を推奨しています。キャッシュ削除は、保存されたレスポンスを取り除く作業です。静的HTMLを再生成する作業は、別途必要です。そのため、ファイル生成とキャッシュ更新を同じデプロイ手順に組み込んでください。\u003ca href=\"https://developers.cloudflare.com/cache/how-to/purge-cache/\"\u003eCloudflareのキャッシュ削除ガイド\u003c/a\u003e\u003c/p\u003e\n\u003cp\u003e更新間隔は、そのコンテンツで許容できる情報の遅延に合わせて決めてください。説明文とリアルタイムの数値に、同じ周期を適用する必要はありません。キャッシュの有効期間を短くするだけでは、すべての更新の問題を解決できません。\u003c/p\u003e\n\u003ch2\u003e\n\u003ca href=\"#%E5%A4%9A%E8%A8%80%E8%AA%9E%E3%82%B5%E3%82%A4%E3%83%88%E3%81%AEhreflang%E3%81%AE%E5%9F%BA%E6%BA%96\" class=\"anchor\" id=\"多言語サイトのhreflangの基準\"\u003e\u003c/a\u003e多言語サイトのhreflangの基準\u003c/h2\u003e\n\u003cp\u003e\u003ccode\u003ehreflang\u003c/code\u003eは、同じコンテンツの言語・地域別のアドレスを関連付ける情報です。翻訳文を作成する機能ではありません。Googleが訪問者に適した言語版を見つけるのを助けます。\u003c/p\u003e\n\u003cdiv class=\"overflow-x-auto\"\u003e\u003ctable\u003e\n\u003cthead\u003e\n\u003ctr\u003e\n\u003cth\u003e実装場所\u003c/th\u003e\n\u003cth\u003e表示方法\u003c/th\u003e\n\u003cth\u003e選ぶときの確認点\u003c/th\u003e\n\u003c/tr\u003e\n\u003c/thead\u003e\n\u003ctbody\u003e\n\u003ctr\u003e\n\u003ctd data-label=\"実装場所\"\u003eHTML\u003c/td\u003e\n\u003ctd data-label=\"表示方法\"\u003eドキュメントの\u003ccode\u003ehead\u003c/code\u003eに代替言語のリンクを表示\u003c/td\u003e\n\u003ctd data-label=\"選ぶときの確認点\"\u003e各ページのテンプレートで管理できるか\u003c/td\u003e\n\u003c/tr\u003e\n\u003ctr\u003e\n\u003ctd data-label=\"実装場所\"\u003eHTTPヘッダー\u003c/td\u003e\n\u003ctd data-label=\"表示方法\"\u003eレスポンスの\u003ccode\u003eLink\u003c/code\u003eヘッダーに表示\u003c/td\u003e\n\u003ctd data-label=\"選ぶときの確認点\"\u003eサーバーでヘッダーを管理できるか\u003c/td\u003e\n\u003c/tr\u003e\n\u003ctr\u003e\n\u003ctd data-label=\"実装場所\"\u003eサイトマップ\u003c/td\u003e\n\u003ctd data-label=\"表示方法\"\u003e言語別URLの関係をサイトマップに表示\u003c/td\u003e\n\u003ctd data-label=\"選ぶときの確認点\"\u003eドキュメントの一覧を一括管理できるか\u003c/td\u003e\n\u003c/tr\u003e\n\u003c/tbody\u003e\n\u003c/table\u003e\u003c/div\u003e\n\u003cp\u003eGoogleは、これらの方法を同等に扱います。そのため、HTML内にだけ記述しなければならないわけではありません。各言語のドキュメントには、自分自身を含め、代替言語のドキュメントを示す必要があります。対応するページ同士の関連付けも確認してください。\u003ca href=\"https://developers.google.com/search/docs/specialty/international/localized-versions\"\u003eGoogleの多言語ページに関するガイド\u003c/a\u003e\u003c/p\u003e\n\u003ch2\u003e\n\u003ca href=\"#%E3%83%87%E3%83%97%E3%83%AD%E3%82%A4%E7%B5%90%E6%9E%9C%E3%81%AE%E7%A2%BA%E8%AA%8D%E6%89%8B%E9%A0%86\" class=\"anchor\" id=\"デプロイ結果の確認手順\"\u003e\u003c/a\u003eデプロイ結果の確認手順\u003c/h2\u003e\n\u003cp\u003eデプロイ後は、本文の配信とキャッシュの動作を別々に検証してください。速度の測定値には、測定地域とキャッシュ状態も記録してください。次の順序で確認すると、問題のある箇所を区別しやすくなります。\u003c/p\u003e\n\u003col\u003e\n\u003cli\u003eブラウザの開発者ツールでHTMLドキュメントのレスポンスを確認してください。主要な本文がレスポンスに含まれているか調べてください。\u003c/li\u003e\n\u003cli\u003eSearch ConsoleのURL検査で、レンダリングされたHTMLを確認してください。実際のインデックス処理状態も別途点検してください。\u003c/li\u003e\n\u003cli\u003eHTMLレスポンスのキャッシュヘッダーを確認してください。Cloudflareでは\u003ccode\u003eCF-Cache-Status\u003c/code\u003eを読み取ってください。\u003c/li\u003e\n\u003cli\u003e主なアクセス地域から同じドキュメントを測定してください。キャッシュにないリクエストと、キャッシュにヒットしたリクエストを区別してください。\u003c/li\u003e\n\u003cli\u003eコンテンツを修正した後、更新結果を確認してください。ログインページがキャッシュから除外されているかも点検してください。\u003c/li\u003e\n\u003c/ol\u003e\n\u003cp\u003eCloudflareは、動的HTMLを過度にキャッシュすると、ログインが正常に動作しなくなるおそれがあると警告しています。ログインフォームと認証済みページはキャッシュしないでください。修正後は、認証Cookieが維持されているかも確認してください。\u003ca href=\"https://developers.cloudflare.com/cache/troubleshooting/dynamic-content-and-login-issues/\"\u003eCloudflareのログイン問題に関するガイド\u003c/a\u003e\u003c/p\u003e\n\u003ch2\u003e\n\u003ca href=\"#ai%E3%82%B3%E3%83%BC%E3%83%87%E3%82%A3%E3%83%B3%E3%82%B0%E3%81%AB%E4%BC%9D%E3%81%88%E3%82%8B%E5%AE%9F%E8%A3%85%E6%9D%A1%E4%BB%B6\" class=\"anchor\" id=\"aiコーディングに伝える実装条件\"\u003e\u003c/a\u003eAIコーディングに伝える実装条件\u003c/h2\u003e\n\u003cp\u003eAIには、技術の名前とともに、検証できる結果を求めてください。初期HTMLの内容と、キャッシュから除外する範囲を明記する方法が役立ちます。以下の文面は、公開ナレッジページを作る場合の依頼例です。\u003c/p\u003e\n\u003cpre\u003e\u003ccode\u003e\u003cspan\u003e公開ナレッジページの主要な本文を初期HTMLに含めてください。\n\u003c/span\u003e\u003cspan\u003e公開ドキュメントは静的生成を優先して検討してください。\n\u003c/span\u003e\u003cspan\u003e変動データの更新方法を別途説明してください。\n\u003c/span\u003e\u003cspan\u003eCDNのHTMLキャッシュが適用されているか確認してください。\n\u003c/span\u003e\u003cspan\u003eログイン・アカウント・決済ページは共有キャッシュから除外してください。\n\u003c/span\u003e\u003cspan\u003eコンテンツの修正時には、静的ファイルの再生成とキャッシュ更新を連動させてください。\n\u003c/span\u003e\u003cspan\u003e多言語ページがある場合は、hreflangの関連付けを設定してください。\n\u003c/span\u003e\u003cspan\u003e初期HTML、キャッシュ状態、修正の反映状況を確認する方法を示してください。\n\u003c/span\u003e\u003c/code\u003e\u003c/pre\u003e\n","tags":["AI開発","コンテンツ収益化","技術戦略","開発ツール"],"faqs":[{"question":"低関与ウェブは特定のフレームワークで作る必要がありますか？","answer":"特定のフレームワークが必須というわけではありません。主要な本文が初期HTMLに含まれているか確認してください。公開コンテンツのキャッシュと更新の方法もあわせて検討する必要があります。"},{"question":"GoogleはJavaScriptを実行しないのですか？","answer":"GoogleはChromiumでJavaScriptを実行します。ただし、レンダリングの待ち時間やブロックされたリソースが処理に影響する場合があります。初期HTMLに本文を含めると、追加の実行への依存を減らせます。"},{"question":"Reactで作ったサイトも静的生成できますか？","answer":"Reactでも静的HTMLを生成できます。サーバーでHTMLを作る方法にも対応しています。Reactを使っているかどうかだけで、初期HTMLの内容を判断することはできません。"},{"question":"TTFBが0.8秒以下なら、ページ全体が表示されたということですか？","answer":"TTFBは、応答の最初のバイトが届くまでの時間です。画像のダウンロードや画面の構成は、その後も続く場合があります。ページ全体の読み込み時間とは区別する必要があります。"},{"question":"TTFBが0.8秒を超えると、Google検索から除外されますか？","answer":"0.8秒は、web.devが示したおおよそのパフォーマンス目標です。これを超えると検索から除外されるというルールではありません。継続的な応答の遅延やサーバーエラーは、クロールの処理能力に影響する場合があります。"},{"question":"韓国のサーバーを使うと、グローバルサイトには不利ですか？","answer":"遠く離れた場所からアクセスするユーザーには、ネットワークの遅延が発生する場合があります。ただし、場所だけで特定の応答時間を断定することはできません。主なアクセス地域での実測値で判断してください。"},{"question":"Cloudflareを接続すると、HTMLも自動でキャッシュされますか？","answer":"Cloudflare CDNは、デフォルトではHTMLとJSONをキャッシュしません。公開HTMLに適用するCache Rulesを確認してください。ルールを適用した後は、応答ヘッダーで実際のキャッシュ状態を確認する必要があります。"},{"question":"CDNキャッシュにない最初のリクエストも、常に速いのですか？","answer":"キャッシュにないリクエストでは、オリジンサーバーから応答を取得する必要がある場合があります。そのため、キャッシュにヒットしたリクエストとは遅延時間が異なる場合があります。2つの状態を分けて測定してください。"},{"question":"ログインページにもHTMLキャッシュを適用してよいですか？","answer":"ログインページや認証済みのHTMLはキャッシュしないでください。Cloudflareは、過度なキャッシュによってログインが正常に動作しなくなるおそれがあると警告しています。ユーザーごとの情報が別の訪問者に渡るリスクもあります。"},{"question":"静的サイトの記事を修正したのに、以前の内容が表示される場合はどうすればよいですか？","answer":"まず、新しいHTMLが生成され、デプロイされたか確認してください。その後、変更したURLのCDNキャッシュを更新してください。キャッシュを削除するだけでは、静的ファイルは再生成されません。"},{"question":"hreflangはHTMLにだけ記述する必要がありますか？","answer":"Googleは、HTML、HTTPヘッダー、サイトマップによる方法に対応しています。3つの方法は、Googleの観点では同等です。運用しやすい方法を選び、言語ごとのリンクを一貫して維持してください。"},{"question":"小規模なサイトでも、クロールバジェットを重点的に管理する必要がありますか？","answer":"Googleのクロールバジェットに関する案内は、主に規模が大きく、頻繁に更新されるサイトを対象としています。ページ数が多くなければ、サイトマップの更新とインデックス登録レポートの確認から始めてください。サーバーエラーや本文の欠落がある場合は、その問題を先に解決してください。"}],"sources":[{"url":"https://developers.google.com/search/docs/crawling-indexing/javascript/javascript-seo-basics","title":"Google Search Central: JavaScript SEO の基本を理解する","type":"source"},{"url":"https://web.dev/articles/rendering-on-the-web","title":"web.dev: ウェブでのレンダリング","type":"source"},{"url":"https://web.dev/articles/ttfb","title":"web.dev: Time to First Byte (TTFB)、2025年11月18日更新","type":"data_point"},{"url":"https://developers.google.com/crawling/docs/crawlers-fetchers/overview-google-crawlers?hl=en","title":"Google: Google のクローラーとフェッチャーの概要","type":"source"},{"url":"https://developers.google.com/crawling/docs/crawl-budget","title":"Google: クロールバジェットを最適化する","type":"source"},{"url":"https://developers.cloudflare.com/cache/concepts/default-cache-behavior/","title":"Cloudflare: デフォルトのキャッシュ動作","type":"source"},{"url":"https://developers.cloudflare.com/cache/get-started/","title":"Cloudflare Cache: 利用を開始する","type":"source"},{"url":"https://developers.cloudflare.com/cache/how-to/cache-rules/examples/cache-everything/","title":"Cloudflare: Cache Level (Cache Everything)","type":"source"},{"url":"https://developers.cloudflare.com/cache/concepts/cache-responses/","title":"Cloudflare のキャッシュレスポンス","type":"source"},{"url":"https://developers.cloudflare.com/cache/how-to/purge-cache/","title":"Cloudflare: キャッシュをパージする","type":"source"},{"url":"https://developers.cloudflare.com/cache/troubleshooting/dynamic-content-and-login-issues/","title":"Cloudflare: 動的コンテンツとログインの問題","type":"source"},{"url":"https://developers.google.com/search/docs/specialty/international/localized-versions","title":"Google Search Central: ページのローカライズ版について Google に伝える","type":"source"}],"images":[{"id":2451,"url":"https://injoys.com/rails/active_storage/blobs/proxy/eyJfcmFpbHMiOnsiZGF0YSI6MzgxNjYsInB1ciI6ImJsb2JfaWQifX0=--3301cc345476b9a82de57f9e5bdbad57a8717225/ai-cace8faa.webp","is_representative":true,"generation_method":"ai_photo","license":"ai_generated","mime_type":"image/webp","width":1536,"height":1024,"translations":{"ko":{"alt":"보라색 케이블이 정돈된 서버 랙 옆에서 장비 상태를 살펴보는 남성","caption":"공개 페이지의 HTML 캐시는 적용 범위와 콘텐츠 수정 후 갱신 정책을 함께 설계해야 합니다.","description":null},"en":{"alt":"A man inspecting a server rack with neatly bundled purple cables","caption":"HTML caching for public pages requires defining both its scope and how it is refreshed after content changes.","description":null},"ja":{"alt":"紫色のケーブルが整然と束ねられたサーバーラックの横で機器を確認する男性","caption":"公開ページのHTMLキャッシュは、適用範囲とコンテンツ変更後の更新方針を併せて設計する必要があります。","description":null},"es":{"alt":"Un hombre revisa un rack de servidores con cables morados ordenados en haces","caption":"La caché HTML de las páginas públicas requiere definir su alcance y cómo se actualizará tras modificar el contenido.","description":null},"id":{"alt":"Seorang pria memeriksa rak server dengan kabel ungu yang tertata rapi","caption":"Cache HTML untuk halaman publik memerlukan penetapan cakupan dan kebijakan pembaruan setelah konten diubah.","description":null},"pt":{"alt":"Um homem inspeciona um rack de servidores com cabos roxos organizados em feixes","caption":"O cache HTML de páginas públicas exige definir seu escopo e como será atualizado após alterações no conteúdo.","description":null},"zh-hant":{"alt":"一名男子在伺服器機架旁檢查設備，機架內的紫色線纜整齊成束","caption":"公開頁面的 HTML 快取需要同時規劃適用範圍與內容修改後的更新政策。","description":null},"de":{"alt":"Ein Mann prüft ein Serverrack mit ordentlich gebündelten violetten Kabeln","caption":"Für den HTML-Cache öffentlicher Seiten müssen der Geltungsbereich und die Aktualisierung nach Inhaltsänderungen festgelegt werden.","description":null}}},{"id":2452,"url":"https://injoys.com/rails/active_storage/blobs/proxy/eyJfcmFpbHMiOnsiZGF0YSI6MzgxNzIsInB1ciI6ImJsb2JfaWQifX0=--6d794cafac94909fa4ac95705b51dc5bde79c2df/ai-9e2e0147.webp","is_representative":false,"generation_method":"ai_semi","license":"ai_generated","mime_type":"image/webp","width":1536,"height":1024,"translations":{"ko":{"alt":"두 태블릿의 웹페이지를 비교하는 여성과 문서 갱신이 두 브라우저로 이어지는 도식","caption":"콘텐츠 수정 후에는 재생성한 HTML이 캐시에도 반영됐는지 확인해야 합니다.","description":null},"en":{"alt":"A woman compares web pages on two tablets beside a diagram linking a document refresh to two browser windows.","caption":"After content changes, verify that the cache also reflects the regenerated HTML.","description":null},"ja":{"alt":"2台のタブレットでウェブページを比較する女性と、文書の更新から2つのブラウザーへつながる図","caption":"コンテンツの修正後は、再生成したHTMLがキャッシュにも反映されているか確認する必要があります。","description":null},"es":{"alt":"Una mujer compara páginas web en dos tabletas junto a un diagrama de actualización de un documento.","caption":"Tras modificar el contenido, hay que comprobar que la caché también refleje el HTML regenerado.","description":null},"id":{"alt":"Seorang perempuan membandingkan halaman web di dua tablet di samping diagram pembaruan dokumen.","caption":"Setelah konten diubah, pastikan cache juga mencerminkan HTML yang dibuat ulang.","description":null},"pt":{"alt":"Uma mulher compara páginas web em dois tablets ao lado de um diagrama de atualização de um documento.","caption":"Após alterar o conteúdo, é preciso verificar se o cache também reflete o HTML regenerado.","description":null},"zh-hant":{"alt":"一名女性比較兩台平板上的網頁，旁邊的圖示呈現文件更新後連向兩個瀏覽器視窗","caption":"修改內容後，應確認快取也已反映重新產生的 HTML。","description":null},"de":{"alt":"Eine Frau vergleicht Webseiten auf zwei Tablets neben einem Diagramm zur Dokumentaktualisierung.","caption":"Nach Inhaltsänderungen muss geprüft werden, ob auch der Cache das neu generierte HTML enthält.","description":null}}}],"published_at":"2026-11-05T07:45:55+09:00","updated_at":"2026-11-05T07:45:55+09:00","license":"cc_by","translation_status":"reviewed","available_locales":["ko","en","ja","es"],"data_locales":["ko","en","ja","es","id","pt","zh-hant","de"],"url":"https://injoys.com/ja/articles/low-involvement-web-static-generation-html-cache"}