Improve your Gatby site rank in search engines
Published: April 19, 2020 | 2 min read100 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.