サイトマップは、サイト内のページ一覧を検索エンジン（Googleなど）に伝えるファイル。これがあると、新しいページや更新したページが検索エンジンに見つかりやすくなります。
Astroなら、公式インテグレーション @astrojs/sitemap を使えば簡単にセットアップできます。手順をサクッとまとめます！
サイトマップ・インテグレーションを追加する
プロジェクトのルートディレクトリでターミナル（コマンドプロンプトやPowerShellなど）を開きます。
以下のコマンドを実行します。
- npm を使用している場合:
npx astro add sitemap
- pnpm を使用している場合:
pnpm astro add sitemap
- yarn を使用している場合:
yarn astro add sitemap
コマンド実行中、「y」を聞かれたらそのまま「y」でOK。
必要なパッケージが入り、astro.config.mjs に設定が自動で追加されます。
サイトのURLを設定する (astro.config.mjs)
サイトマップ内のURLを正しく生成するために、あなたのサイトが公開される完全なURLを設定する必要があります。
- プロジェクトのルートにある
astro.config.mjsファイルを開きます。 -
defineConfigの中にsiteオプションがあるか確認し、なければ追加、あれば編集して、あなたのサイトのURLを設定します。
// astro.config.mjs
import { defineConfig } from 'astro/config';
import sitemap from '@astrojs/sitemap'; // astro add で自動追加されているはず
export default defineConfig({
// ↓ ここにあなたのサイトの完全なURLを設定！ (例: https://...)
site: 'https://あなたのサイトのドメイン.com',
integrations: [
sitemap(), // astro add で自動追加されているはず
// ... 他のインテグレーション
],
// ... 他の設定
});
-
https://から始まる、間違いのないURLを入力してください。
ビルドしてサイトマップを確認する
サイトマップはビルド時に自動生成されます。
以下のコマンドでビルドしましょう。
npm run build
# または pnpm run build / yarn build
ビルドが完了すると、プロジェクト内に dist という名前のフォルダが作成されます（出力先を変更していなければ）。
dist フォルダの中に sitemap-index.xml や sitemap-0.xml といった名前のファイルが生成されていれば成功です。
確認と次のステップ
- 生成されたサイトマップファイル (
dist/sitemap-index.xmlなど) を開いて、中のURLがastro.config.mjsで設定したsiteのURLから始まっているか確認しましょう。 - サイトをサーバーにアップロード（デプロイ）したら、生成されたサイトマップのURL（例:
https://あなたのサイトのドメイン.com/sitemap-index.xml）を Google Search Console などのウェブマスターツールに登録しましょう。これにより、検索エンジンがサイトの構造を把握しやすくなります。
これで、Astroサイトにサイトマップを追加できました。サイトマップは簡単に追加できるので、SEOの第一歩としてぜひ設定しておきましょう。