Improve your Gatby site rank in search engines

Published: April 19, 2020 | 2 min read

100 Days of Gatsby challenge 9. This one involved improving your site's ranking in search engines.

When following the Adding an SEO component portion of the tutorial, I noticed that the guidance initially indicated to declare a location const through the useLocation() method, then switched to using pathname instead. Why?

Also, I noticed that the add page metadata section of Gatsby Tutorial part 8 took a different approach for passing in the metadata into the react-helmet component. Which way is optimal? I assumed the latter option because of the fallback prop structure.

I got a bit stuck creating a sitemap. It wasn't clear while following the instructions how to test the solution. Do you generate a static build and deploy to test? Can you test this while running the site locally? I couldn’t see that sitemap.xml page when running locally using npm run start.

Referring back to Gatsby tutorial part 8 - Preparing a site to go live page, I tried a gatsby build and threw an error in the GraphQL request:

Cannot query field "siteUrl" on type "SiteSiteMetadata".
GraphQL request:13:7
12 |     siteMetadata {
13 |       siteUrl
   |       ^
14 |     }

Once again, I reviewed the instructions. The gatsby-plugin-advanced-sitemap used the siteUrl key rather than the url key — which is used for the SEO tutorial. After I added that siteUrl key, in addition to the url key, the sitemap would build. I still needed to test this in the deployed site to see if the pages populate in the sitemap.

Question: for things like sitemaps and Lighthouse audits, must we always create a production build (gatsby build) and serve it locally (gatsby serve) to test for SEO and performance things? Ahh, this is answered in Challenge 10 in the audit with Lighthouse:

The Gatsby development server is optimized for making development fast, but the site that it generates, while closely resembling a production version of the site, isn’t as optimized.

Good to know. Moving on to 100 Days of Gatsby — Challenge 10.

Back to top