Improve your Gatby site rank in search engines

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