Astro Starlightでサイトマップを追加する方法
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 buildnpm run buildyarn buildビルド後、ブラウザでhttps://example.com/sitemap-index.xmlにアクセスして、サイトマップの内容を確認できます。
サイトマップを追加できたら、Google Search Consoleなどのツールでサイトマップを登録して、クローラーに通知しましょう。