Webサイトの仕組み

ブロガーの皆さん、Webサイトの仕組みを知っていますか？
基本的な仕組みを知っていれば、SEOに有用な施策を理解しやすくなります。

この記事では、Webサイトの仕組みについて超初心者向けに分かりやすく解説します。

当記事の内容はSEO検定４級の範囲に含まれています！（2025年時点）

URL

Webサイトにアクセスするには、前章で学んだドメイン名を含むURL¹をクリックする必要があります。
※ブラウザやコマンドプロンプトに打ち込んだりしてもアクセスは可能です。

クルエイチ

URLクリック以外のアクセス方法は、アクセス解析をする時に地味に重要だったりしますが、初心者には要らない知識です・・・

URLはWebサイトの場所を示す文字列です。
Web上の住所みたいなものなので、アドレスと呼ばれることもあります。
URLは５つの要素をスラッシュ（／）やドット（．）で区切った構成になっています。

Webサイトの構成

Webサイトは通常、１ページではなく複数のページで構成されます。
トップページがあり、そこから別ページへのリンクを貼って二重・三重・あるいはそれ以上の階層構造になることがほとんどです。
この構造は木の形に似ていることから「ツリー構造」と呼ばれます。

トップページ

トップページとは、雑誌で言う表紙にあたる最上位ページです。
正式名称はインデックスページで、ファイル名は「index.html」または「index.htm」で固定です。

インターネットの黎明期から普及まもなくの頃は、トップページはインデックス（索引）という名前の通り、装飾は少な目で下層ページのテキストリンクが多数貼られた目次のようなページでした。
しかしWeb制作技術が上がった現代では、目次ページは「サイトマップ」というページに置き換わっており、トップページはビジュアルに重きを置くことも増えました。

クルエイチ

とは言え、今でもYahooやAmazonなどはトップページにテキストリンクが多数あります。
検索エンジンにサイト構成を理解してもらいやすくするために、原点回帰しているという説もあります。

サブページ

サブページとは、トップページ以外の全てのページを指します。
サイトのメインとなる記事だけでなく、用語説明記事やお問い合わせページなど、種類は多様です。

カテゴリーページ

サブページは増えるほどユーザーが目的のページを探しにくくなってしまいます。
そこで、同じ系統のページをカテゴリー分けすることが一般的です。

クルエイチ

ワードプレスをはじめ、現在の多くのCMSではカテゴリー分け機能が標準装備されています。

静的ページと動的ページ

静的ページ

index.htmlなど、htmlファイルをそのまま表示するWebページのことです。
URLは固定で、常に同じ内容を表示する場合に使われます。

動的ページ

アクセスした時の状況に応じて表示内容を変えるページのことです。
URLには「seach.php?q=ABC」のようにパスと共にクエリ（パラメータ）をデータとして持っていて、受信したWebサーバーがクエリに応じて適切なページを生成してブラウザに返します。

Webページの技術要素

Webページ制作には、時折プログラミング知識が必要と言われることがあります。
現在はサイト作成ツールやブログサービスが難しい部分を対応してくれているので、ユーザーは記事を書くだけで済む場合が多いです。
しかし、Webページも実際にはプログラミングが行われているためです。

クルエイチ

SEOを理解するためには技術要素の知識も多少は必要！

HTML

HTMLとは、Webページを記述するためのマークアップ言語です。
W3C²によって標準化されていて、世界共通規格になっています。

タグと呼ばれる＜＞で囲まれた特殊文字列を使って、構造や修飾情報を記述します。
見出し、表、段落、画像や動画の埋め込み、他ページへのハイパーリンクなど、Webページは基本的にHTMLだけで作れるようになっています。

クルエイチ

例えば以下のようなもの。
ワードプレステーマ「Twenty Twenty-Five」のHTMLの一部です。

<main class="wp-block-group" style="margin-top:var(--wp--preset--spacing--60)">
</main>

JavaScript（ジャバスクリプト）

HTMLは基本的に一度作ったら動かせないものです。
ハイパーリンクをクリックされたらリンク先に移動などごく簡単なものは可能ですが、基本的にHTMLはユーザーや端末の動作に応じた動きはできません。

そこでプログラミング言語の「JavaScript」が考案されました。
JavaScriptは特別な開発環境が不要で、外部ファイル定義もできればHTMLに書き込むだけでも動作するので簡単です。

クルエイチ

例えば以下のようなもの。

<!-- 外部ファイルとしてJavaScriptを読み込む場合 -->
<script src="js/sample.js"></script>

<!-- JavaScriptをHTMLに埋め込む場合 -->
<script>
  function ShowAlert() {
    alert("Hello world!!");
  }
</script>

CSS（スタイルシート）

WWWが発展した結果、デザイン性の高いWebページが求められるようになりました。
そこで見栄えを良くするための専用言語「CSS³」が考案されました。

CSSはHTMLの見栄えを良くすために使われます。
CSSの普及により、単純なレイアウトやデザインから、高いデザイン性を持って雑誌などの媒体に近いものになりました。

サーバーサイドプログラム

HTMLやCSSはクライアントサイド（ユーザーの情報端末）上で実行されます。
対してサーバーサイドプログラムは、ブラウザからのアクセスによってWWWサーバー内で実行されます。

ユーザーの端末で処理すると大規模サイトになるほど処理が重くなってしまいます。
また、重要情報などはクライアント端末に情報を渡すことは危険です。

そこで、Webサイトを格納しているサーバー側である程度処理して、処理結果をクライアントに渡すこともあります。
この時サーバーで処理しているプログラムが、サーバーサイドプログラムです。

クルエイチ

ショッピングや予約など個人情報や企業情報を扱う場合などはサーバーサイドプログラムが活躍しています！

Ajax

Ajax⁴は非同期通信でサーバーからデータを取得して、動的にページを置き換える技術です。
ページを切り替えることなくWebページ上で動作します。

Googleマップが良い例で、地図データを非同期で読み込み、ユーザーのズームやスクロール操作に応じて地図を更新します。いちいちWebページを更新・切り替えすることなく操作後のマップを見ることができます。