Astroでサイトマップを設定するにはどうすれば良いですか？

Astroプロジェクトにサイトマップ生成のプラグインをインストールし、astro.config.mjsファイルで必要な設定を行うことで、自動的にサイトマップを生成できます。

サイトマップはSEOにどのような影響を与えますか？

サイトマップは、検索エンジンがサイトのページ構造を理解しやすくするため、インデックスの効率を高め、サイト全体のSEO効果を向上させます。

Astroで生成されたサイトマップはどのように確認できますか？

サイトマップは通常、/sitemap.xmlのURLで確認できます。ブラウザでアクセスして、正しく生成されているか確認してください。

サイトマップ生成時に注意すべきポイントは何ですか？

サイトの全ページが正確にインデックスされるよう、除外したいページやパスを適切に設定することが重要です。また、サイトマップが最新の状態に保たれるよう、定期的な更新も考慮しましょう。

【Astro】にサイトマップ生成ツールを追加する方法：astrojs/sitemapの使い方と設定方法

Astroプロジェクトをビルドする際にページに基づいてサイトマップを自動生成する便利なツール、@astrojs/sitemapについて詳しく解説します。サイトマップを活用することで、Googleなどの検索エンジンがサイトを効率的にクロールし、SEOパフォーマンスが向上します。@astrojs/sitemapを使って、AstroでのSEO対策を始めましょう！詳しくは、Astro公式サイトをご参照ください。

Astro Sitemapとは

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

サイトマップファイルは、大規模な多ページサイトに推奨されます。サイトマップを使用しなくても、ほとんどの検索エンジンはサイトのページをリスト化できますが、サイトマップを使うことで検索エンジンにとってよりフレンドリーなサイトにすることができます。

Astro Sitemapを使うと、このXMLファイルを自分で作成する必要がありません。このインテグレーションは、静的に生成されたルートをクロールし、getStaticPaths()によって生成された動的ルートも含めてサイトマップファイルを作成します。

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

インストール

Astroには、公式インテグレーションのセットアップを自動化するastro addコマンドが含まれています。手動でインストールすることも可能です。

自動インストール

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

npx astro add sitemap

手動インストール

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

npm install @astrojs/sitemap

次に、astro.config.*ファイルにインテグレーションを適用します。

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

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

使用方法

@astrojs/sitemapは、サイトマップを生成するためにデプロイされたサイトのURLを知る必要があります。サイトのURLをastro.config.mjsのsiteオプションに追加します。このURLはhttp://またはhttps://で始まる必要があります。

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

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

この設定が完了すると、サイトをビルドする際にoutputディレクトリにsitemap-index.xmlとsitemap-0.xmlファイルが追加されます。sitemap-index.xmlはすべての番号付きサイトマップファイルへのリンクを含み、sitemap-0.xmlはサイト内のページをリスト化します。非常に大規模なサイトの場合、sitemap-1.xmlやsitemap-2.xmlなどの追加ファイルも作成されることがあります。

サイトマップの発見

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

内のサイトマップリンク

サイトの<head>にサイトマップインデックスファイルへのリンクを追加します。

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

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

ウェブサイトにrobots.txtがある場合、サイトマップインデックスのURLを追加してクローラーが見つけやすくします。

User-agent: *
Allow: /

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

astro.config.mjsのsite値を再利用したい場合、robots.txtを動的に生成することも可能です。public/ディレクトリに静的ファイルを使用する代わりに、src/pages/robots.txtファイルを作成し、以下のコードを追加します。

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

フィルター

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

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/',
    }),
  ],
});

カスタムページ

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

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です。エントリが多い場合、サイトマップインデックスと複数のサイトマップが作成されます。

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

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

changefreq, lastmod, および priority

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

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'),
    }),
  ],
});

シリアライズ

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

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

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

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

export default defineConfig({
  site: 'https://stargazers.club',
  integrations: [
    sitemap({
      i18n: {
        defaultLocale: 'en', // すべてのURLが`es`や`fr`を含まない場合、デフォルトロケールとして`en`が使用されます。
        locales: {
          en: 'en-US', // `defaultLocale`の値は`locales`キーに含まれている必要があります。
          es: 'es-ES',
          fr: 'fr-CA',
        },
      },
    }),
  ],
});

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

<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>

まとめ

@astrojs/sitemapは、サイトマップの生成を自動化する便利なインテグレーションです。サイトのSEOを向上させるために、ぜひ活用してください。