Gatsby’s SEO Plugin & It’s Advantages

1_Cljwj7wJbtFLpmrvHQLOSg
Dear reader, today, I will introduce you The Great Gatsby of development world 🙂 If you don’t know what Gatsby is, Gatsby is a framework that uses React.js for creating fast websites, and it has a SEO plugin which is useful for your websites search visibility. So let’s dig deep into the subject.

Server Rendering

For SSR (Server Side Rendering), Gatsby has a plugin called “gatsby-plugin-offline”, when Google finds a site, it opens the site in sandbox mod (for testing site) and then, shows us. Thanks to this plugin, it shows every file, content and stuff to Googlebot. Googlebot looks our files and tests it, after that it shows our site to user. The magic happens when user clicks to that. Firstly, it shows first interaction places than continues to download other files. In short, this plugin provides fast downloading and user-friendly website.

If you wondering that plugin works or not, you should use this codes to terminal. This codes will be help you.

1_XS-zluEbdwwvTLbnUhoQnA

For Windows (Powershell) :

Invoke-WebRequest https://www.gatsbyjs.org/docs/seo | Select -ExpandProperty Content

For Mac OS/Linux:

curl https://www.gatsbyjs.org/docs/seo

Speed Boost

In 2018, Google announced that speed factor was added to Google’s search algorithm. For this reason, fast-opening sites are one step ahead of other sites for Googlebot.

1_atnmAPGxUCT755OxY3ArYg

Gatsby has optimization for this:

  • Static file renders, progressive image uploads, pre-caching and PRPL model etc.

PRPL: Website architecture that developed by Google for building websites and apps that work exceptionally well on smartphones and other devices with unreliable network connections.

PRPL stands for:

  • Push critical resources for the initial URL route using and HTTP/2.
  • Render initial route.
  • Pre-cache remaining routes.
  • Lazy-load and create remaining routes on demand

So what is Lazy-load? Here what it is… Websites that includes big files and images are very hard to open. That’s why we use the Lazy-Load. We add an additional Js file that includes what file or image opens first and last. That added Js file increases user experience for who have low internet connection.

For further information, please visit: https://github.com/gatsbyjs/gatsby/issues/431

Page Metadata

Gatsby provides us the page metadata. With this attribute, we can write meta tags to pages, page titles, sections, and etc. This attribute shows SEO tags to GoogleBot and helps it to understanding our site content. This directly improves our site’s search visibility.

Recommendation: Use Gatsby’s react-helmet plugin for SSR

To sum up everything, three advantages that Gatsby provides us are:

    • Server Side Rendering(SSR)
    • Speed boosts
    • Metadata Pages

Thank you for your time!

By Tuna Guralp

Comments

There are no comments yet.

Leave a comment