What meta tags you need for a Gatsby site
January 1, 2020
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
- There’s some repeats (
title
andog:title
,description
andog:description
), but since this is a reusable component it isn’t really more work to include both. - The
og:image
is quite important to me, because a nice share image makes the link stand out when it’s shared on Twitter or elsewhere. - The
twitter:card
tag tells Twitter to make the share image as large as possible in a tweet. - You can also add equivalent
twitter:title
etc tags, but Twitter falls back onog:
tags, so there’s no need to include both.
Subscribe to my newsletter!
A weekly round-up of new blog posts and updates to projects I’m working on.