Adding a Sitemap to Your Stackbit Gatsby Site

A sitemap.xml is useful for submitting to search engines like Google that use this to assist in properly crawling your site. Having a sitemap is another way to improve your site SEO. In this case, we will be utilizing a Gatsby plugin called simply gatsby-plugin-sitemap

1. Open the command line/Terminal, navigate to your projects directory and install the plugin.

npm install --save gatsby-plugin-sitemap

2. Open gatsby-config.js in your code editor. Under the plugins section, add an entry for gatsby-plugin-sitemap as below (note that the ... is where the other existing plugins listed will exist)

plugins: [
        `gatsby-plugin-sitemap`,
        ...
]

3. Open site-metadata.json and add an entry for siteUrl right after the opening curly bracket (aagin, the ... represents the rest of the file):

{
    "siteUrl": "https://good-celery-27120.netlify.app/",
    ...
}

4. This plugin only runs when the site is run in production mode, so to test it, open the command-line/Terminal and use the following command to run your site:

gatsby build && gatsby serve

Then navigate to http://localhost:9000/sitemap.xml to view your sitemap.

It's worth noting that the gatsby-plugin-sitemap plugin is configurable. By default it includes every page on your site. Check the documentation for customization options.