Gatsby set lang attribute to html

Viewed 5432

How would you do it? modify the public folder doesn't seem to work... make your own build and host it how it is? maybe there is a function that I still don't know. Any help is appreciated.

2 Answers

Gatsby recommends using react helmet for this. You can find a lot of best practices around this topic if you look at the Gatsby documentation - how to add meta data.

Follow the step by step guide in the documentation. React helmet is really powerful. Coming back to your question, that's how you can alter the HTML language attribute:

<Helmet
  htmlAttributes={{
    lang: 'en',
  }}
/>

Just an add-in to @Andre's answer, in case you want to use the Open Graph protocol property, e.g: xmlns:og, xmlns:fb... Just wrap the key with the single quote '

<Helmet htmlAttributes={
    {
    lang: 'en',
    'xmlns:og': 'http://ogp.me/ns#',
    'xmlns:fb': 'http://ogp.me/ns/fb#'
    }
  }>

    <meta charSet="utf-8" />
    <meta content="width=device-width, initial-scale=1.0" name="viewport" />
    ....
</Helmet>
Related