By Scott Jehl

If you were to link to a page on my website (and many others) from another social media website, you'd likely see an image preview of the page appear. This is handled via Open Graph, a protocol defining a group of meta tags that specify the page's title, social preview image, URL, and more.

For example, here's a social preview OG image for my most recent blog post about Self-Destructing CSS:

The portion of open graph that references that image looks something like this:

<meta property="og:image" content="https://example.com/path/to/preview-image.jpg">

Of course, while Open Graph handles the referencing of my social preview images, creating the images themselves is something I do more manually, using a screenshot service to generate images of my pages as needed.

These social preview images are a nice thing for a website to have. But the workflow for adding them to a site is, in my experience, not nice. Unfortunately, web developers have become accustomed to setting up complex, costly screenshot workflows using Edge Workers and Puppeteer and Playwright to launch real browser runtimes to generate these preview images.

This feels to me like a waste of time and resources.

Should OG Just Be a CSS Media Type?

As I was setting up yet another site for these previews recently, a thought occurred to me: has the idea of an Open Graph CSS media type been explored? You know, like screen, and print. To me, it seems like the social preview for a given URL should ideally just be another CSS layout of that page, merely formatted for a particular media type: an open graph preview media type.

With such a type available, perhaps a section of my CSS could look something like this:

@media opengraph {
  /* here I could specify further @media min/max-width queries to deliver layouts for the various OG image sizes */
}

Maybe then, in the head of my page, I could omit the image meta reference and know that my pages are ready to display for opengraph just fine if you happen to request them with that media type.

Is this something the browser should handle? I don't know! What if an img element, dressed with a particular new opengraph attribute, could be used to reference a site this way when linking to it? Maybe the browser would know to load that site with a opengraph media type and render it out as image data instead of a costly (potentially insecure) shrunk-down website. Maybe this could be facilitated by canvas attributes, or a special object or iframe.

This is just an idea, and maybe it's a bad one. I'm just tired of building screenshot services for something like this. Feels un-webby!

Thanks for reading.