DEV Community

Cover image for OG Image Examples: 10 Patterns Worth Copying (and How They Are Built)
Grabbit profile image Nico Acosta
Nico Acosta for Grabbit

Posted on • Originally published at grabbit.live

OG Image Examples: 10 Patterns Worth Copying (and How They Are Built)

#html #seo #webdev #javascript

The OG image is the first thing anyone sees before they decide to click a shared link. The best ones are not the prettiest; they are the most legible at a glance and the easiest to produce at scale. This is a tour of ten patterns that consistently work, what makes each one effective, and the build approach behind it, so you can copy the result rather than the pixels.

What separates a good OG image from a bad one

Before the examples, the rules they all follow. An OG image is usually viewed small, in a busy feed, for a fraction of a second:

  • One focal point. Usually the page title in large type. If a reader has to hunt, you have lost them.
  • High contrast and big text. It will be shrunk to a thumbnail. Thin gray text on a white card disappears.
  • On-brand, not generic. Color, logo, and typeface that match the site, so the card is recognizable.
  • Correct dimensions. 1200 by 630 pixels, the 1.91 to 1 ratio every major platform renders full-width. See OG image sizes for the full breakdown.

The patterns below are different ways to satisfy those rules.

10 patterns worth copying

  1. Title-on-brand-gradient. The page title in large type over the site's brand gradient, with a small logo in a corner. The workhorse pattern: instantly readable, instantly recognizable, trivial to template. Most developer tools and SaaS blogs use a version of this.

  2. Title plus author avatar. Adds the author's name and photo beside the title. Works well for blogs and newsletters where the writer is part of the draw.

  3. Code snippet card. A syntax-highlighted snippet of the actual code the post is about. Strong for engineering content because the preview previews the substance, not just the headline.

  4. Product screenshot inset. The title alongside a real screenshot of the product or dashboard. The honest version of "show, do not tell," and a natural fit when the page is about a UI.

  5. Big-number stat. One large metric ("3x faster," "10,000 captures") as the focal point. Great for case studies and launch posts where a number is the hook.

  6. Category label plus title. A small colored pill ("Guide," "Changelog") above the title, so the reader knows the content type before clicking. Good for sites with mixed content.

  7. Minimal wordmark. Just the logo and a short tagline on a clean background. Best as a strong site-wide default for pages that do not warrant a custom image.

  8. Quote card. A pulled quote in large type, attributed. Effective for interviews, essays, and testimonials.

  9. Map or chart render. For data or location pages, the actual visualization as the card. This is one that pure design tools struggle with, because the image needs to be a real render of dynamic content.

  10. Live page top-shot. The OG image is a clean screenshot of the top of the actual page. Zero separate design: the page is the preview. Ideal for landing pages and docs whose hero already looks good.

How these are actually built

Patterns 1 through 8 are layouts: a title, maybe an avatar or a stat, on a branded background. The maintainable way to produce them per page is a single template that takes the page data as input, rather than designing each card by hand. You can render that template two ways: a code-based image renderer (such as a framework's built-in OG route), or by pointing a screenshot API at a template URL you build with your normal components. The dynamic OG image generator approach walks through the template-and-capture version end to end.

Patterns 9 and 10 are different. A map render or a real screenshot of the live page is not a layout you can easily rebuild in a code renderer; it is the actual page. For those, a screenshot API is the natural fit, because it renders the real URL in a browser and hands back the image.

Generating the "live page top-shot" (pattern 10)

The simplest pattern to ship is also the one design tools cannot do: capture the real page. Point a screenshot API at the URL at OG dimensions:

curl https://api.grabbit.live/v1/grabs \
  -H "Authorization: Bearer sk_live_..." \
  -H "Content-Type: application/json" \
  -d '{
    "url": "https://yoursite.com/your-page",
    "width": 1200,
    "height": 630,
    "format": "png",
    "delay_ms": 500
  }'
Enter fullscreen mode Exit fullscreen mode

The response gives you a hosted image_url to drop straight into your og:image tag:

{
  "id": "grb_01jx...",
  "status": "done",
  "image_url": "https://cdn.grabbit.live/grabs/grb_01jx....png",
  "width": 1200,
  "height": 630,
  "format": "png",
  "bytes": 73900,
  "execution_ms": 1210
}
Enter fullscreen mode Exit fullscreen mode

Width accepts 320 to 1920 and height 240 to 1080, so 1200 by 630 is in range. delay_ms (0 to 10000) lets fonts and client-rendered content settle before the shot. Capture once per page, cache the image_url, and serve it from there.

The takeaway

Pick the pattern that fits your content, but make it per-page and make it automatic. A custom card with the post's title beats a generic logo every time, and the only way that scales past a handful of pages is a template you render on demand or a screenshot of the page itself.

New to the format? Start with what is an OG image. Ready to build one? The dynamic OG image guide has the full template-and-capture flow.

Originally published on the Grabbit blog.

Top comments (0)