OpenGraphImage
The basic implementation of an opengraph image is to enable rich previews of your content when shared on social media, slack, discord, and SMS. This is accomplished by adding a few meta tags to your html pages.
<!doctype html>
<html>
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta property="og:image" content="https://cdn.opengraphimage.com/<signed path>" />
<meta property="og:image:width" content="1200" />
<meta property="og:image:height" content="600" />
<meta name="twitter:card" property="twitter:card" content="summary_large_image" />
</head>
<body>
<!-- ... -->
<a href="https://link.opengraphimage.com/<signed path>">
<img src="https://cdn.opengraphimage.com/<signed path>"/>
</a>
<!-- ... -->
</body>
</html>Debugging Tools
Static Content
Sometimes your content is not backed by a server or may live in a text field of your MySpace profile editor. For situations like this, you can use the opengraph image as the src of an image element. You can also add an opengraph link to the image by replacing the cdn.opengraphimage.com domain with link.opengraphimage.com. Swapping the domain name does not require updating the signature.
<a href="https://link.opengraphimage.com/<signed path>">
<img src="https://cdn.opengraphimage.com/<signed path>" width="1200" height="600" />
</a>Javascript
You might even want to leverage the metadata feature of your opengraph images. To make this work you will need to update your origin config to “Send Metadata Header” which enables the x-ogi-meta header. If you are accessing the metadata from a browser, you will also need to add your website to the CORS host list.
const getMetadata = async (cdnUrl) => {
let response = await fetch(cdnUrl);
let blob = await response.blob();
let metadataHeader = response.headers.get('x-ogi-meta');
let metadata = JSON.parse(metadataHeader);
let source = URL.createObjectURL(blob);
return { metadata, source };
};