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>
)
}
title
and og:title
, description
and og:description
), but since this is a reusable component it isn't really more work to include both.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.twitter:card
tag tells Twitter to make the share image as large as possible in a tweet.twitter:title
etc tags, but Twitter falls back on og:
tags, so there's no need to include both.Tufts Meal Plan Wrapped
Mar 2, 2024
Building an e-ink picture frame that displays an iCloud photo album
Jan 9, 2024
2023 in review
Jan 5, 2024
Subscribe to my newsletter for a monthly round-up of new blog posts and projects Iām working on!