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 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.
#gatsbyjs #react #open-graph #gatsby #static-site-generator
