Any idea how I can set html lang attribute with Prismic multi language?

Hello!

I recently started using Gatsby to implement Prismic and I am using the gatsby-source-prismic-graphql plugin. It has been a simple road to display all my content in all the available languages using this plugin.

My current roadblock is how I can solve the <html lang=":lang"> attribute using react-helmet. The lang attribute should change based on the language currently being viewed. E.g. localhost:8000/en should have <html lang="en"> while in /fr <html lang="fr">. Do you have an idea of how I can solve it?

My current gatsby-config.js has some simple configuration…

[...]
shortenUrlLangs: true,
pages: [
   {
       type: 'Home',
       match: '/:lang',
       component: require.resolve('./src/templates/home.js')
   }
]
[...]

Thank you for any guidance!

1 Like

Dumb developer award goes to… :crazy_face:

I have the tendency of overthinking every puzzle I don’t solve. If anyone is in the same boat as me simply go to your templates/[page].js and add:

import { Helmet } from 'react-helmet' 
[...]
<Helmet>
   <html lang={document._meta.lang.slice(0,2)} />
</Helmet>
[...]

And make sure you fetch this _meta { lang } field… :sweat_smile::zipper_mouth_face:

2 Likes

Hi Remi,
Thanks for sharing the solution.
Please let us know if you need any help.

Fares