Gatsby: How to set html lang attribute in starter site?

Created on 14 Aug 2017 · 6Comments · Source: gatsbyjs/gatsby

Perhaps I missed this, but I can't seem to find the code that builds the HTML in order to add a lang attribute to the site.

I'm using Gatsby v1 with the starter site.

Source

luketeaford

Most helpful comment

@oliverjam I think you can do this in your layouts using gatsby-plugin-react-helmet.

Given a default gatsby site with a layout like this:
https://github.com/gatsbyjs/gatsby-starter-default/blob/b2faa3a3ae2a68ca31e5a6ffb0e321cba123fb78/src/layouts/index.js#L39-L45

You can set the language attribute by adding an html tag as a child of <Helmet>:

    <Helmet
      title="Gatsby Default Starter"
      meta={[
        { name: 'description', content: 'Sample' },
        { name: 'keywords', content: 'sample, something' },
      ]}
    >
        <html lang="en" />
    </Helmet>

m-allanson on 4 Oct 2017

👍99 🎉11 ❤10

All 6 comments

Added some docs around this!

KyleAMathews on 14 Aug 2017

Sorry to revive this but it seems a bit excessive to have to extend html.js just to set a lang attribute, given that every site is going to need one.

Would it not make more sense to allow users to configure this in the siteMetadata?

oliverjam on 4 Oct 2017

👍4

@oliverjam I think you can do this in your layouts using gatsby-plugin-react-helmet.

Given a default gatsby site with a layout like this:
https://github.com/gatsbyjs/gatsby-starter-default/blob/b2faa3a3ae2a68ca31e5a6ffb0e321cba123fb78/src/layouts/index.js#L39-L45

You can set the language attribute by adding an html tag as a child of <Helmet>:

    <Helmet
      title="Gatsby Default Starter"
      meta={[
        { name: 'description', content: 'Sample' },
        { name: 'keywords', content: 'sample, something' },
      ]}
    >
        <html lang="en" />
    </Helmet>

m-allanson on 4 Oct 2017

👍99 🎉11 ❤10

Since this still shows up in google search results, I thought it was worth mentioning that adding to Helmet no longer works (I'm using gatsby 2.0.64).

Using the gatsby plugin does:
https://www.gatsbyjs.org/packages/gatsby-plugin-html-attributes/

systemride on 8 Jan 2019

👍5

@systemride we use htmlAttributes in our starters.

See gatsby-starter-default as an example.

DSchau on 8 Jan 2019

👍13

Since this still shows up in google search results, I thought it was worth mentioning that adding to Helmet no longer works (I'm using gatsby 2.0.64).
Using the gatsby plugin does:
https://www.gatsbyjs.org/packages/gatsby-plugin-html-attributes/

Still showing up in google searches.
Wanted to add that the github page for gatsby-plugin-html-attributes has a README which reads simply:

legacy-gatsby-plugin-html-attributes

DO NOT USE

I started to implement the solution shown by @DSchau, only to realise I'd already added the one proposed by @m-allanson and it works. I'm on Gatsby version: 2.20.10 btw.