Share Website Preview Images in Gatsby With the Open Graph Protocol

Adam J. Arling
Aug 27 · 3 min read

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:

Open Graph image unsuccessful preview
Open Graph image unsuccessful preview

Let’s get that preview image more exciting.

Standard HTML Open Graph implementation

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">
<head>
<title>Furbaby Rocks</title>
<meta property="og:title" content="Furbaby is a garage rock band" />
<meta property="og:image" content="https://www.furbaby.rocks/images/og-image.jpg" />
...
</head>
...
</html>

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.”

Take Chicago garage-rock band Furbaby’s Gatsby site as a code example. https://github.com/adamjarling/furbaby

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

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.

Open Graph image successful preview
Open Graph image successful preview

Verify using Facebook Debug Tools

https://developers.facebook.com/tools/debug/

Conclusion

The Startup

Medium's largest active publication, followed by +732K people. Follow to join our community.

Adam J. Arling

Written by

Senior Front-End Developer/Manager — Northwestern University Libraries Repository and Digital Curation

The Startup

Medium's largest active publication, followed by +732K people. Follow to join our community.

Adam J. Arling

Written by

Senior Front-End Developer/Manager — Northwestern University Libraries Repository and Digital Curation

The Startup

Medium's largest active publication, followed by +732K people. Follow to join our community.

Medium is an open platform where 170 million readers come to find insightful and dynamic thinking. Here, expert and undiscovered voices alike dive into the heart of any topic and bring new ideas to the surface. Learn more

Follow the writers, publications, and topics that matter to you, and you’ll see them on your homepage and in your inbox. Explore

If you have a story to tell, knowledge to share, or a perspective to offer — welcome home. It’s easy and free to post your thinking on any topic. Write on Medium

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store