How create a sitemap for your Gatsby site

We are adding a sitemap in our all site pages for making sure search engines (such as Google) can find and crawl them all.

So, I will show you how to set a sitemap on the Gatsby site.

Using gatsby-plugin-sitemap

To generate an XML sitemap, you will use the gatsby-plugin-sitemap package.

Install the package by running the following command: npm install gatsby-plugin-sitemap

How to configure

Once the installation is complete, you can now add this plugin to your gatsby-config.js, like so:

Configure siteUrl and add this {resolve: gatsby-plugin-sitemap} into the plugins array. code looks like

module.exports = {
  siteMetadata: {
    title: `InfyOm Technologies`,
    description: `InfyOm Technologies`,
    keyword: `InfyOm Technologies`,
    author: `@gatsbyjs`,
    siteUrl: `http://infyom.com`
  },
  flags: {
    PRESERVE_WEBPACK_CACHE: true,
  },
  plugins: [
    {resolve: `gatsby-plugin-sitemap`},
  ],
}

Above is the minimal configuration required to have it work. By default, the generated sitemap will include all of your site’s pages.

You can exclude a path using the exclude option. you need to configure its

• output (string) The file path and name. Defaults to /sitemap.xml.
• exclude (array of strings) An array of paths to exclude from the sitemap.

code looks like,

module.exports = {
  siteMetadata: {
    title: `InfyOm Technologies`,
    description: `InfyOm Technologies`,
    keyword: `InfyOm Technologies`,
    author: `@gatsbyjs`,
    siteUrl: `http://infyom.com`
  },
  flags: {
    PRESERVE_WEBPACK_CACHE: true,
  },
  plugins: [
    {
    resolve: `gatsby-plugin-sitemap`,
    options: {
      output: `/some-other-sitemap.xml`,
        exclude: [`/category/*`, `/path/to/page`],
        }
    },
  ],
}

NOTE: This plugin only generates an output when run in production mode! To test your sitemap, run: gatsby build && gatsby serve

Now we are done and open the sitemap using your domain. for ex. https://abc.com/sitemap.xml