【astro-sitemap】Astroサイトでサイトマップ生成したいならこのプラグインを使おう
こんにちは。
ものすごく久しぶりの投稿になりました。
今年はたくさん記事を投稿していきたいと思ってます。
それに合わせて、このサイトも若干リニューアルをしてついにAstroに移行しました。
Astroはめちゃくちゃアップデートも早いので、少し触らないでおくとどんどん新しい機能が追加されるので使っていて楽しいです。
今回はそのAstroの中でもサイトマップを作成するプラグインを導入してみたので、そちらの使い方を書いてみたいと思います。
もともとはNuxtサイトからの移行なので、そのうち移行のやり方も記事にしていければなぁと思っています。
@astrojs/sitemap
今回使用したのは @astrojs/sitemap というプラグインです。
オフィシャルのものから有志で作成された物までたくさんあるので是非覗いてみてください。
@astrojs/sitemapは静的サイトジェネレーターAstro用のプラグインで、あなたのウェブサイトのサイトマップを自動的に生成します。
これはSEOの観点から非常に有用で、ウェブサイトの全てのページが効果的にクロールされ、インデックスされることを確認します。
この記事では、@astrojs/sitemapの導入方法と使用方法について詳しく説明します。
導入方法
それではまずはインストールです。
まずはターミナルを開いて、プロジェクトのディレクトリに移動します。
次に、npmまたはyarnコマンドを使ってパッケージを追加します。
自動インストール
こちらのコマンドはAstroが導入されていればコードの追加まで自動でやってくれるので便利です。
指示に従ってyを押して進みましょう。
npx astro add sitemapマニュアルインストール
こちらは何らかの都合で自動インストールができないとき用の通常のインストール方法です。
npm install @astrojs/sitemap
# または
yarn add @astrojs/sitemap使用方法
@astrojs/sitemapを使用するには、Astroのconfig file、つまりastro.config.mjsに以下のように記述する必要があります。
ただ、これはマニュアルインストールをした場合のみで自動インストールをしたときは自動で入力までされていると思います。
import { defineConfig } from 'astro/config';
export default defineConfig({
//...
integrations: [sitemap()],
})設定を追加したら、ビルドを行うことでサイトマップが自動的に生成されます。
Astroのビルドコマンドastro buildを実行すれば、プロジェクトのdist/ディレクトリにsitemap.xmlが生成されます。
まとめ
本ブログで説明したように、@astrojs/sitemapはAstroで静的サイトを構築する際に非常に便利なプラグインです。
SEOへの対策として、ウェブサイトにサイトマップを持つことは重要です。
@astrojs/sitemapを使用すれば、あなたのウェブサイトの全てのページが効果的にクロールされ、インデックスされます。
ぜひ試してみてください！