Top Gatsby Plugins For Developer Blogs
Tags: gatsby, blog, seo, webdev
Published: 2020-05-01 17:17:23

---
title: Top Gatsby Plugins For Developer Blogs
published: true
description: I've published dozens of articles on my Gatsby site and these are the top plugins I recommend to enhance your blog's SEO and user experience.
tags: Gatsby, Blog, SEO, webdev
canonical_url: https://www.aboutmonica.com/blog/2020-04-19-essential-gatsby-plugins-for-blogs
cover_image: https://dev-to-uploads.s3.amazonaws.com/i/en3wgctf4mpc3jvq4fyl.jpg
---
This article was originally published on [www.aboutmonica.com](https://www.aboutmonica.com/blog/2020-04-19-essential-gatsby-plugins-for-blogs).


I've published dozens of articles on [my site](https://www.aboutmonica.com/), which was built using [Gatsby](https://www.gatsbyjs.org/). In the past year I decided to invest more time into maintaining my blog and want to share the top plugins I recommend to enhance your Gatsby blog. Gatsby has a [vast library of plugins](https://www.gatsbyjs.org/plugins/) which are Node packages that are designed to work with Gatsby APIs to extend the functionality of Gatsby sites.

I was motivated to invest more in maintaining my site because as a creator on the web it's important to have a place that you have full control over that houses all of your content. More and more developers are migrating back to self-hosting their blogs and thus retaining greater autonomy and ownership over their content.

{% twitter 1097956302456844289 %}

I encourage all developers who choose to blog and have the time/resources to not only maintain their blog but to consider cross-posting to sites like [dev.to](https://dev.to). If you're just getting started with syndicating content check out this piece by Stephanie Morillo on [How Blog Post Syndication Works](https://www.stephaniemorillo.co/post/how-blog-post-syndication-works).

{% twitter 1251537525145042953 %}

## Recommended Gatsby Plugins

- [gatsby-plugin-google-analytics](https://www.gatsbyjs.org/packages/gatsby-plugin-google-analytics/)

One of the features I appreciate from [Medium](https://medium.com/) is that they provide content authors with access to analytics for content that they post. This information can be helpful when tracking which content resonates more with your audience and get a better gauge on how people are finding your site. If you would like access to metrics like page views, average session duration, etc. then you need to pro-actively install analytics as data usually cannot be collected retroactively. If you are interested in using Google Analytics in particular then you should check out `gatsby-plugin-google-analytics`.

Alternative: [Adding a hit counter to your site](https://twitter.com/JoshWComeau/status/1248266542745354242?s=20)

- [gatsby-plugin-react-helmet](https://www.gatsbyjs.org/packages/gatsby-plugin-react-helmet/)

Speaking of using `gatsby-plugin-google-analytics` or a hit counter to learn more about your site's traffic, an essential part of creating discoverable web content is optimizing for SEO. The `gatsby-plugin-react-helmet` is built on-top of [react-helmet](https://github.com/nfl/react-helmet) to support server-side rendered SEO. It allows you to configure a site title, description, and other metadata. Updating metadata is essential to providing visually striking previews of content when content is shared on Twitter, Facebook, Slack, text messages and more!

Also, if your experience is anything like mine then debugging metadata images is sometimes an adventure and you may need to use tools like the [Twitter card validator](https://cards-dev.twitter.com/validator) and the [Facebook sharing debugger](https://developers.facebook.com/tools/debug/) to debug image previews.

- [gatsby-plugin-my-social-cards](https://www.gatsbyjs.org/packages/gatsby-plugin-social-cards/)

One way to make your blog stand out more is to have custom images for each blog post vs. a generic-site wide image. Manually creating new images for each blog post can be time-consuming and depending on your strategy is not necessary. I ended up installing `gatsby-plugin-my-social-cards` to generate custom images for each blog post.

In my case I have a base image that looks like:

![base image](https://dev-to-uploads.s3.amazonaws.com/i/pgydkjjlgwzyqd2c429i.jpg)
and then for each article that I post I use `gatsby-plugin-my-social-cards` to generate an image that combines my base image with the title of the article resulting in something that looks like:

![example image preview that would appear on twitter](https://dev-to-uploads.s3.amazonaws.com/i/jnm0ih1wxaaqa9az5hnt.jpeg)


- [gatsby-remark-twitter](https://www.gatsbyjs.org/packages/@weknow/gatsby-remark-twitter/)

If you want to embed relevant tweets like the ones that appear throughout this article into markdown content on your site then check out the `gatsby-remark-twitter` plugin.

- [gatsby-remark-prismjs](https://www.gatsbyjs.org/packages/gatsby-remark-prismjs/)

If the audience for your blog is developers then there's a good chance that some of your articles will feature code snippets. If so, `gatsby-remark-prismsjs` as an extension of [PrismJS](https://prismjs.com/) allows you to set up and style language-specific code syntax highlighting.

Example snippet with PrismJS syntax highlighting:

```js
export function formatReadingTime(minutes) {
  let buckets = Math.round(minutes / 5)

  return `${new Array(buckets || 1).fill("🍿").join("")} ${minutes} min read`
}
```

- [gatsby-remark-autolink-headers](https://www.gatsbyjs.org/packages/gatsby-remark-autolink-headers/)

`gatsby-remark-autolink-headers` allows you to automatically add anchor tags to all article headers. This allows these headers to be linkable similar to how Markdown files render on Github.com by default. This autolink functionality is helpful for allowing people to share links to particular sections of your article and helps make the process of creating table of contents more efficient.

These are 6 of the Gatsby plugins I've found essential to enhancing my Gatsby blog and providing it with better SEO and a richer experience for my audience. The next time I set up a blog using Gatsby I'd consider installing all of these plugins depending on the particular needs of the site.