HTML共通パーツのインクルード化：PHP・JS・Astroの使い分け方
この記事には広告リンクを含みます。紹介している商品・サービスの一部はアフィリエイトプログラムを利用しています。 商品・サービスの選定はご自身の判断でお願いいたします。
ヘッダーとフッターを別ファイルに切り出して各ページから読み込む——静的HTMLの共通パーツインクルードは、制作者なら一度は直面する実装課題です。
「JavaScriptで実装したがローカルで動かない」「PHPに切り替えたらパスがずれる」という詰まり方には、どれも構造的な原因があります。
結論から言うと、「file://プロトコルのCORS制限」と「PHPパスの設計タイミング」が問題の根本です。
2026年の案件環境では、この両方を構造的に回避できるAstroコンポーネントが小規模案件の実用解になってきています。
JavaScriptのfetch()がローカルで動かない理由とSEOリスク
fetch()やXMLHttpRequestでHTMLファイルを読み込む実装は、ローカル環境（file://）では動作しません。
ブラウザのCORSポリシーが、file://プロトコルからのリクエストをブロックするためです。
なぜ動かないのかを理解せずに進むと、本番環境に上げてから別の問題が出てきます。
XHRとfetch()は書き方が違いますが、どちらも非同期HTTPリクエストなのでCORS制限は同様にかかります。
ローカル確認の回避策として、自分がよく使うのは次の方法です。
- VS CodeのLive Server拡張でローカルサーバーを起動する
npx http-serverでnpm製の簡易サーバーを立てる- PHP環境があれば
php -S localhost:8000で代用する
SEOへの影響も要確認。
Googlebotはクローリング時にJavaScriptを実行しますが、レンダリングには遅延があります。
ヘッダー・フッターがJSで後から差し込まれる構造では、インデックス反映まで時間がかかる可能性があります。
静的HTMLでマークアップしておくほうが、SEO上の不確実性を減らせます。
ただし、PHPが使えないホスティング環境では選択肢が限られるため、その場合はAstroコンポーネントが現実的です。
PHP・JS・SSI・Astroコンポーネントを案件規模で選ぶ
手法の選択基準は2軸。案件のホスティング環境と規模感で決まります。
手法 | 向いている案件 | 注意点 |
|---|---|---|
PHP include | 中〜大規模・PHP対応サーバー | ページ構成確定後に着手 |
JSfetch() | 簡易構成・サーバーなし前提 | ローカルCORS・SEO遅延に注意 |
SSI | Apache環境・既存構成に合わせる | 設定必要・モダン案件では減少 |
Astroコンポーネント | 小規模新規・LP・ポートフォリオ | ビルドステップが必要 |
案件の初期段階でどの手法を選ぶかを決めておくと、後から大きな修正が発生しにくくなります。
以前関わったLP案件でAstroを初めて使った際、ヘッダー・フッターをコンポーネント化しました。
その結果、JSインクルード特有のfile://CORS問題が最初から発生しませんでした。
AstroはビルドでHTMLを静的生成するため、実行時のfetch()リクエスト自体が不要になるからです。
ただし、特殊な階層へのデプロイ時にはtsxの相対パス設計で詰まったため、デプロイ先の構造は事前に確認が必要です。
AstroとWordPressのどちらを選ぶかの判断基準は、AstroとWordPressの使い分け：迷わない3つの判断基準にまとめています。
PHPインクルードを後から入れるときのパス設計の落とし穴
PHPのinclude()はサーバーサイドで処理されるため、JSインクルードのようなSEOリスクはありません。
ただし、既存の静的サイトに後からインクルード化を導入する場合、ページ構成が確定していないと全修正になります。
以前関わった数十ページ規模のリニューアル案件では、仕分けの段階で3〜4割のページが削除・統合の対象になりました。
インクルードパスを再構成前に設計すると、ページを移動するたびにinclude()の相対パスを全て修正しなければなりません。
PHPインクルードのパス設計で確認するポイントをまとめます。
- ページ構成（URL設計）が確定してからインクルード化に着手する
- 相対パスより
$_SERVER['DOCUMENT_ROOT']経由の絶対パスで書く - 階層が混在する場合は特に相対パスの書き方に注意する
絶対パスで書くと次のようになります。
<?php include($_SERVER['DOCUMENT_ROOT'] . '/include/header.php'); ?>ルートからの絶対パスで統一しておくと、ページを別ディレクトリに移動しても修正が1箇所で済みます。
相対パスで書いた場合、/about/と/about/team/では階層が異なり、同じinclude文が一方で動かなくなります。
まとめ
- JSのfetch()インクルードはfile://環境で動かない——ローカル確認にはローカルサーバーが必要です
- SEO上の不確実性を避けたいなら、静的生成かPHPインクルードを選びます
- 小規模LP・静的サイト案件では、AstroコンポーネントがCORSとSEO不確実性を構造的に回避できます
- PHPインクルードを後から入れる場合は、ページ構成確定後に着手するのが基本です
コーディング代行・実装判断で詰まったら Build に振ってください。
HP制作・保守・改修で悩んでいる方も、一度 Build にご相談ください。
