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

 1 year ago
source link: https://dev.to/tomtomdu73/how-to-easily-optimize-your-seo-when-hosting-your-site-with-netlify-2k1c
Go to the source link to view the article. You can view the picture content, updated content and better typesetting reading experience. If the link is broken, please click the button below to view the snapshot at that time.
Cover image for How to easily optimize your SEO when hosting your site with Netlify

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

Jul 23

・2 min read

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!
Enter fullscreen modeExit 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 modeExit 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!

About Joyk

Aggregate valuable and interesting links.
Joyk means Joy of geeK