Qiita Teams that are logged in
You are not logged in to any team

Log in to Qiita Team
Community
OrganizationAdvent CalendarQiitadon (β)
Service
Qiita JobsQiita ZineQiita Blog
4
Help us understand the problem. What is going on with this article?
@saitoukun13

Next.jsで手っ取り早くsitemap.xmlを生成するAPIを用意する

Next.jsで作ったwebサイトを検索エンジンにインデックスさせる。
ここでは、SSGするためのデータソースからsitemap.xmlを作ってしまう方法を書く。

sitemap.xmlを生成して返すAPI

sitemaps.orgを確認してフォーマットを確認してほしい。
Next.jsでAPIを用意する方法はいくつかあるが自由に読み替えて使えるとおもう。

sitemap.xmlを生成する

// Example
type post = {
  date: number
  slug: string 
}

const generateSitemap = (posts: post[], location: string): string => {
  let xml: string = "";

  posts.map(post => {
    // YYYY-MM-DD
    const postDate: string = new Date(date).toISOString().split('T')[0];
    const projectURL = location + post.slug;

    xml += `<url>
        <loc>${projectURL}</loc>
        <lastmod>${postDate}</lastmod>
        <priority>0.50</priority>
      </url>`;
  });

  return `<?xml version="1.0" encoding="UTF-8"?>
    <urlset xmlns="http://www.sitemaps.org/schemas/sitemap/0.9">
      ${xml}
    </urlset>`;
};

Next.jsのAPIを使いたい場合

{project}/pages/api/sitemap.ts
import { NextApiRequest, NextApiResponse } from 'next';
export default async (req: NextApiRequest, res: NextApiResponse) => {
  // Replace your code
  const location = "https://{domain}/"
  const posts = await getPosts()
  const sitemap: string = generateSitemap(posts, location)
  res.setHeader('content-type', 'application/xml');
  res.write(sitemap);
  res.end();
}

http://{domain}/api/sitemapにGETリクエストでsitemapを生成して返すapiが出来る。

Next.jsのgetServerSidePropsを使いたい場合

getServerSidePropsはサーバーサイドで実行されるので、こっちでもok。
Next.jsで生成した記事だけインデックスさせたいとかならこっちの方がよいかも。

{project}/pages/{dir}/sitemap.ts
import { GetServerSideProps } from 'next'
export const getServerSideProps: GetServerSideProps = async ({ res }) => {
  // Replace your code
  const location = "https://{domin}/{dir}/"
  const posts = await getPosts()
  const sitemap: string = generateSitemap(posts, location)
  res.setHeader('content-type', 'application/xml');
  res.write(sitemap);
  res.end();

  return { props: {} }
}

const sitemap = () => null
export default sitemap

http://{domain}/blog/sitemapにGETリクエストでsitemapを生成して返すapiが出来る。

Google Serch Consoleからsitemapを追加する

Google Serch Consoleの管理画面から追加する。sitemap.xmlが正しければ、URLを検出してインデックスされるはず。

おまけ robots.txtを書いて配置する

robots.txtは、Googlebotなどのクローラーに対して、クロールの制御をするためのファイル。sitemap.xmlのパスを記述することで、適切にクロールしてもらえる。

name 概要 
Sitemap sitemap.xmlの絶対パスを書く
User-agent 制御したいクローラーの名前を入れる。全てokなら*
Allow クロールを許可するディレクトリ
DisAllow クロールを許可しないディレクトリ

記述例

Sitemap: http://{domain}/api/sitemap
User-agent: *
Allow: /*
Disallow: /api/*

参考

Create a robots.txt file
sitemaps.org
Sitemap with Next.js

今回は手っ取り早くsitemapを作ったが、dynamic routesから生成も出来そう。
Generate sitemap for static site with dynamic routes · Discussion #12403 · vercel/next.js

4
Help us understand the problem. What is going on with this article?
Why not register and get more from Qiita?
  1. We will deliver articles that match you
    By following users and tags, you can catch up information on technical fields that you are interested in as a whole
  2. you can read useful information later efficiently
    By "stocking" the articles you like, you can search right away
saitoukun13
アドテク業界のwebエンジニア2年目。 Qiitaへは個人的な関心や趣味に寄った投稿をします。 twitter: https://twitter.com/saitokun13 ブログ: https://yoppe.now.sh/blog

Comments

No comments
Sign up for free and join this conversation.
Sign Up
If you already have a Qiita account Login
4
Help us understand the problem. What is going on with this article?