Multilingual SEO hrefland React.js Nest.js - FAST MODULAR PROJECT

Sign In

Join us

Hi, the content you want to access is reserved for spartans.

Spartan

Access to all starters

Access to all modules

Slack where you can ask all your questions

Sponsor developers (70%) and FMP (30%)

Spartan is a subscription managed by Stripe (100% secure) that can be easily stopped whenever you want.

What is a Spartan?Why is it not free?

Multilingual SEO Optimisation hreflang

4 hours of work saved

Web

We will see with with this module how to implement distinct URLs and Hreflang tags to have a fully SEO friendly website.

If you have a web application in react.js and you want to get users around the world without doing anything with SEO, you are at the right place.

The first thing to do is to translate all your web application. Indeed, Google will never display your website in France if all your website is in Russian. Hence, if you want your website available in France you need to translate it in French.

But this is not enough.

Even if you have multiple languages available on your website, you must notify Google that you have them.

We'll need for that: distinct URLs and hreflang tags.

In this module, I will explain all the steps that you need in:

  • distinct URLs
  • hreflang tags

You can use this module to learn how SEO works for multilingual website, or just to copy past it in your project to improve your SEO direclty. ¯\_(ツ)_/¯

You'll find in the module:

  • Source code
  • Quickstart
  • Documentation

Distinct URLs

The easiest way to add several translations on a react.js app is to store the language of the user in a local storage or a cookie.

This is 100% correct but not really 100% SEO friendly.

Indeed, for SEO, the Google Bot will get your website page by page with a curl.

Something like: curl -v https://domainname.com.

In that way, Google doesn't have persistance between pages. This means that it doesn't have neither cookie nor local storage.

Then, if you store your language in a local storage and display dynamically your translation, Google can't know that you have multiple languages.

This is why distincts URLs are important.

There are plenty of possibilities :

  • subdomain
  • domain
  • extension
  • repertory
  • query

Twitter uses queries:

  • https://www.twitter.com?lang=en
  • https://www.twitter.com?lang=fr

Wikipedia uses subdomains:

  • https://fr.wikipedia.org/wiki/LinkedIn
  • https://en.wikipedia.org/wiki/LinkedIn

But we can for example use domains:

  • https://mydomain.com
  • https://mondomaine.com

Or extensions:

  • https://mydomain.fr
  • https://mydomain.en

The must important thing is to have different URLs.

Hreflang

Now that we have different URLs, Google can know that we have different languages.

But, sometimes, Google is a bit stupid and we must explain him everything.

That's why we need to add Hreflang. Hreflang is a tag that specifies to Google all the translations available for one page.

And that's it. After that, your web application will be available around the world.

In this module, we will implement distinct URLs and Hreflang tags to have a website fully SEO friendly.

Fetching data ...

Developer

Gabin

Fullstack developper @ Galadrim

Company

Galadrim

Details

Last update 14/04/2021

FAST
MODULAR
PROJECT

Fast Modular Project is a platform providing reusable codes that can easily fit with your projects.

© FMP - fast.modular.project@gmail.com

© 2021 Fast Modular Project - fast.modular.project@gmail.com