Ill present you in this article how to have a SEO friendly multilingual web app.

If you want to have worldwide users using your web application, you are at the right place.

As you may know, Google wont display your website in France if it is written in Russian. Obviously, youll need to translate all the pages of your web application for each country targeted. But this is not enough, and here is why I decided to write this article

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

How ? Well see how to use distinct URLs and Hreflang tags.

Prerequisites

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.

Stay SEO friendly

The common solution to translate a web app is to store users language in a local storage or a cookie in the browser/device.

This is correct but not SEO friendly at all as Google can't know that you have multiple languages
Indeed, the Google bot gets your pages through a curl command, and does not have any local storage or cookies.

use distincts URLs!

And distincts URLs comes to the rescue!

You can use them to distinguish your translated pages by:

• domain
• subdomain
• extension
• repertory
• query

As examples, Twitter uses queries:

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

and Wikipedia uses subdomains:

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

Choose the one you prefer, the important point here is to have different URLs

use hreflang!

Hreflang tags are used to specify all the translations available for a page.
It helps Google to understand that your apps has several languages, in addition to the distinct URLs you set up.

The theoretical part is now over, we can move on to the funny part, the implementation
For this part, as its more code oriented, everything is available here and on GitHub.

It gives:

• the setup of the React router according to your distinct URLs
• utils functions
• the setup of hreflang tags with react-helmet

Conclusion

Hope you enjoyed the article, do not hesitate to ask if you have any question on the theoretical part or on the implemation steps. Ill be in the comment section as usual.

Pin & like if you enjoyed this article !