爆速で Next.js x microCMS で作成したブログに robots.txt とsitemap.xml を追加する
爆速で Next.js x microCMS で作成したブログに robots.txt とsitemap.xml を追加する
2023/09/10 追記
本記事では静的なURLについてサイトマップを作成する方法についてまとめましたが、以下の記事で続編として動的なURL(本ブログの場合は /tags や /articles 以下のURL)についてもサイトマップを作成する方法を書きました。よろしければこちらもご確認ください！
https://zubora-code.net/ja/articles/nextjs-dynamic-sitemap
概要
爆速で Next.js x microCMS で作成したブログに robots.txt とsitemap.xml を追加します。
手順
next-sitemap という npm パッケージを利用します。
$ yarn add -D next-sitemap続いて next-sitemap.config.js というファイルをプロジェクトのルート直下に作成します。
/** @type {import('next-sitemap').IConfig} */
module.exports = {
siteUrl: 'https://zubora-code.net',
generateRobotsTxt: true,
sitemapSize: 7000,
}package.json に以下を追加して、build後に robots.txt と sitemap.xml が自動生成されるようにします。
"postbuild": "next-sitemap"build します。
yarn buildpublicディレクトリに以下のファイルが作成されました。
# *
User-agent: *
Allow: /
# Host
Host: https://zubora-code.net
# Sitemaps
Sitemap: https://zubora-code.net/sitemap.xml<?xml version="1.0" encoding="UTF-8"?>
<sitemapindex xmlns="http://www.sitemaps.org/schemas/sitemap/0.9">
<sitemap><loc>https://zubora-code.net/sitemap-0.xml</loc></sitemap>
</sitemapindex><?xml version="1.0" encoding="UTF-8"?>
<urlset xmlns="http://www.sitemaps.org/schemas/sitemap/0.9" xmlns:news="http://www.google.com/schemas/sitemap-news/0.9" xmlns:xhtml="http://www.w3.org/1999/xhtml" xmlns:mobile="http://www.google.com/schemas/sitemap-mobile/1.0" xmlns:image="http://www.google.com/schemas/sitemap-image/1.1" xmlns:video="http://www.google.com/schemas/sitemap-video/1.1">
<url><loc>https://zubora-code.net/ja</loc><lastmod>2023-09-03T04:51:50.821Z</lastmod><changefreq>daily</changefreq><priority>0.7</priority></url>
<url><loc>https://zubora-code.net/en</loc><lastmod>2023-09-03T04:51:50.821Z</lastmod><changefreq>daily</changefreq><priority>0.7</priority></url>
<url><loc>https://zubora-code.net/ja/aboutme</loc><lastmod>2023-09-03T04:51:50.821Z</lastmod><changefreq>daily</changefreq><priority>0.7</priority></url>
<url><loc>https://zubora-code.net/en/aboutme</loc><lastmod>2023-09-03T04:51:50.821Z</lastmod><changefreq>daily</changefreq><priority>0.7</priority></url>
<url><loc>https://zubora-code.net/ja/privacy_policy</loc><lastmod>2023-09-03T04:51:50.821Z</lastmod><changefreq>daily</changefreq><priority>0.7</priority></url>
<url><loc>https://zubora-code.net/en/privacy_policy</loc><lastmod>2023-09-03T04:51:50.821Z</lastmod><changefreq>daily</changefreq><priority>0.7</priority></url>
</urlset>本サイトの場合は middleware.ts で多言語対応しているため、 robots.txt 及び sitemap.*.xml を対象ファイルから除外します。
export const config = {
matcher: [
'/((?!robots.txt|sitemap.*.xml|api|_next/static|_next/image|favicon.ico|.*.png|.*.jpg).*)',
],
}以上です。
余談
デプロイが完了したら、Google Search Console から sitemap.xml を登録しておきます。本サイトもサイトの登録だけはしていましたが sitemap.xml は登録しておらずGoogle検索に正しくインデックスされていなかったので、検索流入がほぼゼロみたいな状態でした。これで少しは見てくれる人が増えると嬉しいです！！
