An Interest In:
Web News this Week
- April 1, 2024
- March 31, 2024
- March 30, 2024
- March 29, 2024
- March 28, 2024
- March 27, 2024
- March 26, 2024
Some of Our Sources
- Engadget
- Team Treehouse
- Just Creative
- Pearsonified
- Smashing Apps
- Web Designer Depot
- 24 Ways
- Design Modo
- Willems Lab
- The Verge
Help Webnuz
Referal links:
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!
Original Link: https://dev.to/tomtomdu73/how-to-easily-optimize-your-seo-when-hosting-your-site-with-netlify-2k1c
Dev To
An online community for sharing and discovering great ideas, having debates, and making friendsMore About this Source Visit Dev To