@astrojs/ sitemap

この Astroインテグレーション は、Astroプロジェクトをビルドする際に、ページに基づいてサイトマップを生成します。

Astro Sitemapについて

サイトマップは、サイト上のすべてのページ、動画、ファイルを一覧にしたXMLファイルです。Googleなどの検索エンジンはこのファイルを読み取ることで、より効率的にサイトをクロールします。詳細については、Googleによるサイトマップに関するアドバイスを参照してください。

ページ数の多い大規模なサイトでは、サイトマップファイルの使用が推奨されます。サイトマップを使用しなくても、ほとんどの検索エンジンはサイトのページを検出できますが、サイトマップを用意することで、サイトを検索エンジンにとって可能な限り扱いやすい状態に保つことができます。

Astro Sitemapを使用すれば、このXMLファイルを手動で作成する必要はありません。Astro Sitemapインテグレーションが静的生成されたルートをクロールし、getStaticPaths()によって生成された[...slug]やsrc/pages/[lang]/[version]/info.astroなどの動的ルートも含めてサイトマップファイルを自動生成します。

なお、このインテグレーションでは、SSRモードにおける動的ルートのサイトマップエントリーを生成できません。

インストール

Astroには、公式インテグレーションのセットアップを自動化するastro addコマンドが用意されています。必要に応じて、代わりにインテグレーションを手動でインストールすることもできます。

新しいターミナルウィンドウで、以下のいずれかのコマンドを実行してください。

npx astro add sitemap

pnpm astro add sitemap

yarn astro add sitemap

問題が発生した場合は、GitHubで報告してください。そして、以下の手動インストール手順を試してください。

手動インストール

まず、@astrojs/sitemapパッケージをインストールします。

npm install @astrojs/sitemap

pnpm add @astrojs/sitemap

yarn add @astrojs/sitemap

次に、integrationsプロパティを使用して、インテグレーションをastro.config.*ファイルに適用します。

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

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

使い方

@astrojs/sitemapがサイトマップを生成するには、デプロイ先となるサイトのURLを把握している必要があります。

astro.config.mjsのsite (EN)オプションにサイトのURLを追加します。このURLはhttp://またはhttps://で始まる必要があります。

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

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

サイトマップインテグレーションを設定すると、サイトのビルド時にsitemap-index.xmlとsitemap-0.xmlファイルが出力ディレクトリへ追加されます。

sitemap-index.xmlは、連番が付けられたすべてのサイトマップファイルへのリンクを含みます。 sitemap-0.xmlは、サイト上のページを一覧表示します。非常に大規模なサイトの場合は、sitemap-1.xmlやsitemap-2.xmlのように連番のファイルが追加で生成されることもあります。

2ページのWebサイトで生成されるファイルの例

<?xml version="1.0" encoding="UTF-8"?>
  <sitemapindex xmlns="http://www.sitemaps.org/schemas/sitemap/0.9">
  <sitemap>
    <loc>https://example.com/sitemap-0.xml</loc>
  </sitemap>
</sitemapindex>

<?xml version="1.0" encoding="UTF-8"?>
<urlset xmlns="http://www.sitemaps.org/schemas/sitemap/0.9" xmlns:news="http://www.google.com/schemas/sitemap-news/0.9" xmlns:xhtml="http://www.w3.org/1999/xhtml" xmlns:image="http://www.google.com/schemas/sitemap-image/1.1" xmlns:video="http://www.google.com/schemas/sitemap-video/1.1">
  <url>
    <loc>https://example.com/</loc>
  </url>
  <url>
    <loc>https://example.com/second-page/</loc>
  </url>
</urlset>

サイトマップの検出

サイトの<head>やrobots.txtファイルにリンクを配置することで、クローラーがサイトマップを見つけやすくなります。

`<head>`内のサイトマップリンク

サイトの<head>に、サイトマップインデックスファイルを指す<link rel="sitemap">要素を追加します。

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

`robots.txt`内のサイトマップリンク

Webサイトにrobots.txtを設置している場合は、サイトマップインデックスのURLを追加することでクローラーの検出を支援できます。

User-agent: *
Allow: /

Sitemap: https://<YOUR SITE>/sitemap-index.xml

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のsitemap()関数にオブジェクトを渡します。

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

export default defineConfig({
  integrations: [
    sitemap({
      // 設定オプション
    }),
  ],
});

`filter()`

型: (page: string) => boolean

デフォルトでは、すべてのページがサイトマップに含まれます。カスタムのfilter()関数を追加することで、サイトマップに含まれるページをURLで絞り込むことができます。

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

export default defineConfig({
  site: 'https://example.com',
  integrations: [
    sitemap({
      filter: (page) => page !== 'https://example.com/secret-vip-lounge/',
    }),
  ],
});

この関数は、サイト上のすべてのページに対して呼び出されます。関数パラメータpageは、siteドメインを含む現在処理中のページの完全なURLです。ページをサイトマップに含める場合はtrueを返し、除外する場合はfalseを返します。

複数のページをフィルタするには、対象のURLを引数として追加します。

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

export default defineConfig({
  site: 'https://example.com',
  integrations: [
    sitemap({
      filter: (page) =>
        page !== 'https://example.com/secret-vip-lounge-1/' &&
        page !== 'https://example.com/secret-vip-lounge-2/' &&
        page !== 'https://example.com/secret-vip-lounge-3/' &&
        page !== 'https://example.com/secret-vip-lounge-4/',
    }),
  ],
});

`customPages`

型: string[]

生成されるサイトマップファイルに含める、外部で作成したページの配列。

このオプションを使うことで、デプロイ済みのサイト内にある、Astro以外で作られたページもサイトマップに含めることができます。

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

export default defineConfig({
  site: 'https://example.com',
  integrations: [
    sitemap({
      customPages: ['https://example.com/external-page1', 'https://example.com/external-page2'],
    }),
  ],
});

`customSitemaps`

型: string[]
デフォルト: []

追加： @astrojs/sitemap@3.5.0

生成されたサイトマップエントリーとともにsitemap-index.xmlファイルに含める、外部で生成したサイトマップの配列。

このオプションを使うことで、デプロイ済みのサイト内にある、Astro以外で作られた独自のサイトマップを持つセクションについて、Astroが生成するsitemap-index.xmlファイルに含めることができます。これは、同じドメインで複数のサービスをホストする場合に便利です。

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

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

`entryLimit`

型: number
デフォルト: 45000

サイトマップファイル1つあたりの最大エントリー数。デフォルト値は45000です。エントリー数がこれを超えると、サイトマップインデックスと複数のサイトマップファイルが作成されます。詳細については大きなサイトマップの分割に関する説明を参照してください。

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

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

`changefreq`、`lastmod`、`priority`

型: { changefreq?: ChangeFreq; lastmod?: Date; priority?: number; }

追加： @astrojs/sitemap@0.2.0

これらのオプションは、サイトマップXML仕様における<changefreq>、<lastmod>、<priority>タグに対応しています。

なお、changefreqとpriorityはGoogleに無視されます。

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

export default defineConfig({
  site: 'https://example.com',
  integrations: [
    sitemap({
      changefreq: 'weekly',
      priority: 0.7,
      lastmod: new Date('2022-02-24'),
    }),
  ],
});

`serialize()`

型: (item: SitemapItem) => SitemapItem | Promise<SitemapItem | undefined> | undefined

各サイトマップエントリーが出力される前に、その編集可能なオブジェクトを生成します。この関数は、SitemapItemまたはサイトマップから該当エントリーを削除するためにundefinedを返します。また、この関数は非同期処理が可能であり、ディスクへの書き込みが行われる前に、各サイトマップエントリーに対して呼び出されます。

次の例では、サイトマップからページを除外し、対象のエントリーを更新してchangefreq、lastmodおよびpriorityプロパティの値を更新します。

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

export default defineConfig({
  site: 'https://example.com',
  integrations: [
    sitemap({
      serialize(item) {
        if (/exclude-from-sitemap/.test(item.url)) {
          return undefined;
        }
        if (/your-special-page/.test(item.url)) {
          item.changefreq = ChangeFreqEnum.DAILY;
          item.lastmod = new Date().toISOString();
          item.priority = 0.9;
        }
        return item;
      },
    }),
  ],
});

`chunks`

型: Record<string, (item: SitemapItem) => SitemapItem | undefined>

追加： @astrojs/sitemap@3.7.0 New

カスタムロジックに基づいてサイトマップを複数のファイルに分割するための関数マップ（オブジェクト）です。オブジェクトの各キーが、分割された各サイトマップのファイル名となり、対応する関数によってそのチャンク（ファイル）に含めるURLを決定します。例えば、Webサイト内の特定のセクションが頻繁に変更されるため、そのエントリーに対して個別の変更頻度を設定したい場合などに便利です。

各チャンク関数はSitemapItemを受け取り、各アイテムに対して以下のいずれかを返します。

そのURLをこのチャンクに含める場合は、変更を加えたSitemapItem
そのURLをこのチャンクに含めない場合は、undefined

以下の例は、パスに基づいてURLを異なるサイトマップファイルへ分割する方法を示しています。

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

export default defineConfig({
  site: 'https://example.com',
  integrations: [
    sitemap({
      chunks: {
        'blog': (item) => {
          if (/blog/.test(item.url)) {
            item.changefreq = ChangeFreqEnum.WEEKLY;
            item.lastmod = new Date().toISOString();
            item.priority = 0.9;
            return item;
          }
        },
        'glossary': (item) => {
          if (/glossary/.test(item.url)) {
            item.changefreq = ChangeFreqEnum.MONTHLY;
            item.lastmod = new Date().toISOString();
            item.priority = 0.7;
            return item;
          }
        }
      },
    }),
  ],
});

この設定により、以下のファイルが生成されます。

sitemap-blog-0.xml
sitemap-glossary-0.xml

いずれのチャンクにも一致しないURLは、デフォルトのsitemap-pages-0.xmlファイルに出力されます。

`i18n`

型: { defaultLocale: string; locales: Record<string, string>; }

サイトマップをローカライズするには、このi18nオプションにオブジェクトを渡します。

このオブジェクトには、2つの必須プロパティがあります。

defaultLocale: この値はlocalesキーのいずれかとして存在している必要があります。
locales: キーと値のペアです。キーはページパス内のロケール部分を検索するために使用されます。値には言語属性を指定し、英字とハイフンのみ使用できます。

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

export default defineConfig({
  site: 'https://example.com',
  integrations: [
    sitemap({
      i18n: {
        defaultLocale: 'en', // `https://example.com/`の後に`es`や`fr`が含まないすべてのURLは、デフォルトのロケール（すなわち`en`）として扱われます。
        locales: {
          en: 'en-US', // `defaultLocale`の値は`locales`キーに存在する必要があります
          es: 'es-ES',
          fr: 'fr-CA',
        },
      },
    }),
  ],
});

生成されるサイトマップは次のようになります。

...
  <url>
    <loc>https://example.com/</loc>
    <xhtml:link rel="alternate" hreflang="en-US" href="https://example.com/"/>
    <xhtml:link rel="alternate" hreflang="es-ES" href="https://example.com/es/"/>
    <xhtml:link rel="alternate" hreflang="fr-CA" href="https://example.com/fr/"/>
  </url>
  <url>
    <loc>https://example.com/es/</loc>
    <xhtml:link rel="alternate" hreflang="en-US" href="https://example.com/"/>
    <xhtml:link rel="alternate" hreflang="es-ES" href="https://example.com/es/"/>
    <xhtml:link rel="alternate" hreflang="fr-CA" href="https://example.com/fr/"/>
  </url>
  <url>
    <loc>https://example.com/fr/</loc>
    <xhtml:link rel="alternate" hreflang="en-US" href="https://example.com/"/>
    <xhtml:link rel="alternate" hreflang="es-ES" href="https://example.com/es/"/>
    <xhtml:link rel="alternate" hreflang="fr-CA" href="https://example.com/fr/"/>
  </url>
  <url>
    <loc>https://example.com/es/second-page/</loc>
    <xhtml:link rel="alternate" hreflang="es-ES" href="https://example.com/es/second-page/"/>
    <xhtml:link rel="alternate" hreflang="fr-CA" href="https://example.com/fr/second-page/"/>
    <xhtml:link rel="alternate" hreflang="en-US" href="https://example.com/second-page/"/>
  </url>
...

`xslURL`

型: string

追加： @astrojs/sitemap@3.2.0

サイトマップを整形し、見栄えを整えるためのXSLスタイルシートのURLです。

設定する値には、ローカルのスタイルシートを指す設定済みのsiteURLからの相対パス、または外部スタイルシートへの絶対URLのいずれかを指定できます。

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

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

`filenameBase`

型: string
デフォルト: sitemap

追加： @astrojs/sitemap@3.4.0

サイトマップXMLファイルを生成する際に使用されるファイル名のプレフィックス（接頭辞）文字列です。デフォルト値はsitemapです。

このオプションは、既存のサイトマップファイルが存在するドメインにAstroサイトを統合する場合などに役立ちます。

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

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

指定された設定により、https://example.com/astronomy-sitemap-0.xmlおよびhttps://example.com/astronomy-sitemap-index.xmlにサイトマップファイルが生成されます。

`namespaces`

型: { news?: boolean; xhtml?: boolean; image?: boolean; video?: boolean; }
デフォルト: { news: true, xhtml: true, image: true, video: true }

追加： @astrojs/sitemap@3.6.0

生成されるサイトマップから除外されるXML名前空間のオブジェクトです。

未使用の名前空間を除外することで、サイトマップを必要最小限の内容に絞り込むことができます。これにより、検索エンジンによる解析の高速化や帯域幅の消費削減につながります。例えば、サイト内にニュース記事や動画、多言語コンテンツが含まれていない場合は、それらの名前空間を除外して、XMLファイルの肥大化を抑えることができます。

デフォルトでは、設定可能なすべての名前空間（news、xhtml、image、video）が生成されるサイトマップXMLに含まれます。これらの名前空間のいずれかを生成するサイトマップから除外するには、namespaces設定オブジェクトを追加し、個々のオプションをfalseに設定します。

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

export default defineConfig({
  site: 'https://example.com',
  integrations: [
    sitemap({
      namespaces: {
        news: false,
        xhtml: false,
      }
    })
  ]
});

Astro Sitemapユーティリティリファレンス

import {
  ChangeFreqEnum,
} from "@astrojs/sitemap";

`ChangeFreqEnum`

追加： @astrojs/sitemap@1.3.2

各キーが<changefreq>の仕様で定義された有効な値の大文字表記となっているTypeScriptの列挙型です。

以下の例では、serialize()を使用してブログインデックスのchangefreqを更新しています。

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

export default defineConfig({
  site: 'https://example.com',
  integrations: [
    sitemap({
      serialize(item) {
        if (/blog/.test(item.url)) {
          item.changefreq = ChangeFreqEnum.DAILY;
        }

        return item;
      },
    }),
  ],
});

Astro Sitemap型定義リファレンス

import type {
  ChangeFreq,
  LinkItem,
  SitemapItem,
  SitemapOptions,
} from "@astrojs/sitemap";

`ChangeFreq`

エントリーの更新頻度を指定するための有効な値のユニオン型です。

`LinkItem`

型: { lang: string; hreflang?: string; url: string; }

ページのURLを表します。これはドキュメントのデフォルトバージョン、またはその翻訳バージョンのいずれかになります。

`LinkItem.lang`

型: string

このバージョンのページでサポートされる言語コードを指定します。値を設定した場合、hreflangをあわせて設定する必要はありません。

`LinkItem.hreflang`

型: string

このバージョンのページでサポートされる言語コードを指定します。値を設定した場合、langをあわせて設定する必要はありません。

`LinkItem.url`

型: string

指定された言語に対応するページの絶対URLを指定します。

`SitemapItem`

型: { url: string; lastmod?: string | undefined; changefreq?: ChangeFreqEnum | undefined; priority?: number | undefined; links?: LinkItem[] | undefined; }

サイトマップ内のエントリーを表します。これにはエントリーのurlおよび追加のオプショナルなプロパティが含まれます。

`SitemapItem.url`

型: string

ページの絶対URLを指定します。

`SitemapItem.lastmod`

型: string | undefined

ページの最終更新日時をISO形式の文字列で定義します。

`SitemapItem.changefreq`

型: ChangeFreqEnum | undefined

ページの更新頻度の目安を定義します。

`SitemapItem.priority`

型: number | undefined

サイト内の他のURLに対する、このURLの相対的な優先度を定義します。値には0.0から1.0までの範囲の数値を指定します。

`SitemapItem.links`

型: LinkItem[] | undefined

現在のページを含む、代替ページのリストを定義します。

`SitemapOptions`

型: object

設定オプションを表します。

例

Astroの公式サイトでは、Astro Sitemapを使用してサイトマップを生成しています。
その他の実例については、GitHubでAstro Sitemapを使用しているプロジェクトを検索して参照してください。

@astrojs/ sitemap

Astro Sitemapについて

インストール

手動インストール

使い方

サイトマップの検出

<head>内のサイトマップリンク

robots.txt内のサイトマップリンク

設定

filter()

customPages

customSitemaps

entryLimit

changefreq、lastmod、priority

serialize()

chunks

i18n

xslURL

filenameBase

namespaces

Astro Sitemapユーティリティリファレンス

ChangeFreqEnum

Astro Sitemap型定義リファレンス

ChangeFreq

LinkItem

LinkItem.lang

LinkItem.hreflang

LinkItem.url

SitemapItem

SitemapItem.url

SitemapItem.lastmod

SitemapItem.changefreq

SitemapItem.priority

SitemapItem.links

SitemapOptions

例

他のインテグレーション

UIフレームワーク

SSRアダプター

その他

`<head>`内のサイトマップリンク

`robots.txt`内のサイトマップリンク

`filter()`

`customPages`

`customSitemaps`

`entryLimit`

`changefreq`、`lastmod`、`priority`

`serialize()`

`chunks`

`i18n`

`xslURL`

`filenameBase`

`namespaces`

`ChangeFreqEnum`

`ChangeFreq`

`LinkItem`

`LinkItem.lang`

`LinkItem.hreflang`

`LinkItem.url`

`SitemapItem`

`SitemapItem.url`

`SitemapItem.lastmod`

`SitemapItem.changefreq`

`SitemapItem.priority`

`SitemapItem.links`

`SitemapOptions`