New Launch

Take a deep dive into the fastest Gatsby, yet: Gatsby 5!

ContactSign Up for Free

Challenge 9 – Optimize Your Website for Search Engines (SEO)

Hashim Warren
February 26th, 2020

Gatsby was named the #1 new technology to learn in 2020!

To help you learn about Gatsby and our ecosystem, we invite you to take the #100DaysOfGatsby challenge! If you are new to Gatsby, you can follow along with our beginner-friendly weekly prompts. Or if you are familiar with Gatsby and want to go deeper, we invite you to build your first Gatsby Theme.

Learn more about #100DaysOfGatsby here!

Challenge 9: Help Your Site Rank No. 1 in Search Engines

In a previous challenge we asked you to make your site's forms and images more accessible so all people can view and interact with your content. This week we invite you to do the same for robots – namely the search engine "spiders" that crawl the web, indexing and ranking webpages.

Good news – Gatsby gives you a head start to strong search engine optimization (SEO), similar to the way our framework helps you with accessibility. Gatsby sites are blazing fast, which is a positive ranking factor for Google. Also, Gatsby sites avoid some common SEO pitfalls of React projects by creating navigation between routes that search engine spiders understand how to crawl.

An underappreciated feature of Gatsby is the prefetching of pages which makes a site feel snappy and dramatically more engaging. This may reduce user bounce rates and "pogo sticking" which is a major negative ranking factor for Google.

Today we're going beyond the default SEO features of Gatsby, and moving on to advanced enhancements. Use the SEO resources below to make your Gatsby site competitive in search rankings!

SEO Challenge Resources

Customize Your Site's Description in Search Engine Results

Add metadata to pages so search engines and social media sites can display a custom preview of your site's content.

Guide search spider to important or recently updated pages

Learn about sitemaps and add one to your site using a Gatsby plugin.

Create alternate page titles for individual blog posts

Add a new field in your blog's Markdown frontmatter for page titles that will appear in search engines, that may be different than the title of your blog post that appears on the page.

What to Do If You Need Help

If you get stuck during the challenge, you can ask for help from the Gatsby community and the AskGatsbyJS Twitter account. You can find fellow Gatsby Developers on Discord, Reddit, and Dev.

Share on TwitterShare on LinkedInShare on FacebookShare via Email

Full Stack Marketer, writing copy and code -

Follow Hashim Warren on Twitter

Tagged with 100-Days-of-Gatsby, accessibility, contest, learning-to-codeView all Tags

Talk to our team of Gatsby Experts to supercharge your website performance.

Contact Gatsby Now
© 2022 Gatsby, Inc.