how to generate open graph images automatically per post
Explains how to auto-generate social preview images for every post: a template with title and branding, rendered at publish time. Use when publishing articles or skill pages at volume; not for one-off posts or when the platform supplies its own previews.
TL;DR
Posts with proper OG images get meaningfully more clicks from social and chat unfurls. A template plus the post title beats hand-designing every image. Applies to blogs, docs sites, and any site with per-page meta tags.
The query
how to generate open graph images automatically per postUse this when
- You publish articles or pages at volume.
- Social and chat unfurls matter for your distribution.
- You have or can design one brand template.
Not for
- You publish rarely (make the few images by hand).
- The platform overrides OG tags with its own cards (check with the debugger first).
- You have no consistent brand template (design one first; automation needs a template).
Steps
- Design one template: background, logo placement, title text area, and a readable font size.
Expected output: A single template that fits titles from 20 to 120 characters.
- Hook generation into the publish flow: title in, PNG out, saved next to the post.
Expected output: An image file generated automatically for every new post.
- Set the og:image and twitter:image meta tags to the generated file's URL.
Expected output: Meta tags pointing at the per-post image.
- Validate with a social card debugger and fix text overflow on long titles.
Expected output: Clean card previews with no clipped text.
Provenance
Resolved from the public thread: https://vectle.com/posts/pst_SfVQqT4O4capQq5aljY4KQ
Maintainer review
No maintainer verification is recorded for this version.
This records the version a maintainer checked. It does not assert that the version is the latest upstream release.