Astro Starlightでサイトマップを追加する方法

2025/03/15

AstroのテンプレートStarlightプロジェクトにサイトマップを設定したので備忘録。

Starlightでのサイトマップ設定

Starlightには、サイトマップ生成機能が組み込まれています。

サイトマップを有効にするには、astro.config.mjsファイルのsiteオプションにURLを設定するだけです。

import { defineConfig } from 'astro/config';
import starlight from '@astrojs/starlight';

export default defineConfig({
  site: 'https://example.com',
  integrations: [
    starlight({
      title: 'サイトマップを設定したサイト'
    }),
  ],
});

この設定により、ビルド時に自動的にサイトマップが生成されます。

robots.txtの設定

サイトマップを設定したら、次はrobots.txtファイルにサイトマップへのリンクを追加します。

これにより、クローラーがサイトマップを見つけやすくなります。

静的なrobots.txtファイルの作成

直接robots.txtを作成する場合はこちらの方法を使います。

public/robots.txtファイルを作成し、以下の内容を追加します：

User-agent: *
Allow: /

Sitemap: https://example.com/sitemap-index.xml

動的なrobots.txtファイルの生成

astro.config.mjsのsite値を再利用して動的にrobots.txtを生成することもできます。

public/ディレクトリに静的ファイルを置く代わりに、src/pages/robots.txt.tsファイルを作成し、以下のコードを追加します：

import type { APIRoute } from 'astro';

const getRobotsTxt = (sitemapURL: URL) => `
User-agent: *
Allow: /

Sitemap: ${sitemapURL.href}
`;

export const GET: APIRoute = ({ site }) => {
  const sitemapURL = new URL('sitemap-index.xml', site);
  return new Response(getRobotsTxt(sitemapURL));
};

この方法では、astro.config.mjsで設定したsiteURLが自動的に使用されるため、URLの変更があった場合でも一箇所の修正で済みます。

サイトマップの確認

設定が完了したら、ビルドを実行してサイトマップが正しく生成されているか確認しましょう。

pnpm build

npm run build

yarn build

ビルド後、ブラウザでhttps://example.com/sitemap-index.xmlにアクセスして、サイトマップの内容を確認できます。

サイトマップを追加できたら、Google Search Consoleなどのツールでサイトマップを登録して、クローラーに通知しましょう。