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!
Latest comments (5)
Thank you so much for such a helpful post. You really helped me to optimize site on Netify hosting. I have applied all the SEO techniques to improve the performance of my site. I also used newswire service for well crafted press release. It helped me to get some traffic.
🙏
Hey, Thomas!
Thank you very much for this blog post. I've spent a few weeks optimising the SEO on my personal website hosted on Netlify and this article has really helped to fill in the gaps. I've found the information on duplicates between the Netlify subdomain and a custom domain especially helpful.
I'll try it all and see how it goes.
Cheers!
You are welcome!