Love Beautiful Code

サイトマップとは

念の為、サイトマップについて。 サイトマップとは、サイト全体のページ構成を地図のように一覧で記載しているページのこと。 ユーザーや検索エンジンにサイト内容をわかりやすく伝える役割を担っており、サイトマップを用意しておくことで、ユーザーが目的のページを探しやすくなったり、検索エンジンがサイト内のページを知らせることができる。

sitemap.xml 作成手順

1. install sitemap package

sitemap.xmlを簡単に作成できるパッケージをインストールします。

1$ npm install --save sitemap

2. サイトマップ用ルーティング作成

/api/sitemap でsitemap.xmlを取得できるように pages 配下に /api/sitemap.ts を追加。

sitemap.ts内での処理の概要

• sitemap stream を作成
• 記事情報を取得する
  • 今回はcontentful apiで取得
• 記事情報をsitemap stream に追加
  • url, changefreq, priority, lastmod
• sitemap.xmlを返す

コード

1import type { NextApiResponse, NextApiRequest } from 'next'
2import { SitemapStream, streamToPromise } from "sitemap"
3
4import * as contentful from 'contentful'
5
6const contentfulClient = contentful.createClient({
7  space: process.env.NEXT_PUBLIC_CONTENTFUL_SPACE || '',
8  accessToken: process.env.NEXT_PUBLIC_CONTENTFUL_API_KEY || ''
9})
10const defaultPages = [
11  { url: '/', changefreq: 'weekly', priority: 1.0 },
12  { url: '/works', changefreq: 'daily' },
13  { url: '/posts', changefreq: 'daily' },
14  { url: 'resume', changefreq: 'monthly' }
15]
16const sitemap = async (_: NextApiRequest, res: NextApiResponse<string>) => {
17  try {
18    // 1. sitemap stream の作成
19    const sitemapStream = new SitemapStream({ hostname: process.env.NEXT_PUBLIC_HOST })
20
21    // 2. 記事情報を取得する
22    const query = { content_type: 'blog', order: '-sys.createdAt' }
23    const { items }: contentful.EntryCollection<contentful.EntryFields.Object> = await contentfulClient.getEntries(query)
24
25    // 3. 記事情報をsitemap stream に追加
26    defaultPages.forEach(page => sitemapStream.write(page)) // 静的ページの登録
27    items.forEach(item => {
28      const id = item.sys.id
29      const updatedAt = new Date(item.sys.updatedAt).toLocaleDateString('ja-JP')
30      sitemapStream.write({
31        url: `/posts/${id}`,
32        changefreq: 'daily',
33        priority: 0.9,
34        lastmod: updatedAt
35      })
36    })
37    sitemapStream.end()
38    const sitemapXML = (await streamToPromise(sitemapStream)).toString()
39
40    // 4. sitemap.xml を返す
41    res.writeHead(200, { 'Content-Type': 'application/xml' })
42    res.end(sitemapXML)
43  } catch(err) {
44    console.error(err)
45    res.send(JSON.stringify(err))
46  }
47}
48export default sitemap

最後に

/api/sitemap にアクセスし、sitemap.xmlが表示されるかを確認。 google search consoleにも上記pathを指定するとインデックスを貼ることもできる

参考文献

https://digitalidentity.co.jp/blog/seo/seo-tech/how-to-make-sitemap.html https://kirazhang.com/posts/set-up-google-search-console-nextjs-vercel-website