コンテンツにスキップ

@astrojs/ sitemap

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

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

サイトマップファイルは、大規模な複数ページのサイトに推奨されます。サイトマップを使用しなくても、ほとんどの検索エンジンはサイトのページをリストできますが、サイトマップはサイトを可能な限り検索エンジンフレンドリーにするための優れた方法です。

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

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

Astroには、公式インテグレーションのセットアップを自動化するためのastro addコマンドが含まれています。もしよろしければ、手動でインテグレーションをインストールできます。

新しいターミナルウィンドウで次のいずれかのコマンドを実行します。

ターミナルウィンドウ
npx astro add sitemap

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

まず、パッケージマネージャーを使用して@astrojs/sitemapパッケージをインストールします。

ターミナルウィンドウ
npm install @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.mjssiteオプションとしてサイトのURLを追加します。これはhttp://またはhttps://で始まる必要があります。

astro.config.mjs
import { defineConfig } from 'astro/config';
import sitemap from '@astrojs/sitemap';
export default defineConfig({
site: 'https://stargazers.club',
integrations: [sitemap()],
// ...
});

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

sitemap-index.xmlは、すべての番号付きサイトマップファイルにリンクします。 sitemap-0.xmlは、サイト上のページをリストします。 非常に大規模なサイトの場合、sitemap-1.xmlsitemap-2.xmlなどの追加の番号付きファイルが存在する場合もあります。

2ページのウェブサイト用に生成されたファイルの例
sitemap-index.xml
<?xml version="1.0" encoding="UTF-8"?>
<sitemapindex xmlns="http://www.sitemaps.org/schemas/sitemap/0.9">
<sitemap>
<loc>https://stargazers.club/sitemap-0.xml</loc>
</sitemap>
</sitemapindex>
sitemap-0.xml
<?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://stargazers.club/</loc>
</url>
<url>
<loc>https://stargazers.club/second-page/</loc>
</url>
</urlset>

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

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

src/layouts/Layout.astro
<head>
<link rel="sitemap" href="/sitemap-index.xml" />
</head>

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

Section titled “robots.txt内のサイトマップリンク”

ウェブサイトにrobots.txtがある場合は、サイトマップインデックスのURLを追加してクローラーを支援できます。

public/robots.txt
User-agent: *
Allow: /
Sitemap: https://<YOUR SITE>/sitemap-index.xml

astro.config.mjsからsiteの値を再利用したい場合は、robots.txtを動的に生成できます。 public/ディレクトリ内の静的ファイルを使用する代わりに、src/pages/robots.txt.tsファイルを作成し、次のコードを追加します。

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

astro.config.mjs
import { defineConfig } from 'astro/config';
import sitemap from '@astrojs/sitemap';
export default defineConfig({
integrations: [
sitemap({
// 設定オプション
}),
],
});

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

astro.config.mjs
import { defineConfig } from 'astro/config';
import sitemap from '@astrojs/sitemap';
export default defineConfig({
site: 'https://stargazers.club',
integrations: [
sitemap({
filter: (page) => page !== 'https://stargazers.club/secret-vip-lounge/',
}),
],
});

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

複数のページをフィルタリングするには、ターゲットURLを持つ引数を追加します。

astro.config.mjs
import { defineConfig } from 'astro/config';
import sitemap from '@astrojs/sitemap';
export default defineConfig({
site: 'https://stargazers.club',
integrations: [
sitemap({
filter: (page) =>
page !== 'https://stargazers.club/secret-vip-lounge-1/' &&
page !== 'https://stargazers.club/secret-vip-lounge-2/' &&
page !== 'https://stargazers.club/secret-vip-lounge-3/' &&
page !== 'https://stargazers.club/secret-vip-lounge-4/',
}),
],
});

場合によっては、ページがデプロイされたサイトの一部であっても、Astroプロジェクトの一部ではないことがあります。Astroによって作成されてないページをサイトマップに含めたい場合は、このオプションを使用できます。

astro.config.mjs
import { defineConfig } from 'astro/config';
import sitemap from '@astrojs/sitemap';
export default defineConfig({
site: 'https://stargazers.club',
integrations: [
sitemap({
customPages: ['https://stargazers.club/external-page', 'https://stargazers.club/external-page2'],
}),
],
});

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

astro.config.mjs
import { defineConfig } from 'astro/config';
import sitemap from '@astrojs/sitemap';
export default defineConfig({
site: 'https://stargazers.club',
integrations: [
sitemap({
entryLimit: 10000,
}),
],
});

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

changefreqpriorityはGoogleによって無視されることに注意してください。

astro.config.mjs
import { defineConfig } from 'astro/config';
import sitemap from '@astrojs/sitemap';
export default defineConfig({
site: 'https://stargazers.club',
integrations: [
sitemap({
changefreq: 'weekly',
priority: 0.7,
lastmod: new Date('2022-02-24'),
}),
],
});

ディスクに書き込む直前に各サイトマップエントリに対して呼び出される関数。この関数は非同期にすることができます。

これらのプロパティを持つSitemapItemオブジェクトをパラメーターとして受け取ります。

  • url(絶対ページURL)。これはSitemapItemに存在することが保証されている唯一のプロパティです。
  • changefreq
  • lastmod(ISO形式の日付、String型)
  • priority
  • links

このlinksプロパティには、親ページを含む代替ページのLinkItemリストが含まれています。

LinkItem型には2つのフィールドがあります。url(指定された言語のこのページのバージョンの完全修飾URL)とlang(このバージョンのページが対象とするサポートされている言語コード)。

serialize関数は、変更されたかどうかに関係なくSitemapItemを返す必要があります。

以下の例は、サイトマップ固有のプロパティを個別に追加する機能を示しています。

astro.config.mjs
import { defineConfig } from 'astro/config';
import sitemap from '@astrojs/sitemap';
export default defineConfig({
site: 'https://stargazers.club',
integrations: [
sitemap({
serialize(item) {
if (/exclude-from-sitemap/.test(item.url)) {
return undefined;
}
if (/your-special-page/.test(item.url)) {
item.changefreq = 'daily';
item.lastmod = new Date();
item.priority = 0.9;
}
return item;
},
}),
],
});

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

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

  • defaultLocaleString。その値はlocalesキーの1つとして存在する必要があります。
  • localesRecord<String, String>、キー/値のペア。キーはページパス内のロケール部分を検索するために使用されます。値は言語属性であり、英字とハイフンのみが許可されます。

言語属性について詳しく読む

ローカリゼーションについて詳しく読む

astro.config.mjs
import { defineConfig } from 'astro/config';
import sitemap from '@astrojs/sitemap';
export default defineConfig({
site: 'https://stargazers.club',
integrations: [
sitemap({
i18n: {
defaultLocale: 'en', // `https://stargazers.club/`の後に`es`または`fr`を含まないすべてのURLは、デフォルトのロケール、つまり`en`として扱われます
locales: {
en: 'en-US', // `defaultLocale`の値は`locales`キーに存在する必要があります
es: 'es-ES',
fr: 'fr-CA',
},
},
}),
],
});

結果のサイトマップは次のようになります。

sitemap-0.xml
...
<url>
<loc>https://stargazers.club/</loc>
<xhtml:link rel="alternate" hreflang="en-US" href="https://stargazers.club/"/>
<xhtml:link rel="alternate" hreflang="es-ES" href="https://stargazers.club/es/"/>
<xhtml:link rel="alternate" hreflang="fr-CA" href="https://stargazers.club/fr/"/>
</url>
<url>
<loc>https://stargazers.club/es/</loc>
<xhtml:link rel="alternate" hreflang="en-US" href="https://stargazers.club/"/>
<xhtml:link rel="alternate" hreflang="es-ES" href="https://stargazers.club/es/"/>
<xhtml:link rel="alternate" hreflang="fr-CA" href="https://stargazers.club/fr/"/>
</url>
<url>
<loc>https://stargazers.club/fr/</loc>
<xhtml:link rel="alternate" hreflang="en-US" href="https://stargazers.club/"/>
<xhtml:link rel="alternate" hreflang="es-ES" href="https://stargazers.club/es/"/>
<xhtml:link rel="alternate" hreflang="fr-CA" href="https://stargazers.club/fr/"/>
</url>
<url>
<loc>https://stargazers.club/es/second-page/</loc>
<xhtml:link rel="alternate" hreflang="es-ES" href="https://stargazers.club/es/second-page/"/>
<xhtml:link rel="alternate" hreflang="fr-CA" href="https://stargazers.club/fr/second-page/"/>
<xhtml:link rel="alternate" hreflang="en-US" href="https://stargazers.club/second-page/"/>
</url>
...

サイトマップをスタイル設定して見栄えを良くするためのXSLスタイルシートのURL。

設定された値は、ローカルスタイルシートの場合は設定されたsite URLからの相対パス、または外部スタイルシートへの絶対URLリンクのいずれかです。

astro.config.mjs
import { defineConfig } from 'astro/config';
import sitemap from '@astrojs/sitemap';
export default defineConfig({
site: 'https://example.com',
integrations: [
sitemap({
xslURL: '/sitemap.xsl'
}),
],
});

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

このオプションは、Astroサイトを既存のサイトマップファイルを持つドメインに統合する場合に役立つことがあります。

astro.config.mjs
import { defineConfig } from 'astro/config';
import sitemap from '@astrojs/sitemap';
export default defineConfig({
site: 'https://stargazers.club',
integrations: [
sitemap({
filenameBase: 'astronomy-sitemap'
}),
],
});

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

他のインテグレーション

UIフレームワーク

SSRアダプター

その他

貢献する コミュニティ スポンサー