How to Add a Sitemap to a Gatsby site

Add a Sitemap to GatsbyJS site with headless WordPress data

 

I’m used to building with WordPress and one of the great things about that application platform is the incredible SEO functionality and mechanics built in or easily installable with plugins. When I converted my WordPress blog to a Gatsby site, I had to think about things that used to be available to me right out of the box with WordPress. One of those was to add a sitemap.

What is a sitemap?

If you don’t already know, a sitemap is an xml list of all the pages on your site. It’s an easy (probably efficient) way for search engines to understand what your site is comprised of. There is also more information about the pages of your site called metadata. You may have heard the term metadata before if you’ve spent any time in WordPress land. Metadata is simply data about the page itself, not the content. Does the page change frequently? Does the page have videos or rich media that could benefit from adding a little context?

For more information on sitemaps, Google has a great article on them and why they’re important.

Why add a sitemap?

Need as in need need? Will your site not launch or be seen by your readers? No. You might as well get all the bang for your buck though. You’ve put all this hard work into making your site and content findable by your audience. Sitemaps, at least in WordPress, are easy to set up. Yoast SEO, my favorite SEO plugin, has an option for sitemaps. There are a few other plugins in the WordPress Plugin Repository as well. But a Gatsby site is a little bit different. I’ll show you how easy it is to add a sitemap to your GatsbyJS site.

Plugins are your friend

GatsbyJS sites have a powerful plugin system that considering how young the project is is remarkably comprehensive.

Go to the GatsbyJS docs and search for sitemap. Then you copy and paste that NPM script into your own project. Once installed you update your gatsby-config.js file with the new plugin information. In your plugins array in the gatsby-config.js file, you’ll add gatsby-plugin-sitemap. Easy.

All of this is outlined in the GatsbyJS sitemap plugin documents. What tripped me up was actually testing it. I’m only on a development environment most of the time. But to test you need to actually build the site you’re working on. Add the following commands to build and serve the site locally.

gatsby build then gatsby serve .

During development, your site has a development server at port 8000. But I noticed the production build server is on port 9000. Not a big deal but worth noting if it’ll save time looking for the site’s sitemap. This too is outputted from the terminal.

Summary

This is all easy stuff if your building with GatsbyJS, but not as easy as WordPress. WordPress is still one of the most user-friendly and powerful platforms out there. Gatsby has made huge leaps in the performance department and is doing great things to make developing on that system incredibly easy and satisfying for developers.

I encourage everyone interested to check out the GatsbyJS docs and the GitHub repository. At the time of this writing, GatsbyJS v2 is in beta, but they are moving fast so I expect to see the v2 in the wild soon.