SEO comparison of Gatsby vs. Next.js vs. Astro

Published: February 18, 2023Updated: February 19, 2023

This comparison between Gatsby, Next.js and Astro (Astro.js) is focused entirely on their SEO. Let’s leave things like how easy they are to maintain, how developer friendly they are, how good their ecosystems are, and everything else, to some other article. We only focus on SEO here.

As you can create the same custom components and content on any of them, the technical SEO side is a high deciding factor in this comparison.

SEO comparison in table form

By clicking the question in the table you can get more in-depth information about the specific comparison point. They will direct you lower on this page.

Gatsby vs. Next.js vs. Astro SEO comparison more in-depth

Static site generation

Gatsby, Next.js and Astro all support SSG (Static Site Generation). Out of these Gatsby and Astro have been built mainly as SSG tools, whereas Next.js was built as an SSR tool. Nowadays Next.js does have full SSG support and is completely equal to Gatsby and Astro in terms of that. Static generation means that the site is generated into static HTML, CSS and JS files that can be hosted anywhere, and does not require a backend server to serve pages to users. SSR is very beneficial for SEO as it improves page loading speed and is great for crawlers.

Automatic sitemap generation

All three can generate an automatic sitemap that is always up to date. Gatsby does this by using gatsby-plugin-sitemap, Next.js uses next-sitemap, and Astro uses @astrojs/sitemap.

Can technically generate a site that has no JavaScript

All three can generate a site that has zero JavaScript. Out of the three, only Astro does it by default. Gatsby has no JavaScript (no React) when you use the plugin gatsby-plugin-no-javascript or gatsby-plugin-no-javascript-utils. Next has no JavaScript (no React) when you use the unstable_runtimeJS setting.

Is actually often used to generate sites that have no JavaScript

As Astro is the only one that by default uses no JavaScript, it is also the only one that is commonly used without any JavaScript. Both Gatsby and Next.js sites use React out of the box, and that's why probably around 99% of Gatsby and Next.js sites use React, and therefore use quite heavy JavaScript.

So if you truly want a non-JavaScript site, perhaps Astro is the best choice for you.

Image optimization

Both Gatsby and Next.js have wonderful image optimization out of the box.

Astro.js on the other hand is still a bit untested and has some weird image optimization behaviour. For example, the images don't have height and width properties out of the box at all! You have to use really hacky Node.js logic to add the height and width attributes to them. Google Lighthouse goes crazy when with the size attribute warnings when you run an Astro site through it.

Crawler friendliness

All three are extremely crawler friendly and you will get a lot out of your crawler budget with them.

Technically Astro.js is the most crawler-friendly out of them, as it tends to have the least JavaScript, and therefore the crawling process is quicker and uses less of your crawling budget. The less JavaScript the crawler has to execute, the quicker it is done with the page, and the less of your crawler budget it spends.

Has an SEO plugin similar to Yoast SEO on WordPress

Unfortunately, none of the three have anything like Yoast SEO built-in, even as plugins.

Some headless CMS services might have something similar, but no built-in solutions within the frameworks itself.

Getting Lighthouse 100 performance score

All three can achieve a Lighthouse 100 performance score, but Astro has the easiest time at it.

As Astro does not come with JavaScript by default, it has an easier time reaching a 100 performance score. Gatsby and Next.js come with React, which tends to make it harder to reach a full 100 performance score. Not impossible! But harder.

Getting Lighthouse 100 scores on Best practices, Accessibility and SEO

All three have equal chances of reaching a full 100 score on these. These are not affected by the framework, they are more about the skills of your web developer.

Robots.txt file

All three have a way of adding a robots.txt file. With Gatsby, you create the file inside the static folder. With Astro and Next.js, you create the file inside the public folder.

Custom metadata at <head>

All three support metadata at <head>. Gatsby does it by using its Head API. Next.js does it by using next/head. Astro.js does it by using its page template files.

Content is not rendered using JavaScript

None of the three get their page content rendered using JavaScript when your developer knows what they are doing.

However, it is easier to accidentally make content be rendered via JS on Gatsby and Next.js. That's due to React, where you often don't notice something blocking the static site generation process. I do technical SEO consultation, and I quite often see that happening with even large sites.

Conclusion

In terms of SEO functionality, Gatsby, Next.js, and Astro are very similar. All of them can handle static site generation and have almost the same features. Going with any of them is beneficial for SEO and will give you great results.

However, as the comparison shows, Astro does shine for very non-interactive sites. That is thanks to its non-JavaScript nature, as it does not use React like Gatsby and Next.js do.

If your site needs a lot of interactivity, where users click on things and new things appear, you might want to use Gatsby or Next.js. Reason for that is the fact that the two have been built to do just that: static sites with a lot of interactivity.