OG image generator: specs, meta tags and 3 ways to make them

When a link is shared in a social app or a chat, the app fetches the page and looks for Open Graph tags in its <head>. If it finds an image, the link becomes a card with that image on top. Without one you get a bare link or whatever picture the app guesses. One image per page, with that page’s title on it, is what makes shared links look intentional.

What an Open Graph image is

The Open Graph protocol (ogp.me) defines four required properties for every page: og:title, og:type, og:image and og:url. og:image is “an image URL which should represent your object within the graph”. It can carry structured properties of its own: og:image:width and og:image:height in pixels, og:image:type for the MIME type, og:image:secure_url for an HTTPS address, and og:image:alt, which ogp.me describes as “a description of what is in the image (not a caption)”.

X reads its own twitter: tags but falls back to Open Graph: its card docs list og:image as the fallback for twitter:image and og:title for twitter:title. So one set of OG tags plus twitter:card covers both.

OG image size and specs

Meta’s docs add one more reason to set og:image:width and og:image:height: they tell the crawler the dimensions, so it can render the image right away instead of downloading and measuring it first.

The meta tags to copy

<meta property="og:title" content="Shipping a design system in a week" />
<meta property="og:description" content="What we cut, what we kept, and the order we built it in." />
<meta property="og:type" content="article" />
<meta property="og:url" content="https://yourblog.example/blog/design-system-in-a-week" />
<meta property="og:image" content="https://yourblog.example/og/design-system-in-a-week.png" />
<meta property="og:image:width" content="1200" />
<meta property="og:image:height" content="630" />
<meta property="og:image:alt" content="Shipping a design system in a week, by Ana Ruiz" />
<meta name="twitter:card" content="summary_large_image" />

In Next.js (App Router) you don’t write these by hand. Set metadataBase in the root layout so relative image paths become full URLs, then return openGraph.images and twitter: { card: 'summary_large_image' } from each page’s metadata. The Next.js docs note that a relative URL without metadataBase causes a build error.

Three ways to make OG images

Code at build time: @vercel/og, Satori and Next.js

Vercel’s @vercel/og library generates images in Vercel Functions: it “uses Satori and Resvg to convert HTML and CSS into PNG”, and its docs recommend 1200×630. Satori itself turns HTML and CSS into SVG and is licensed MPL-2.0. In Next.js the library is already included as ImageResponse from next/og, and an opengraph-image.tsx file in a route folder makes that route’s image; by default, the Next.js docs say, such images are generated at build time and cached.

Vercel’s docs list the limits to plan around: fonts in ttf, otf or woff, flexbox and a subset of CSS rather than every layout, and a 500 KB bundle including fonts and images. They also suggest allowing the image route in robots.txt, so the platforms’ crawlers can fetch it.

An agent skill

A skill is a folder with a SKILL.md and scripts that an agent such as Claude Code, Codex or Cursor loads when your request matches it. An OG image skill holds the design and the renderer; the agent does the parts that change from site to site: finding your posts, filling in titles, and wiring the tags into your framework.

An OG image generator for every post with Editorial OG Card

Editorial OG Card is free. Each card has a top rule with a kicker, topic and reading time, the headline in a large serif set as real text, a byline with initials or a photo and the post’s URL, and a block composition picked from the post’s slug, so a post keeps its card. It needs Node.js 18 or newer and Chrome, Chromium or Edge, plus internet access while rendering for the Google Fonts stylesheet.

1. 1

   Step 1: Install the skill

   Paste the install prompt from its page into your agent, or run:

   TerminalCopy Terminal

   curl -fsSL https://lookbk.dev/cli.js | node - add editorial-og-card

2. 2

   Step 2: Ask for cards

   Claude CodeCopy Claude Code

   Make Editorial OG cards for every post in /content/blog and save them next to each post.

3. 3

   Step 3: It reads your posts into cards.json

   The skill’s first script reads every .md, .mdx and .markdown file under the folder, skips drafts, and takes the title, kicker, topic, author and reading time from the front matter. Run it again when you add posts: your edits stay, new posts are added.

   TerminalCopy Terminal

   node <skill>/scripts/from-posts.mjs content/blog --site=yourblog.example --path=/blog/ --out-dir=public/og

4. 4

   Step 4: Edit the headlines

   Wrap the one or two words that carry the point in *asterisks* to set them in the accent colour. Headlines read best under 70 characters; the limit is 110.

5. 5

   Step 5: Render and check

   The render script checks every card first and lists every problem at once, renders the PNGs and confirms each is 1200×630. --scale=2 gives 2400×1260 for sharper images. It also writes og-preview.html with every card side by side.

   TerminalCopy Terminal

   node <skill>/scripts/render.mjs cards.json

6. 6

   Step 6: Wire up the tags

   The agent adds the tags above to your post layout once, built from the slug, so every post gets its own image. The skill includes notes for Next.js, Astro, Eleventy, Jekyll and Hugo, and a prebuild line if you want new cards on every build.

Other image skills cover the shares that aren’t link previews. Riso Quote Card and Pull Quote Card make quote cards in feed and story sizes, and Article Hero Illustration draws one illustration for an article at 16:9 and 1200×630. They are Pro; Editorial OG Card and Blueprint Architecture Diagram are free.

Free

image

Editorial OG CardClaude CodeCodexCursor+3 more agents

image

Article Hero IllustrationClaude CodeCodexCursor+3 more agents

image

Riso Quote CardClaude CodeCodexCursor+3 more agents

image

Pull Quote CardClaude CodeCodexCursor+3 more agents

Free

image

Blueprint Architecture DiagramClaude CodeCodexCursor+3 more agents

Test the preview before you share the link

• The old image still shows after you changed it

  Meta caches images by URL and won’t update them unless the URL changes. Give the new image a new file name or add a version to its path, then re-scrape in the Sharing Debugger.

• No image at all

  The URL is probably relative or blocked. Use the full https:// address, check it opens in a private window, and check robots.txt.

• X shows a small square instead of a wide card

  Add <meta name="twitter:card" content="summary_large_image" />. Without twitter:card, X’s docs say a summary card may be rendered from the OG tags.

• The animated GIF doesn’t move on X

  X uses only the first frame of an animated GIF in a card. Use a still image.

• The headline renders in a fallback font

  In @vercel/og, load the font file yourself in ttf, otf or woff. In Editorial OG Card, check internet access for Google Fonts, or install the fonts and render offline as its Troubleshooting section describes.