Photo by Shahadat Rahman on Unsplash

Top 7 GatsbyJS SEO Plugins for 2021

SEO, or search engine optimization, is the part of search marketing that uses ORGANIC tactics to gain visibility in SERPs. With SEO, brands don’t pay for placement on SERPs. Instead, they use a variety of tactics that prompt search engines to show their content near the top of SERPs because the result is valuable and authoritative.

SEO includes hundreds of tactics that can help a brand increase their search rankings. These white hat SEO techniques are often grouped into three categories.

1. On-page SEO optimizes each individual page of a website to target a specific keyword and appeal to search engines. These strategies include: keyword research, content creation, and keyword optimization. On-page optimization in SEO helps search engines understand a page of content and, therefore, give it higher ranks.
2. Technical SEO optimizes the non-content elements of a website and the website as a whole to improve its backend structure and foundation. These strategies relate to: site speed, mobile friendliness, indexing, crawlability, site architecture, structured data, and security. Technical SEO improves both user and search crawler experience, which leads to higher search rankings.
3. Off-page SEO builds a website’s reputation and authority by connecting it to other high-quality websites. Off-page SEO techniques include: link building (acquiring high-quality backlinks) from other websites and managing local listings and directory profiles. When many websites link to a brand’s website, it shows search engines that the brand’s website is trustworthy, reliable, and reputable, which increases its search rankings.

A strong SEO plan doesn’t focus on just one of these three types of SEO, but instead combines all three strategies to produce the best results.

But what does it means for your website with Gatsby.js? I’m going to talk only about technics. Your content is a big part of what will make you rank better. But that’s a topic for another time.

Today, you are gonna learn about the best Gatsby plugins for SEO and what each of these plugins does to improve your site’ s performance and SEO.

A must have

gatsby-plugin-advanced-sitemap

A good XML sitemap acts as a roadmap of your website that leads Google to all your important pages. XML sitemaps can be good for SEO, as they allow Google to quickly find your essential website pages.
XML sitemap lists a website’s important pages, making sure Google can find and crawl them all, also helping it understand your website structure.

Install

npm install --save gatsby-plugin-advanced-sitemap

How to Use

By default this plugin will generate a single sitemap of all pages on your site, without any configuration needed. Just add the code below to your gatsby-config.js file and you should be good to go. I should note that the file will be generated in the root of your website (example.com/sitemap.xml).

Be seen by Google

gatsby-plugin-robots-txt

To make sure Google will crawl your site in the way you want it to, You should add a Robots.txt file:

Install

yarn add gatsby-plugin-robots-txtornpm install --save gatsby-plugin-robots-txt

How To Use

gatsby-config.js

module.exports = { 
    siteMetadata: {
       siteUrl: ‘https://www.example.com' }, 
       plugins: [‘gatsby-plugin-robots-txt’] 
};

Options

This plugin uses generate-robotstxt to generate content of robots.txt. Example gatsby-config.js configuration:

Master your SEO game

gatsby-plugin-react-helmet

React Helmet is a component which lets you control your document head using their React component.
With this plugin, attributes you add in their component, e.g. title, meta attributes, etc. will get added to the static HTML pages Gatsby builds.

You should definetly spend time tweaking and configuring this plugin according to your needs. It is very powerfull and can be used for various scenarios.

Turn your website into Progressive Web App

gatsby-plugin-offline

It creates a service worker for the site and loads the service worker into the client. This way your website will be available to visitors even if the server is down.

Another use for this plugin is to make your website into a PWA (a Progressive Web App).

Speed up your loading time

gatsby-plugin-preload-fonts

Do you want to reduce the time to first meaningful paint? Here’s a plugin allowing you to render something before the fonts finish loading.

Let your site breathe

gatsby-plugin-purge-css

CSS can be a bit complicated. It’s cascading, meaning that sometimes your styles and rules are going to conflict, and you might not notice. So, here comes a great tool to purge your useless CSS to make your website even lighter.

Connect to external sources

gatsby-plugin-preconnect

In your website, you might need to connect to an external source and retrieve content from there. When the HTTP request is sent to the server of the external source, TCP handshakes, TLS negotiations and DNS lookup can cause latency. This, of course, can affect the performance of your website.

And there you have it, my reccomendations for best SEO plugins for Gatsby. I Hope you enjoyed reading, and see you next time.

For more articles, visit:

Marko Bodiroža — Software Engineer, Web Development Expert Consultant