DEV Community

What Does Gatsby Mastery Look Like?

Michael Caveney on June 26, 2019

Few web dev technologies sparked joy for me like Gatsby, and I've been thinking about what real mastery in the framework looks like. The obvious th...
Read full post
Collapse
 
stemmlerjs profile image
Khalil Stemmler • • Edited

Some of the things I've learned after using Gatsby since v1.

Basics

  • know how to design and build an entire site from design to implementation
  • know how to query markdown, files, etc
  • know how to create a blog
  • know how to create tags/categories pages
  • know how to avoid failing builds by mentioning browser APIs
  • know how to reuse graphql fragments across components
  • know how to deploy to Netlify

SEO

  • know how to optimize the entire site for SEO in a clean way
  • know how to optimize server-rendered SEO pages
  • know how to use a prerendering service to optimize dynamic routes for social cards

Plugins

  • know how to build your own plugins to source data from an API and turn it into GraphQL nodes
  • know how to package your plugin as an npm module

More

  • know how to integrate with a CMS (like contentful)
  • create a serverless real-time JAM-stack app with users, authentication, chat
  • know how to trigger new builds using webhooks
  • know how to use a mixture of dynamic and prerendered content on the same pages
  • know how to make a music player with Gatsby
  • build an ecommerce site that handles payments with Gatsby
Collapse
 
dylanesque profile image
Michael Caveney •

This is a great list! Could you dig into what you mean when you say "optimize the entire site for SEO in a clean way"? Would that just be by using plugins like gatsby-plugin-react-helmet, or is are there other major considerations for that?

Collapse
 
stemmlerjs profile image
Khalil Stemmler • • Edited

Yeah for sure!

So, yes, using that plugin is a part of it. With respect to cleanly optimizing the site for SEO, we have to consider:

  • what are the different types of static pages that we have?: blog-post, normal, landing-page
  • what are the dynamically generated pages that we have?: user-profile, events, job-postings, etc

Because we want all of those different PageTypes to be SEO-optimized, we gotta do a little bit of design work to figure out how to cleanly address that problem.

Perhaps if every Gatsby page or template that were wrapped in a <Layout/> component, we might be able to provide some props to the <Layout/> and do all the SEO-setup in one place (Layout).

Also, if we were to setup JSON-LD, that would probably be different for each PageType (blog post JSON-LD vs. breadcrumb JSON-LD).

So there's a lot of things to consider about how to cleanly structure your SEO.

I wrote an article about this a while back, but it's a bit outdated now. Here's how I'm currently doing it on my blog.