The Case for Automated Social Cards

Social media images—those previews that pop up when a link is shared on Twitter, Facebook, or iMessage—are often the most-viewed and most-requested images on a site. A plain link in a post becomes a large, clickable visual that draws attention. Making them happen is essentially a matter of a few meta tags:

<meta property="og:image" content="/images/social-media-image.jpg" />

But those tags only attach an image; they don't create one. For sites with many pages, hand-crafting a unique image for each is impractical. The usual approach is to generate them automatically from page metadata using a template.

Puppeteer and the Screenshot Approach

Most available solutions share a common tool: Puppeteer, which controls a headless Chrome instance. Its ability to capture a browser window—await page.screenshot({path: 'screenshot.png'});—makes it straightforward to design a social card in HTML and CSS, then screenshot it. This pattern fits naturally into Jamstack workflows with Node serverless functions, where dynamic values are passed via URL parameters to a hosted function that returns the image.

Notable implementations of this idea include:

  • Drew McLellan's Dynamic Social Sharing Images
  • Vercel's Open Graph Image as a Service
  • Phil Hawksworth's social-image-generator
  • Ryan Filler's Automatic Social Share Images

The SVG Alternative

An alternative approach is to compose the image as an SVG. SVG provides fixed coordinates, making it easy to design at the exact dimensions needed for social cards, and it's easy to compose elements programmatically. There are generative examples that add a touch of randomization to the output, and the format makes it feasible to create a tool with a contenteditable area for quick edits before capture.

However, SVG is not a supported format for social cards. Twitter's documentation is explicit on this point:

URL of image to use in the card. Images must be less than 5MB in size. JPG, PNG, WEBP and GIF formats are supported. Only the first frame of an animated GIF will be used. SVG is not supported.

Twitter docs

That limitation isn't a dealbreaker since converting an SVG to PNG is trivial with tools like svg2png, often integrated into a build process via a small task runner script.

WordPress: The Harder Case

A WordPress site doesn't typically have a build process that runs on every publish. Tools like Jetpack handle attaching a post's featured image to social cards, auto-posting, and providing previews, but they don't automate image creation.

The Social Image Generator plugin for WordPress addresses this gap. It lets site owners define templates that pull in metadata—title, author, featured image, quotes—and renders the card image on the fly. The advantage is that custom templates are built with GD, the image library built directly into PHP, so the approach works anywhere WordPress can run.

The trade-off is that coding a custom template means working with PHP's GD functions rather than HTML and CSS. A more elegant mental model would be a social-image.php file at the theme root, templated like any other theme file using standard WordPress APIs—similar to an ACF Block—which would then be screenshot for use as the social card. That would let front-end developers design cards with familiar syntax while still getting the benefit of server-side generation.