If I work hard on my Open Graphic Images, People Share My Blog Posts— zachleat.com


Open Group pictures. Those little images that show when your site is shared on social media. The ones for my site… are not good. My default is to use one, big, boring tagged image for everyone-with no extra value and just wasting yall feeds (sorry!). I want to heal them and harvest what I do.

The Lazy Approach

While building a cloud service in the screenshot for 11ty.dev, it became clear that I needed to add an Open Graph size to use the screenshots as Open Graph images. You can find it used in the Eleventy docs pages:

  • Navigate to https://www.11ty.dev/docs/
  • Once the screenshot service is set up, this is just one line for a custom Open Graph image: <meta property="og:image" content="https://v1.screenshot.11ty.dev/https%3A%2F%2Fwww.11ty.dev%2Fdocs%2F/opengraph/">
  • This is the image on the social card:

For the amount of work it prepares, it is perfectly equivalent (a <meta>!). But I want to take it to the next level for my own blog (which has a high -profile purpose that might convince my colleagues to use one like this. netlify.com 😅).

The Underwhelming Way

In the past, I experimented a bit with using SVG in raster image of Eleventy Image (by sharp) but this is not really what I want. There is an advantage to being much simpler than HTML -based methods (usually based on Puppeteer) but I ended up having to slog through a set of handwritten SVG to see it how I wanted it to look. I’ll admit, I’m not as productive at managing SVG as I would like.

The Fancy Approach

With the experiences under my belt, I decided to customize a page on my site (source code) to test each blog post and be able to serve as a target for my screenshot service. It provides a couple of benefits:

  • I can use all the existing HTML / CSS / JS / Fonts already used on my site. That means fake browser chrome, custom Twitter avatars, Lighthouse marks, popularity rankings, and more!
  • I don’t have to run Puppeteer locally. I try to avoid it when possible – it’s awful but it slows down the build (a lot).

Each individual blog post has a dedicated Open Graph image page, for example /opengraph/web/automatic-opengraph/ (Fair warning: this page does not use responsive web design principles. It is specifically designed for the 1200 × 630 aspect ratio).

If I want a custom background image for an open graph image in a post, I add the front object to the image url:

openGraphBackgroundImage: /og/sources/graphpaper.jpg

Next, in my basic Onsetyty layout file (source code) I point the Open Graph page for each specific blog post to the screenshot service to get the image:


It looks like this:

I want the image with the post title, my avatar, published date, and the page URL.

For bonus metadata, here is one that includes the Lighthouse logo (constantly updated via Speedlify), a number of webmentions, and even the weight of the page (e.g. 226 KiB, also powered by Speedlify):

Bonus Features

DevTools Device emulation

Inside Chrome Devtools, I added a custom Imitation Device specific for Open Graph image formats to test the layouts.

Drop down the Chrome Devtools Copied Devices option

Social Card Preview

I added a little <details> at the bottom of each blog post so I can try out social card image preview. Maybe I can pivot it to a link based sharing widget at some point or merge my existing Retweet to share the part.

On-demand Builder Cache Busting

the Eleven Screenshot services an independent project that uses On-demand Builders to cache the screenshot image content on the Netlify CDl. That cache is pretty cool. The easiest way to invalidate the cache is to enable a Netlify Screenshot service disable, but that’s resetting the cache for all screenshots stored in the service, which is too heavy. It’s a common request for a more granular Netlify API to reset cache bits but as this project progresses I know we can control this hand on the app side using our old friend, the Cache Buster URL.

If so the old URL https://v1.screenshot.11ty.dev/https%3A%2F%2Fwww.zachleat.com%2Fopengraph%2Fweb%2Fcomprehensive-webfonts%2F/opengraph/, I can add a useless cache busting key at the end of it (set up with an underscore to identify it anywhere in the URL).

If I made that key to today’s date (e.g. https://v1.screenshot.11ty.dev/https%3A%2F%2Fwww.zachleat.com%2Fopengraph%2Fweb%2Fcomprehensive-webfonts%2F/opengraph/_20210803/), it can generate new images every day without the screenshot service having to move the entire cache. (Others related discussion about it on Twitter)

Leave a Comment

Your email address will not be published. Required fields are marked *

This div height required for enabling the sticky sidebar