アルアカ - Arcadia Academia

Arcadia Academiaは「エンジニアリングを楽しむ」を合言葉に日本のデジタル競争力を高めることをミッションとするテックコミュニティです。

astro-notion-blog のサイトマップを設定してみる

Featured image of the post

astroでどのようにsitemapを生成するのかということを調べてみました。

最も手軽な方法として@astrojs/sitemapというIntegrations(インテグレーションズ)、いわゆるプラグインみたいな拡張機能を使うことがあげられます。

そんなわけで今回はastroおよびastro-notion-blogでのサイトマップの設定方法を紹介していきたいと思います。

@astrojs/sitemapについて

ビルド時に自動でSitemapを生成してくれる拡張機能です。

メリットやデメリットについてもあるので、一応、そのあたりも触れておきます。

メリット

  • 導入が楽
  • 運用が楽

デメリット

  • 特殊な設定をしたい場合は出来ない可能性もある

例えば、123や220のような数字三桁のスラッグはサイトマップに追加されないというバグがあったようですが(現在は解消されてるっぽいです)、第三者が開発しているものなので、自分の思ったような形でSitemapが生成されない可能性があります。

ただ開発自体は活発っぽいので機能追加やバグはイシューとしてあげておけば対応してくれる可能性もありますし、さいあく自分でプルリクだしたりカスタマイズしてもいいかも知れません。

ちなみに生成されるSitemapについて、オプションである程度は制御できるようですので、そのあたりは導入方法で後述します。

Astro Sitemap 導入方法

@astrojs/sitemapをインストール

#インストール
npm install @astrojs/sitemap

#アンインストール(削除したい場合はこちら)
npm uninstall @astrojs/sitemap

astro.config.mjsを編集する

//astro.config.mjs
import sitemap from '@astrojs/sitemap'; // インポートする

// そのほかの設定

export default defineConfig({
  site: "https://ar-aca.tech",//自身のサイトURLに変更
  base: BASE_PATH,
  integrations: [
    CoverImageDownloader(),
    CustomIconDownloader(),
    FeaturedImageDownloader(),
    PublicNotionCopier(),
    sitemap(), //インポートしたsitemapを追加
  ],
});

Layout.astroにheadにsitemapを追加する

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

以上。めちゃくちゃ簡単ですね。

あとは、Buildするとsitemap-index.xmlsitemap-0.xmlが生成されている筈なのでdist/を確認してみてください。

ちなみになぜ2つファイルが生成されているのかというと記事数が多くなった場合にファイルを分割するためです。

つまりsitemap-index.xmlがSitemap本体であり、他のsitemap-0.xml は動的に生成されるものです。

またSitemapをカスタマイズしたい場合はsite()の引数にオプションを指定できるようです。

以下、filter関数を利用した例です。

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

【公式DOCSより引用】

他にも関数があるので詳しくは公式のDOCSを参照してください。

まとめ

Sitemapってあんまり意識したことがなかったですが、けっこう奥が深いですね。

今回はプログラミンというよりもSEO的なTipsでしたが、この記事が誰かの役にたちましたら幸いです。

最後まで読んで頂きありがとうございました。

参考にさせて頂いた記事

あなたを爆速で成長させるメンタリングプログラムはこちらから↓↓

RUNTEQ(ランテック) - 実践型Webエンジニア養成プログラミングスクールの入会