DEV Community

Cover image for How to easily optimize your SEO when hosting your site with Netlify
Thomas Cosialls
Thomas Cosialls

Posted on

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.

image

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.

image

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!
Enter fullscreen mode Exit fullscreen mode

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 }}">
Enter fullscreen mode Exit fullscreen mode

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!

Discussion (3)

Collapse
blessedzulu profile image
Blessed Zulu

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!

Collapse
saleenatp profile image
saleena tp

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.

Collapse
raymondritter profile image
RaymondRitter

Hello Sir, I have read your post, it is very good and helpful. But now I am creating profile in linki so I am busy later. Thanks for sharing this post.