3 Gatsby plugins we wish we knew of earlier

The Roboto Team

2 mins read

We're starting a shameless, quirky, buzz-feed-esque list about Gatsby plugins we wish we knew about when we started. Let's get the ball rolling:

Next SEO

https://www.gatsbyjs.com/plugins/gatsby-plugin-next-seo/

We wished we knew about this little gem. It essentially allows you to achieve everything you can achieve in a React helmet component, but much faster, with a focus on Structured Data too! We personally use it on the site you're using right now, and love the ability to SSR the SEO via the Gatsby plugin.

For best practices, we recommend creating a giant config inside of your gatsby-config.js file, and using this as a fallback in case you accidentally miss any tags from your future pages. Check out our config below

{
  resolve: "gatsby-plugin-next-seo",
  options: {
    title: "Blazing Fast Web Development",
    titleTemplate: "%s | Roboto Studio",
    description:
      "We build the kind of blazing fast website that make you say: Holy sh** did I just blink, or did that page load",
    opengraph: {
      type: "website",
      locale: "en_GB",
      url: "https://www.roboto.studio",
      site_name: "Roboto Studio",
      images: [
        {
          url: "https://www.roboto.studio/images/og-fire.png",
          width: 1200,
          height: 630,
          alt: "Blazing Fast Websites",
        },
      ],
    },
    twitter: {
      handle: "@roboto_studio",
      site: "@roboto_studio",
      cardType: "summary_large_image",
    },
  },
},

We also find that it's as smooth as you would expect when pulling custom properties from Prismic or Markdown. Goodbye long stressful fights with SEO.

RSS Feed

https://www.gatsbyjs.com/plugins/gatsby-plugin-feed/

Never before did I think we would be writing up a post praising the qualities of an RSS feed and how awesome that functionality is... Until we realised you can potentially pull from that RSS feed directly into a tool like buffer to near enough automate your social feed. Don't worry we've got a post in the pipeline to show you how.

Again, this tool makes it incredibly easy and incredibly fast to generate a list of your latest posts/projects pulled from Prismic and dynamically generate an RSS feed. You can see our RSS feed here, and subscribe if you're one of those weirdos that still use RSS in 2020.

Transition Link

https://www.gatsbyjs.com/plugins/gatsby-plugin-transition-link/

Ok, time for the big one. We left the best until last to see if anyone actually read this far into our posts. We think Transition Link is one of the key factors between a looking like a quick, low budget rush-job vs an ultra slick, well polished, animated experience. You might be asking: "how long does it take to implement such a thing", let me tell you it's roughly 5/10 minutes if that.

Thanks to the beautiful and simple documentation, and frankly the AniLink component that handles a lot of the heavy lifting, this has to be our #1 tool to use on budget, and high-end sites alike. It really takes away from having to meticulously plan page transitions and allows us time to do what we're best at: developing fast stuff.