web

Next.jsとmicroCMSで動的にサイトマップを生成する

公開日:2021年12月19日
最終更新日:2021年12月19日

以下の記事を参考にmicroCMSから情報を取得してサイトマップを生成してみました。

Next.jsで動的にXMLサイトマップを生成する

sitemap.xml.tsxを作成

sitemap.xml.tsxを作成し以下のように書きます。書き方は前回書いたRSSの生成と大枠は同じです。
Next.jsとmicroCMSで動的にRSSフィードを生成する

import { GetServerSidePropsContext } from 'next'
import { client } from '@/libs/client'
import { Blog } from '@/types/Blog'

async function generateSitemapXml() {
  let xml = `<?xml version="1.0" encoding="UTF-8"?>`
  xml += `<urlset xmlns="http://www.sitemaps.org/schemas/sitemap/0.9">`

  const { contents } = await client.get({
    endpoint: 'blog',
  })

  contents.forEach((post: Blog) => {
    xml += `
      <url>
        <loc>https://〇〇〇〇〇〇.com/${post.category.id}${post.id}</loc>
        <lastmod>${post.updatedAt}</lastmod>
        <changefreq>weekly</changefreq>
      </url>
    `
  })

  xml += `</urlset>`
  return xml
}

export const getServerSideProps = async ({
  res,
}: GetServerSidePropsContext) => {
  const xml = await generateSitemapXml()


  res.statusCode = 200
  res.setHeader('Cache-Control', 's-maxage=86400, stale-while-revalidate')
  res.setHeader('Content-Type', 'text/xml')
  res.end(xml)

  return {
    props: {},
  }
}

const Page = () => null
export default Page


robots.txtを作る

publicディレクトリ以下に robots.txt を作り以下のように書きます。
これでクローラーにサイトマップの場所を知らせることができます。

Sitemap: https://〇〇〇〇〇〇.com/sitemap.xml
User-agent: *
Allow: /*
Disallow: /api/*


Google Search Consoleに登録する

Google Search Consoleで生成されたサイトマップを登録します。ステータスは最初は取得できないかもしれないですが、しばらくすると成功します。


About the author

大阪でフロントエンドエンジニアをしています。写真を撮るのが趣味です。よかったら500pxに載せてる写真も見てください。
web上に公開しているので、正確さに可能な限り努力してますが、個人の備忘録程度に書いてるので、ご自身の判断で参考程度に読んでください。
間違いやご意見があれば、コンタクトやSNSに気軽にご連絡ください。

Read next

Category

  • web
  • 雑記