SEO and multilingual web app with distinct URLs

#react #webdev #opensource #seo

I’ll 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 won’t display your website in France if it is written in Russian. Obviously, you’ll 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 ? We’ll 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 user’s 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 it’s 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. I’ll be in the comment section as usual.

Pin & like if you enjoyed this article ! ❤️