The Startup
Published in

The Startup

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:

Open Graph image unsuccessful preview

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">
<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

When using a JavaScript static site generator package (such as Gatsby, which we’ll use as an example), you can’t really update the <head /> markup of a Gatsby site’s HTML files directly. Static site generators build and compile HTML files for you, and it’s common to have the <head /> section abstracted away from component development.

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

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.

Open Graph image successful preview

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

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

Conclusion

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.

--

--

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
Adam J. Arling

Adam J. Arling

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