カテゴリ
タグ
Agent Mode Astro Auto Approve Codex Copilot Cursor FAQPage git GitHub GitHub Copilot Google Search Console NoAdapterInstalled OpenAI params props SEO Visual Studio VS Code Windows インストール エディター エラー対応 エラー解決 コンポーネント設計 プチキャンプ リダイレクト 動的ルーティング 天体観測 奈良県 学生 岩手県 市ケ原 日帰り旅行 明けの明星 曽爾高原 構造化データ 流星群 温泉 神戸ハイキング 設定方法 静的サイト
871 文字
4 分
Astroでリダイレクト設定がうまくいかない時の対処法【静的サイトSEO】
先日、Astro(SSG)のサイトの記事関係のシステムをいじっていたのですが、間違って意図と異なるURLで記事を公開してしまいました。
大問題にはならなかったのですが、1つの記事がそのURLでGoogleSearchConsoleに登録されちゃいました、、
初めは時間が解決してくれるんだ~とURLを戻すだけで対処しようとしたのですが、どうやらSEO的にナンセンスのようで、、、しぶしぶリダイレクトを設定することにしました。
Astroのリダイレクトを実装しようとしたら、躓いたのでそれをまとめます。
対象読者: Astro で静的サイトを構築していて、リダイレクト設定に悩んでいる方 / Cloudflare・Vercel でホストしている方
なぜリダイレクトが SEO に重要なのか
- 重複コンテンツ回避: 誤った URL と正しい URL が併存すると評価が分散!!
- 被リンクの継承: 301 / 308 リダイレクトなら被リンクの評価を新 URL へ移行可!!
- クロール効率の最適化: 不要な 404 を減らし、クロールバジェットを節約!!
TIPGoogle は「恒久的(301 / 308)」「一時的(302)」を見分けて評価を移譲します。目的に合わせてステータスコードを選んでください!
前提環境
- Astro v4(SSG モード)
- Cloudflare Pages でホスティング(Vercel でも同様に動作を確認)
方法①: astro.config.*
でリダイレクトを定義する
Astro の設定ファイルに redirects
を追加する方法です。公式推奨 で管理も楽(大事)なため、少量のリダイレクトならこれで十分!!
export default defineConfig({
redirects: {
// ① 同一サイト内のパス移動(デフォルト 301)
"/posts/old-slug": "/posts/new-slug",
// ② 動的ルートも OK(パラメータ名は合わせる)
"/blog/[...slug]": "/articles/[...slug]",
// ③ ステータスコードを明示したいとき
"/note": { // 308=恒久的 POST 可
status: 308,
destination: "/posts/note"
},
// ④ 外部 URL へ
"/docs": "https://example.com/docs"
}
});
- メリット: Astro だけで完結。SSG ビルド時に
<meta http-equiv="refresh">
つき HTML が自動生成されます。 - デメリット: 大量のルールを記述すると設定ファイルが肥大化。
方法②: vercel.json
を使う(Cloudflare Pages でも利用可)
より細かい条件分岐やホスト名ベースの振り分けが必要なら vercel.json
が便利です。
{
"redirects": [
{
"source": "/posts/old-slug",
"destination": "/posts/new-slug",
"permanent": true // 308
},
{
"source": "/blog/:year/:month/:slug",
"destination": "/posts/:slug",
"statusCode": 301
},
{
"source": "/docs/:path*",
"destination": "https://example.com/docs/:path*",
"permanent": true
},
{
"source": "/:path*",
"has": [
{ "type": "host", "value": "old.example.com" }
],
"destination": "/legacy/:path*",
"statusCode": 302
}
]
}
- メリット
- ワイルドカードやホスト条件など高機能。
- 設定ファイルを分離できるので保守しやすい。
- デメリット
trailingSlash
設定に依存し、末尾スラッシュ強制削除の挙動に注意が必要。
WARNING
vercel.json
で定義したリダイレクトは、デフォルトで末尾スラッシュを削除します。trailingSlash: "always"
を指定している場合は整合性を要確認!
どちらを選ぶべき?
ケース | 推奨手段 |
---|---|
少量(〜10 件程度)の静的リダイレクト | 方法① Astro 設定 |
動的パス・サブドメイン条件・大量登録 | 方法② vercel.json |
私のサイトでは末尾スラッシュを必ず付与するため、方法①を採用しました。
まとめ
- 正しいステータスコード を選び、評価をロスなく移譲しよう。
- Astro 標準の
redirects
がもっとも手軽。 - 高度な条件分岐や大量設定は
vercel.json
が便利。ただしtrailingSlash
との相性に注意。
誤った URL をインデックスさせないためにも、公開前チェックとリダイレクト設定は忘れずに!!!
AstroでのtrailingSlashの設定変更はこちらにあります!!

設定方法
docs.astro.build
参考リンク
Astroでリダイレクト設定がうまくいかない時の対処法【静的サイトSEO】
https://naonao-na.com/posts/astro-redirect-seo/