Search code examples
reactjsgatsby

(Gatsby) Easiest way to diverge from the `SEO.defaultProps` on a per-document basis?

Most of the pages on my website are in Norwegian—

Seo.defaultProps = {
  lang: `no`,
  ...
}

Some articles, however, are in English.

I use some automatic CSS hyphenation on my website. Thus, I need to set the HTML lang to English in the head of these documents so that the words break properly.

I'm not interested in building a full-scale multilingual site. I just want to be able to diverge from the default language property on a per-document basis.

What's the absolute easiest way to do this? Do I need to change my gatsby-node.js file? Or could I set my template.js file to ask for a lang within each MDX file? Or could I maybe insert an seo-english.js component within the articles I wish to change?

Solution

  • I found it easiest to use Helmet in those posts in which I wished to diverge from the default props.

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