Supporting multiple languages in a PWA — Part Four — Let search engines know your supported languages

This is part four of this blog post. Here’s links to part one, two and three.

Tell Google your page is available in other languages

Even though Google’s web crawler is quite smart and should find the domains for each language, it helps if you tell Google you have different translations for your web page.

If you follow Google’s documentation, you see that on the English version of your site, you can add a link tag that tells Google there is a Dutch version:

NOTE: For those who didn’t follow part 1–3, I pretend that localhost is an english domain like example.com and 127.0.0.1 is a Dutch domain like example.nl. This way you can follow this tutorial without having real domains.

And a link tag in the Dutch version of your site that tells Google there is an English version:

So how do we make sure this gets generated automatically? Especially if you support more than two languages. Below you can find out how I did this with react-helmet.

Getting the code

If you didn’t follow the first three blog posts, you can download the following the code so fat from Github. Do a git clone https://github.com/Leejjon/pwa-seo and then switch to the 3.0 tag by running: git checkout tags/3.0

I extended (new code is bold) my PageHelmet.tsx file:

We can remove the PageHelmet it from the App.tsx as the views (Home.tsx, News.tsx and About.tsx) already contain the PageHelmet.tsx, :

The result:

When you browse to the other pages, the alternate url changes along.

Now if we go to the Dutch version, we see that the alternate link shows the English pages:

Updating the tests

To be able to verify this element works like above, we need to find it in our test. We can’t find it with the getByText, getByLabelText or getByDisplayValue, so we need to add an id or a test id. Let’s add a data-testid in the PageHelmet.tsx file and use the getByTestId as it will make our test code a bit shorter:

Let’s update the first test in App.test.tsx to check if the alternate link renders properly:

See the full test here.

This was it so far. I will write another post on how to add canonical links to prevent duplicate indexing.

Java/TypeScript Developer. Interested in web/mobile/backend/database/cloud. Freelancing, only interested in job offers from employers directly. No middle men.

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store