web

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

公開日:2021年12月19日
最終更新日:2022年1月29日
目次

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

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

sitemap.xml.tsxを作成

sitemap.xml.tsxを作成し以下のように書きます。書き方は前回書いたRSSの生成と大枠は同じです。
Next.jsとmicroCMSで動的にRSSフィードを生成する
getAllContents については以下の記事を見てください。
microCMSで全記事取得する

import { GetServerSidePropsContext } from 'next'
import { getAllContents } from '@/libs/getAllContents'
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 posts = await getAllContents()

  posts.forEach((post: Blog) => {
    xml += `
      <url>
        <loc>https://〇〇〇〇〇〇.com/blog/${post.category.id}/${post.id}</loc>
        <lastmod>${post.updatedAt}</lastmod>
      </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で生成されたサイトマップを登録します。ステータスは最初は取得できないかもしれないですが、しばらくすると成功します。

サイトマップの知識


見様見真似でサイトマップを実装してみましたが、サイトマップについて少し調べてみました。
全てではないですが、ポイントになりそうなところを書き出してます。

一貫性のあるURL

www 付きのURLの時は、www を省略せずに書く。
また、相対パスで指定しない

サイズの上限

一つのサイトマップにつき、最大50,000件のURLを書き込める。
また、圧縮されていない状態で50MBまで。

無視されるタグ

prioritychangefreq は無視されるため、指定不要です。


サイトマップ内の URL の順番

上から順にインデックスするわけではないので、特に順番の指定はない

lastmod

lastmod は、ページ最終更新日との比較できる場合に使うため、一貫している必要がある。

サイトマップは必ずしも必要ではない

サイトマップは以下のサイトでは作る必要はないそうです。

  • 500ページ以下の小規模なサイト
  • サイト内でリンクされている(直接URLを叩かないと開けないページではない)


個人ブログではなくても問題なさそうです。

参考サイト

About the author

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

Read next

Category

  • web
  • 雑記