アルパカログ

Google検索で上位を狙うならば、サイトマップで検索エンジンにサイトの構造を知らせるのは良いアイデアです。

Notion Blogに移転してすぐの方は、まだGoogleにインデックスされていなかったりするのでサイトマップを登録しておくのはおすすめです。

そこでこのエントリでは、Notion Blogでサイトマップを動的に生成して配信する方法を説明します。

サイトマップを作るには、まずサイトマップに載せる内容となるコンテンツの構成を洗い出す必要があります。

例えばこの alpacat.com ですと次のような構成です。

• alpacat.com トップページ
• alpacat.com/blog ブログ
• alpacat.com/blog/tag/xxx 各カテゴリーページ

構成がわかったら sitemap.xml を実際に手書きしてみます。

<urlset xmlns="http://www.sitemaps.org/schemas/sitemap/0.9">
  <url>
    <loc>https://alpacat.com</loc>
  </url>
  <url>
    <loc>https://alpacat.com/blog</loc>
    <changefreq>weekly</changefreq>
  </url>
  <url>
    <loc>https://alpacat.com/blog/tag/xxx</loc>
    <changefreq>weekly</changefreq>
  </url>
  ...
</urlset>

urlset の中に url 要素としてトップページとブログが入っています。

loc は見た目通りURLで changefreq は更新頻度ですね。他にもいくつか指定できる属性があるので興味のある方は調べてみてください。

urlset はそのまま使って大丈夫です。

sitemap.xml ができたので、次にこれを動的に生成してみましょう。

Notion BlogのフレームワークであるNext.jsでは、今のところXMLの配信にISGを使うことはできないようです（HTMLだけ）。

ですので効率は良くないですが、サーバーサイドレンダリング（動的生成）を用いて sitemap.xml を配信します。

今回の変更差分のコミットは下記です。これを見ながら説明していきます。

• Add sitemap.xml - otoyo/notion-blog

全体としては src/pages/api/sitemap.ts を作成し export 用の関数でXMLをレスポンスしています。

この例では createSitemap メソッドでXMLを作っています。

今回の tags のようにリスト要素を生成したい場合は、 mapToURL のようなリスト要素のXMLをメソッドを別途定義します。

生成したXMLは下記のようにXMLとしてレスポンスします。

res.setHeader('Content-Type', 'text/xml')
res.write(createSitemap(tags))
res.end()

next.config.js の rewites() にエンドポイントを追加しておきましょう。

この例では /sitemap に対して今回定義した src/pages/api/sitemap.ts を紐づけています。

return [
        { source: '/sitemap', destination: '/api/sitemap' },
      ]

• Rewrites - Vercel

これで /sitemap にアクセスしたとき動的に生成したサイトマップを返すことができました。

以上です。このエントリではNotion Blogでサイトマップを動的に生成して配信する方法を説明しました。