Ben Borgers

What meta tags you need for a Gatsby site

gatsby

In almost every Gatsby site I make, I create a <Head /> component with all the meta tags I’ll need. I reuse that component on every page, passing in different titles and descriptions.

There’s definitely more meta tags you could use, but I’ve whittled it down to this component:

import React from "react"
import { Helmet } from "react-helmet"

export default ({ title, description, shareImage }) => {
return (
<Helmet>
<title>{title}</title>
<meta name="description" content={description} />

<meta property="og:type" content="website" />
<meta property="og:site_name" content="My Site" />
<meta property="og:title" content={title} />
<meta property="og:description" content={description} />
<meta property="og:image" content={shareImage} />

<meta property="twitter:card" content="summary_large_image" />

<link rel="icon" href="/link/to/favicon.png" />
</Helmet>
)
}

A couple notes