How to set up a sitemap with Gridsome

Oct 20, 2019 by Jose Garrido

Sitemaps are massively important to let search engines (most importantly Google) know about the structure and composition of your website. With the installation of Gridsome you are used to a hands-off approach when it comes to configuring your site since it just works right off the bat. The good news is installing a sitemap in your Gridsome website is easier than I ever did for any other framework.

Install Gridsome Sitemap Plugin

You just have to install the plugin doing npm install @gridsome/plugin-sitemap in your console. Then you add the following snippet to your plugins configuration in gridsome.config.js:

plugins: [
    // any other plugins here
    {
      use: '@gridsome/plugin-sitemap',
      options: {
        cacheTime: 600000, // default
      }
    }
    // extra plugins here
]

And that's all. You should have a sitemap already generated and organized for all the pages of your website in https://your-website.com/sitemap.xml. You can go ahead to your Google Webmasters dashboard and upload your sitemap URL for Google to always have the latest updates of your blog or website.

Since the plugin is an official plugin from Gridsome team you don't have to worry about security or the efficiency of the code you are including in your project. It's optimized to work correctly every time and generate the best sitemap for your Gridsome blog. Check out our sitemap generated by this plugin.

Configure Gridsome Sitemap

Even though the sitemap generated is perfect since the first time, as with most Gridsome plugins you have some level of customization if you want to be more specific in certan sections of your sitemap. Currently the options available for you to play with are:

  1. Excluding a file from the sitemap

You exclude a file from appearing in the sitemap by using the exclude array where each element is a path or file being excluded:

plugins: [
    // any other plugins here
    {
      use: '@gridsome/plugin-sitemap',
      options: {
        exclude: ['/excluded-file-1','/exclude-this-folder/*']
      }
    }
    // extra plugins here
]
  1. Change frequency and priority of sitemap pages

There are some cases where you want to change the frequency at which you update certain pages of your website or how much priority they have when comparing with other pages on your sitemap. There is a way to do this by tweaking the config object.

If for example your team-members page is updated only once per month and has low priority but the weekly reports from your company are updated weekly and are very important compared to other pages you can specify that information in your sitemap like this:

plugins: [
    // any other plugins here
    {
      use: '@gridsome/plugin-sitemap',
      options: {
        config: {
          '/team-members/*': {
            changefreq: 'monthly',
            priority: 0.4
          },
          '/weekly-reports': {
            changefreq: 'weekly',
            priority: 0.8
          }
        }
      }
    }
    // extra plugins here
]

This is the official page for the Gridsome Sitemap plugin.

Did you like the article? Consider subscribing to the newsletter.

The latest articles and resources, sent directly to your inbox. The best part? It's free.