How to easily optimize your SEO when hosting your site with Netlify

I love Netlify for hosting my static sites. It's free, fast and the automatic deployments with the Github integration is a game changing. You still need to pay attention to a few points if you want to get the best out of it, especially from a SEO point of view.

Static websites made with Gatsby, NextJS or Hugo have everything to boost your SEO score and help you get the golden 100 mark on Lighthouse.

Indeed, expect to see your speed performances soar, with insanely low FCP (First Contentful Paint) , LCP (Largest Contentful Paint) and CLS (Cumulative Layout Shift) values.

The issue

However, a great Lighthouse score does not necessarily mean a better ranking and visibility on search engines. Especially if you host your site on Netlify. The reason? With its default settings, Netlify makes every page of your site available as a page on your custom domain and as a page in a subdomain inside .netlify.app. And God knows how Google for instance does not like duplicate content!

The Solution

Set _redirects file (important!)

First, you need to tell Netlify to redirect your Netlify subdomain to your custom domain. You have two ways to do that:

Create a static folder in your project root and save inside a _redirects file with the following content, by replacing the site name accordingly.

https://[yoursitename].netlify.app/* https://www.[yoursitename].com/:splat 301!

Install gatsby-plugin-netlify plugin, that will automatically generate the _redirects file for you.

Use `rel:"canonical"` on every page

To prevent duplicates and tell Google which page is the original version, make sure to include the following <link> tag inside the <head></head> of every pages.

<link rel="canonical" href="{{ your-base-url }}{{ page-slug }}">

If you have too many pages on your site, doing it manually can quickly become tedious. I suggest you use Gutenberg to automate this process.

Here you are! Your site won't have duplicate content anymore and you should now stay far away from Google SEO penalties.

Other tips

I would also suggest you to use the following Netlify plugins and npm packages to boost your static sites performances

if you used Gatsby: gatsby-plugin-minify, to minify all output HTML files.
Image Optim (Netlify plugin) to compress all your static images
Inline source (Netlify plugin) to inline some sources and assets
Submit sitemap (Netlify plugin) to automatically push your updated sitemap to major search engines after each new build.

If you have any questions, feel free to reach out to me - I'd be happy to help!