Share Website Preview Images in Gatsby With the Open Graph Protocol
When sharing web content across phone, tablet, or laptop, image previews of a website provide a valuable first impression. If you’re developing websites using static site generators in the React ecosystem, such as Gatsby or Next.js, it’s not immediately clear (or at least wasn’t to me) on how to integrate and customize preview images.
This article will show how to create preview images using the Open Graph protocol.
Maybe you’ve pasted a URL to share with a friend and it looks like this:
Let’s get that preview image more exciting.
Standard HTML Open Graph implementation
Using the Open Graph protocol, websites can display preview content of your choosing, including image, title, description and more.
If you’re building an HTML website from scratch and have access to the entire HTML files directly, implementing preview content using Open Graph is pretty straightforward by adding <meta /> HTML elements.
<html prefix="og: https://www.furbaby.rocks">
<meta property="og:title" content="Furbaby is a garage rock band" />
<meta property="og:image" content="https://www.furbaby.rocks/images/og-image.jpg" />
There’s additional Open Graph metadata options including audio, description, locale, video and more, to further describe content. View optional Open Graph metadata properties.
Gatsby Open Graph implementation
So, basically we want to say:
“Hey Gatsby, when you’re building my React components into static HTML files, include some Open Graph <meta /> tags, including a tag which shows a cool preview image when I’m sharing my website url.”
There’s a re-usable <SEO /> component which each Gatsby page component imports to add unique search engine optimization data on a page by page basis.
What is Helmet? We’re using the popular Helmet package to reach outside of our React component and “inject” code into the <head /> section of generated HTML.
The key lines of code from the above gist are:
- Line #6: Import the preview image you’d like to use. Recommended image size is 1200px x 630px, but you could make it square or experiment to taste.
- Lines #22–25: This defines the Open Graph image property, and points to the local image file Open Graph will use when displaying a preview image. When you import an image in React, at build time Gatsby will render the proper path where the image ends up.
Verify Preview Image
Ok, let’s see if our code additions worked.
In your local development environment, go back into your local terminal window and make a fresh build:
// We're using Gatsby in this examplegatsby build
Push up your fresh build to your server. Then send a friend a new message with the site URL link, and it should have your custom image content.
Verify using Facebook Debug Tools
Facebook offers a convenient way to both view your existing Open Graph presence for a website, and also to test Open Graph property changes (so you don’t have to constantly bug friends with repeated test link sharing).
This is just a simple example. Experiment with the Open Graph protocol to sample the possibilities of creating intrigue about your website’s often-timed first impression. Go rock out to Furbaby already.