Share Website Preview Images in Gatsby With the Open Graph Protocol

Adam J. Arling
Aug 27, 2020 · 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.