Supporting multiple languages in a PWA — Part Three — Handling page titles and meta tags

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

How to make page titles and metadata multilingual?

One of the challenges with modern Progressive Web Apps is SEO (Search Engine Optimization). Here’s an excelent article about what metadata tags you can use to increase your chances on being properly indexed in search engines like Google.

Our application is a “single page application” that handles the routing on the client side. You want to make sure that the Google bot is able to find pages that are loaded on the client side and index them with it’s own title and meta description tag.

React Helmet

I use the React-Helmet library to set proper titles and metadata tags per page. For this example I’ll only set the page title and add the description meta tag.

You can install it by running:

npm install react-helmet @types/react-helmet

Add the following to your App.tsx:

Now we have only defined default metatags for all pages within our clientside routing. Let’s override the meta tags for the About page in About.tsx:

Do the same for the Home and News page.

If you only add the title and description tags like I do, you could extract the logic to a component to avoid duplicate code. Create a component called PageHelmet:

I implemented the PageHelmet like this:

In the Home.tsx, About.tsx and News.tsx files you can now use this PageHelmet component:

Regardless whether you created a PageHelmet component like I did or use react-helmet directly, you should see the meta tags change when clicking the urls in the page.

Okay it works. Don’t forget to update the tests!

I discovered how to test whether the page title changes as expected when navigating. For some reason you need to use “waitForDomChange” before we can verify the title. I found this solution in this Github issue. Import:

And add the two new lines to all tests where you want to verify the title:

To obtain the meta tags, we need to query on the document.head. If we want ‘within’ function to obtain elements from the document.head. If you paid attention when copying the PageHelmet.tsx file you already saw I added the data-testid="metaDescription" to the description meta tag. We can use it to find the content attribute and verify whether it contains the correct translation.

Import the within function:

And add these two lines to verify the content of the meta description tag.

If you apply this title and meta tag assertions to every tests in the App.test.ts file will look like this.

This was it!

I hope you enjoyed this article. I would appreciate any feedback. The full source code can be found here.

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