SEO for Next.js: How to Add a Sitemap

When it comes to Search Engine Optimization (SEO), having a well-structured website that search engines can easily crawl and index is crucial. One of the most effective tools to achieve this is a sitemap. A sitemap helps search engines discover all the important pages on your website, ensuring they’re indexed properly for better rankings.

Sitemaps provide search engines like Google and Bing with a roadmap of your website's structure. They make it easier for crawlers to navigate your site and index content efficiently. For websites built with Next.js, generating dynamic sitemaps is straightforward thanks to its robust features for managing server-side logic.

In our previous post on Metadata Management for SEO in Next.js, we discussed how to effectively use metadata to optimize your website's visibility for search engines and social media platforms.

SEO for Next.js: How to Optimize Your Application for Search Engines

In this article, learn how to optimize SEO in Next.js by managing metadata and Open Graph properties for better social media previews. We also cover the importance of server-side rendering to boost search engine ranking and engagement, using simple yet effective techniques.

Agile CoderSmruti Ranjan Badatya

In this article, we will dive into adding a sitemap, a crucial component for improving your website’s SEO performance.

If you're using Next.js, a powerful React framework for building fast and modern web applications, adding a sitemap is a straightforward process. In this blog post, we’ll walk through how to add a sitemap to a Next.js project and improve your website’s SEO.

What is a Sitemap?

A sitemap is essentially a file (typically XML) that lists all the URLs on your website that you want search engines like Google to crawl. Sitemaps are used to tell search engines the structure of your website, the importance of individual pages, and how often content gets updated.

There are two common types of sitemaps:

• XML Sitemap: Primarily used by search engines to improve crawlability.
• HTML Sitemap: More of a human-readable format, often used to enhance navigation.

In this guide, we'll focus on creating an XML sitemap for Next.js to boost SEO.

Why Do You Need a Sitemap for SEO?

Adding a sitemap to your Next.js website is a best practice for SEO. Here’s why:

• Improved Crawlability: A sitemap ensures that search engines can find all your important pages, even if they aren't easily discoverable through internal links.
• Better Indexing: For large websites or those with dynamic content, a sitemap helps search engines keep track of new and updated pages.
• Enhanced Site Organization: A sitemap provides a clear structure for search engines, allowing for more efficient crawling and indexing.

In short, a sitemap helps search engines do their job more effectively, improving the chances of your content being indexed and ranked.

How to Add a Sitemap in Next.js

The easiest way to generate a sitemap in a Next.js project is by using the next-sitemap package, which automates the process.

A. Install Necessary Dependencies

First, install the package by running:

yarn add next-sitemap

This package generates the sitemap based on your routing configuration in Next.js, making it easy to manage.

B. Configure next-sitemap.js

Next, create a configuration file in the root of your project called next-sitemap.config.js. This is where you define your site’s URL and set other options like frequency of updates and priority.

Here’s a sample configuration:

module.exports = {
  siteUrl: 'https://www.yoursite.com',  // Your website URL
  generateRobotsTxt: true,  // Optionally generate a robots.txt file
  changefreq: 'daily',      // How often the content changes
  priority: 0.7,            // Page priority for crawling
}

• siteUrl: Your website’s base URL (make sure it’s correct!).
• generateRobotsTxt: Generates a robots.txt file to guide search engine crawlers.
• changefreq: Tells search engines how frequently your content is updated (e.g., daily, weekly).
• priority: A relative priority scale for search engines (between 0.0 and 1.0).

C. Update package.json Scripts

Next, update your package.json file to generate the sitemap after every build. This ensures that the sitemap is always up-to-date.

Add this script under the "scripts" section:

{
  "scripts": {
    "postbuild": "next-sitemap"
  }
}

This script will automatically generate the sitemap whenever you run npm run build.

D. Build and Generate the Sitemap

To generate the sitemap, simply build your project:

yarn run build

After the build process, your sitemap will be available at https://www.yoursite.com/sitemap.xml.

E. Verify and Test the Sitemap

Once the sitemap is generated, you should verify it to ensure everything works correctly. You can manually check your sitemap by visiting https://www.yoursite.com/sitemap.xml in a browser.

Advanced Sitemap Customizations

There are a few advanced customizations you might want to consider:

• Dynamic Routes: If your site has dynamic routes (e.g., user profiles, product pages), you’ll need to dynamically generate sitemap entries for these routes. The next-sitemap package can handle this by accessing the route data during sitemap generation.

const blogIndexSlim = require("./src/helpers/blogIndexSlim")

/** @type {import('next-sitemap').IConfig} */
module.exports = {
  siteUrl: process.env.SITE_URL || 'https://artfulcoding.in',
  generateRobotsTxt: true, // (optional) Create `robots.txt`, set to true if needed
  sitemapSize: 7000,
  additionalPaths: async (config) => {
    const blogPaths = blogIndexSlim.map((post) => ({
      loc: `/blog/${post.category}/${post.slug}`,
      changefreq: 'daily',
      priority: 0.7,
    }));
  
    return blogPaths;
  },
};

• Excluding Pages: If there are certain pages you don’t want to include in the sitemap (e.g., admin pages), you can exclude them using the exclude property in the next-sitemap.config.js

exclude: ['/admin/*']

• Multiple Sitemaps: For large websites with thousands of pages, it’s better to split them into multiple sitemaps. The next-sitemap package supports this through pagination options.

Now that you’ve successfully generated and tested your sitemap in Next.js, the next crucial step is to submit your website to Google Search Console and Bing Webmaster Tools. These free tools from Google and Microsoft help webmasters monitor their website’s presence in their respective search engines, ensuring that your site is being crawled, indexed, and ranked correctly.

Submitting your site to both Google Search Console and Bing Webmaster Tools will maximize your visibility across the most widely used search engines, helping to improve your SEO performance and reach a broader audience.

Remember, SEO is an ongoing process. Regularly updating your sitemap and keeping an eye on its performance in the webmaster tools can further enhance your site’s visibility and success.

That's it for today, see ya ✌️

Smruti Ranjan Badatya

Full Stack Developer @eLitmus

LinkedIn