Gatsby set lang attribute to html

Question

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.

Andre · Answer 1 · 2020-10-23T16:21:08.320

36

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',
  }}
/>

edited Oct 23 '20 at 16:21

answered Oct 23 '20 at 16:16

Andre

4,185
5
22
32

5

This is not the way to do it in 2022. Gatsby recommend using Gatsby Head which is built-in: https://www.gatsbyjs.com/docs/reference/built-in-components/gatsby-head/ – Worm Nov 23 '22 at 10:02

score 8 · Answer 2 · answered Dec 16 '22 at 20:13

According to the new Head Api doc (added in gatsby@4.19.0) you can avoid the Helmet dependency including inside the gatsby-ssr.js or gatsby-ssr.ts file, using the setHtmlAttributes function.

exports.onRenderBody = ({ setHtmlAttributes }) => {
  setHtmlAttributes({ lang: "en" })
}

score 2 · Answer 3 · answered Feb 10 '23 at 10:24

2

An alternative to Arthur Violy's answer using the Gatsby Head API and ES6:

export const onRenderBody = ({ setHtmlAttributes }) => {
  setHtmlAttributes({ lang: "en" });
};

answered Feb 10 '23 at 10:24

Lucy Mac

71
6

score 0 · Answer 4 · answered May 24 '22 at 15:03

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>

Gatsby set lang attribute to html

4 Answers4