Background

Search Engine Optimisation is critical for new start up business site to rank themselves up on search engine(or google) search result list. Even for well established business brand, it is still handy for their help/FAQ pages to be top listed on relevant search so people won't call support centre to increase operation cost. And usually, SEO work is more of development practice improvement. After process is set up, unlike accessibility or security features, those SEO improvements are easy to maintain. Development team can also set up a coding SEO guide wiki page or even custom eslint rules to share knowledge and maintain standard for new joiners.

Gatsby js, as a static site generating tool, is known for its friendly SEO, scalability, security and Content Management System (CMS) support through Multipage Page Application (MPA) architecture. Gatsby gradually gains popularity among react frameworks that usually build app into Single Page Application(SPA). For google bots, executing javascript to get html content is always second choice. More about javascript SEO

Problem

Gatsby js framework has extensive support for SEO. However serious set up is needed to ensure the SEO optimisation is baked in your site starter.

Action list

Based on Gatsby site, attached a chart with effort and impact. Gatsby's starter gives you plenty of options, but none of them are fully or even partially SEO optimised. Rated with impact and effort, actions are classified with three layers:

• Golden(low effort high impact) 🥇 :
  • Robot.txt control
  • Page metadata
  • Sitemap generation
  • URL structure
  • Navigation links
• Silver 🥈 :
  • SPA/MPA optimisation
  • SEO Monitoring
  • Site Moves
  • Canonical urls
• Bronze 🥉
  • Site speed

Next

This is an overview of the action list, I will write a serious of articles to elaborate tech details of items on the chart. I will also be using most starred Gatsby starter - forked blog starter to demo the SEO credits you can claim with Gatsby site. Happy SEO!

Ref links

1. Why Gatsby
2. SPA vs MPA
3. Javascript SEO basics
4. https://github.com/hurricanew/gatsby-starter-blog