Astro フレームワークに sitemap を追加する

2024-07-09

はじめに

Astro Sitemap を使って Astro フレームワークに sitemap を追加します。

インストール

公式セットアップ自動化コマンドの astro add でインストールを行います。

npx astro add sitemap

npm install や config ファイルの更新について質問があり、 yes を選択します。
astro.config.mjs が更新されています。

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

  export default defineConfig({
    // ...
    integrations: [
+     sitemap()],
  });

astro config 設定

サイトの URL を astro.config.* へ site プロパティを使って追加します。
この設定がないとビルド時に警告が表示され、 sitemap は作成されません。

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

  export default defineConfig({
    // ...
+   site: 'https://blog.example.com',
    integrations: [sitemap()],
  });

`<head>` タグへ追加

Layout.astro の <head> タグへ sitemap の URL を追加します。

  <head>
+   <link rel="sitemap" href="/sitemap-index.xml" />
  </head>

robots.txt へ追加

検索エンジンのクローラー向けの src/pages/robots.txt.ts へ sitemap の URL を追加します。

import type { APIRoute } from 'astro'

const robotsTxt = `
User-agent: *
Allow: /

Sitemap: ${new URL('sitemap-index.xml', import.meta.env.SITE).href}
`.trim()

export const GET: APIRoute = () => {
  return new Response(robotsTxt, {
    headers: {
      'Content-Type': 'text/plain; charset=utf-8'
    }
  })
}

動作検証

npm run build でビルドを実行します。
dist ディレクトリに sitemap-index.xml と sitemap-0.xml が作成されていることが確認できました！
デフォルトでは全てのファイルが sitemap の対象となりますが、 filter 機能などもあるようです。

参考 URL

@astrojs/sitemap