ウェブ文書とリクエスト・応答を読む基礎

ウェブ・サーバー・インフラを一回のリクエストでつなぐ

管理者としてログインしたブラウザーでは案内が見えても、外部クローラーが同じURLを要求するとログイン画面を受け取る場合がある。このときページに入力したキーワードや構造化データはクローラーに届かない。要求がどのサーバーを通り、どの応答で終わったかを把握すれば、本文とアクセス設定のどちらを直すべきか判断できる。

フロントエンド（frontend）は訪問者が読む文書と押すボタンを担当する。サーバーのバックエンド（backend）は公開するデータを選び、要求を処理する。インフラ（infrastructure）は、このコードを実行し、インターネットの要求を届けるDNS・ホスティング・ネットワーク・ストレージを指す。一つのNext.jsアプリケーションがフロントエンドとバックエンドを兼ねることもできる。

ブラウザーもクローラーも、サーバーに資料を要求するクライアント（client）だ。https://example.com/guides/opening-hoursを要求すると、まずDNSで接続先を調べ、HTTPS接続を確立し、そのパスの文書を要求する。手前にCDNがあれば、保存済みの応答を返すか、オリジンサーバーへ要求を送る。オリジンサーバーは公開データを読み、HTMLを生成して応答する。

CDN（Content Delivery Network）は複数地域のサーバーからファイルや応答を配信するサービスだ。オリジンサーバー（origin server）は、CDNの奥で元の応答を作るサーバーだ。キャッシュ（cache）は以前の結果を保存して再利用する機能だ。CDNを使わずサーバーが直接応答する構成も可能で、静的サイトではアプリケーションサーバーの代わりに事前生成したファイルを提供できる。

ブラウザー・検索クローラー → DNSで接続先を照会 → HTTPS接続 → CDN・ファイアウォール・プロキシが要求を処理（使用する場合） → オリジンのアプリケーションが公開記事を取得 → HTML・ステータスコード・ヘッダーを返す → ブラウザーがCSS・JavaScript・画像を要求 → 画面を表示し、ボタンの動作を接続

本文が空ならページとサーバーの取得処理を先に見て、接続自体が失敗するならDNS・証明書・手前の層の遮断を見る。記事を修正しても以前の内容が出るなら、データ取得結果と各キャッシュを比較する。応答コード・本文・キャッシュ記録を照合し、要求が止まった場所や内容が変わった場所を探す。

URL・HTTP・ヘッダー・本文を分けて読む

URLはインターネット上のリソースの住所だ。httpsは通信方式を表すスキーム（scheme）、example.comは接続先ホスト（host）、/guides/opening-hoursは文書を指定するパス（path）だ。疑問符の後のpage=2はクエリ（query）で、サーバーへ渡す追加条件だ。#hoursのようなフラグメント（fragment）は文書内の位置を示し、通常のHTTPリクエストでは送信されない。

ドメインはexample.comのように人が読める名前だ。ポート（port）は同じサーバー上で接続するサービスの番号で、HTTPSは通常443を使う。ブラウザーのセキュリティーでいうオリジン（origin）は、スキーム・ホスト・ポートの組み合わせだ。前節のオリジンサーバーとは意味を区別する。

HTTPはクライアントとサーバーが要求・応答を交わす規則だ。GETはリソースを要求し、HEADは本文なしでヘッダーを要求する。応答には処理結果のステータスコード（status code）、形式やキャッシュを説明するヘッダー（header）、実際の資料である本文（body）が入る。SEOの確認ではGETで本文まで受け取り、ログイン画面やエラー案内に置き換わる問題を見つける。

Content-Typeは本文の形式を示すヘッダーだ。HTML文書はtext/html、JSONデータはapplication/json、WebP画像はimage/webpのように提供する。この形式名をMIMEタイプとも呼ぶ。Locationは移動先URL、X-Robots-Tagは応答全体の検索指示、Cache-Controlはキャッシュの利用条件を含む。

ステータスコードと本文は一緒に読む。200は成功の応答を送ったという意味だが、中身が開館時間かボット確認画面かは本文で分かる。301・308は新しいURLへ再要求する経路を示し、404は要求した文書がないことを知らせる。検索システムはこれを処理して収集と登録を進めるため、すべてのURLへ200とホーム画面を返すと、文書の存在や移転関係が不明確になる。GoogleのHTTP応答処理

HTML・CSS・JavaScriptの役割を分ける

HTML（HyperText Markup Language）は見出し・段落・リンクなどの文書構造を記す形式だ。CSS（Cascading Style Sheets）は書体・間隔・色・画面ごとの配置を定める。JavaScriptはブラウザーでボタン・検索・データ更新などの動作を実行する。公開記事のタイトルと本文はHTML要素として提供し、装飾と操作はCSS・JavaScriptで接続する。

タグ（tag）は、<p>のように要素の種類を示す表記だ。要素（element）はタグとその中身を含む。属性（attribute）はhrefやlangのように要素へ付ける設定だ。DOM（Document Object Model）は、ブラウザーが文書をメモリー上に構成した構造だ。サーバーHTMLから作ったDOMは、その後JavaScriptで追加・削除できるため、最初の応答と動作後の画面を一緒に確認する。

headには文書のタイトルとメタデータ、bodyには読む本文が入る。mainはページの主要領域、articleは独立した記事、h1・h2・h3は見出しの階層、pは段落だ。見出しは内容の階層に合わせ、サイズはCSSで調整する。段落を画像にすると、クローラーやスクリーンリーダーがテキストを直接読みにくくなる。

リンクはa要素のhrefへ移動先URLを入れる。ボタンのクリック処理にだけURLがあると、クローラーが次の文書を発見できない場合がある。「貸出申請の必要書類」のようにリンク先の文書を説明する文言を使う。Googleのリンク作成ガイドは、クロール可能なa・hrefの構成とリンク文言を説明している。

レスポンシブ（responsive）な画面は、画面幅に応じて配置を変える。モバイルでも本文・出典・移動リンクを読めるようにし、表では各値と列見出しの関係を保つ。アクセシビリティー（accessibility）は、障害や入力方法の違いがあっても内容を使えるようにすることだ。画像の代替テキストalt、見出し階層、キーボードで移動できるリンクは、文書理解にも役立つ。

メタデータと検索設定の用語を区別する

メタデータ（metadata）はタイトル・説明・正規URLなど、文書を説明する情報だ。titleは検索結果やブラウザータブのタイトル候補、meta descriptionは要約候補になる。検索システムは質問と文脈に応じて別のタイトル・要約を表示することがあるため、実際の結果も確認する。

canonical URLは、重複または非常によく似た文書の代表として使うURLだ。HTMLのlink rel="canonical"はそのURLを提案する方法の一つだ。PDFのようにHTMLのheadがない資料は、HTTPのLink応答ヘッダーで提案できる。Googleは複数の手掛かりを合わせて最終的な正規URLを選ぶ。リダイレクトは訪問者を新しいURLへ移動させるが、canonicalの指定は移動させない。正規URLのガイドライン

robots.txtはサイトのルートでクローラーへ収集経路を案内するファイルだ。Allowは許可、Disallowは制限の規則だ。meta robotsとX-Robots-Tagのnoindexは、検索インデックスからの除外を要求する。nofollowはリンク追跡に関する指示だ。非公開資料はサーバーの認証・権限検査で保護し、検索指示は公開資料の収集・登録方針に合わせて設定する。

サイトマップ（sitemap）は、収集するURLや修正日などを並べるファイルだ。XMLはデータをタグ構造で記す形式で、サイトマップに使われる。構造化データ（structured data）は、タイトル・著者・日付・対象などの関係を機械が読める属性で表した資料だ。JSONは名前と値でデータを記録し、JSON-LDはつながった対象と関係をJSONで表す。Schema.orgはArticle・Personなどの型と属性を定義する語彙だ。

Open Graph（OG）は、共有カードに使うタイトル・説明・画像などを記すメタデータだ。hreflangは、同じ内容を別の言語・地域向けに提供するページの関係を示す。どちらも実際のページに合うURLと言語を入れる。著者author、発行主体publisher、記事の対象about、同一対象を指すsameAsは、それぞれ異なる関係だ。

BreadcrumbListは「ホーム → 利用案内 → 開館時間」のように、サイト階層内での文書の位置を表すSchema.orgの型だ。画面のパンくずリストbreadcrumbと同じ、実際の移動経路を使う。現在の位置を伝え、上位文書へ戻れるようにするもので、他の記事の出典を示すcitationとは異なる。パンくずリストの構造化データ

HTTP/1.1 200 OK Content-Type: application/pdf Link: <https://example.com/guides/opening-hours>; rel="canonical"

この応答は、同じ案内を収めた印刷用PDFの正規URLとしてHTMLページを提案する。PDFが別の年の時間表を収めているなら、その記録の正規URLを使う。Linkヘッダーは、PDFを配信するサーバーまたはストレージで設定する。

ターミナルとブラウザーで同じ文書を読む

ターミナルはコマンドを入力して結果を読むプログラムで、シェル（shell）はコマンドを解釈して実行する。curlはURLへ要求を送り、応答を保存する。rgはファイルから文字列を探し、digはDNSへアドレス情報を照会する。コマンドがインストールされているか確認してから、作業する公開URLを指定する。

curlの-sSは進行表示を抑えながらエラーを出し、-Dはヘッダー、-oは本文を保存する。-Lはリダイレクトをたどる。最初は-Lなしで移動指示を確認し、その後で最終URLまでたどって移動回数と結果を比較する。--max-timeは待機時間の上限を秒で定める。

ブラウザー開発者ツールのNetworkは要求・応答・転送時間、Consoleはコードのエラー、Elementsは現在のDOMを表示する。最初のHTMLとJavaScript実行後のDOMが違うなら、どの要求やコードが内容を追加したかを探す。画面上のCSSサイズと実際にダウンロードした画像のピクセル寸法も区別する。

通常のHTMLで意味とメタデータを一緒に読む

以下をopening.htmlとして保存してブラウザーで開くと、サーバーやフレームワークなしで文書構造を確認できる。開発者ツールのElementsで、headのtitle・description・canonicalと、bodyの見出し・日付・根拠リンクを比較する。配信時にはexample.comを実際の運用ドメインに置き換える。

<!doctype html> <html lang="ja"> <head> <meta charset="utf-8"> <title>図書館の日曜日の開館時間と休館日</title> <meta name="description" content="日曜日は10〜17時開館し、第1日曜日と祝日は休館します。"> <link rel="canonical" href="https://example.com/guides/opening-hours"> </head> <body> <main><article> <h1>図書館の日曜日の開館時間と休館日</h1> <p>公開日 <time datetime="2026-10-01T00:00:00+09:00">2026年10月1日</time></p> <h2>開館時間と例外</h2> <p>日曜日は10時から17時まで開館します。第1日曜日と祝日は休館します。</p> <p>2026年10月1日から適用します。</p> <a href="https://example.com/policies/opening-hours">開館時間案内の原文</a> </article></main> </body> </html>

h1は文書の主題、h2は下位の節だ。aのhrefは実際の移動先、timeのdatetimeは機械が読む値だ。通常のHTMLではdatetime、React JSXではdateTimeと書く。titleは検索・タブ用のタイトルの手掛かりで、画面の見出しとは役割が異なる。検索エンジンは実際のtitle linkとsnippetを独自に判断して表示できる。

CSSやJavaScriptを無効にしても、見出し・時間・休館の例外が残るか確認する。存在しないURLの404処理は後のNext.js実習でHTTP応答として、予約公開の境界は「文書と時間」の固定時刻テストで確認する。

このHTMLでは、h1が開館案内という主題、pが時間と休館条件、aが根拠文書への経路を提供する。本文を読むツールは、これらの要素から答えに必要な文を得る。timeのdatetimeは日付を一定の形式で示すが、それが公開日か適用日かは隣のラベルと文が説明する。タグと人が読む説明を一緒に置く理由はここにある。

画像でも値の意味を区別する必要がある。CSSの表示幅358pxは画面上で占める大きさだ。srcsetの640wは、ダウンロードするファイル自体のピクセル幅だ。naturalWidthは密度補正後のCSSピクセル値なので、ファイルの元の幅は応答ファイルを画像ツールで読んで確認する。currentSrcはブラウザーが選んだURLだ。同じ画面でこの四つを読むと、小さな枠へ大きな原本を送る問題を見つけられる。naturalWidthの定義