Open Graph Image Guide: Specs, Sizes, and Dynamic OG Images

What is an Open Graph image?

Open Graph is a protocol originally introduced by Facebook. The og:image meta tag tells platforms which image to show as the link preview. Without it, crawlers guess: often picking a logo, favicon, or random in-page asset.

Twitter/X uses similar tags (twitter:image), and most modern apps fall back to Open Graph when their own tags are missing. In practice, one well-sized OG image covers Facebook, LinkedIn, Slack, Discord, iMessage, and many other previews.

Short definition: Open Graph image glossary. Dimensions: OG image size.

Why OG images affect clicks

In a feed, your title and preview image compete with everything else on the screen. A page-specific graphic that shows the topic (and maybe a category or brand mark) earns more taps than a generic homepage screenshot.

• Blog posts: title + category chip on a branded background
• Docs: product name + page title
• Product/SaaS pages: benefit line + product UI crop
• Changelog: version or feature name in large type

Static, site-wide OG images are fine for a brochure site with five pages. They fail as soon as you have dozens of URLs that deserve their own context.

OG image sizes by platform

Use 1200×630 pixels (about 1.91:1) as your default. It displays cleanly on Facebook, LinkedIn, Slack, Discord, and most messaging apps. Twitter/X summary-large cards are happiest near 1200×628.

File weight: stay under roughly 5MB (many crawlers prefer under 1MB). PNG is fine for flat graphics; JPG/WebP helps for photo-heavy previews. See image formats.

HTML meta tags that matter

<meta property="og:title" content="Your page title" />
<meta property="og:description" content="One sentence summary" />
<meta property="og:image" content="https://cdn.example.com/og/page.png" />
<meta property="og:image:width" content="1200" />
<meta property="og:image:height" content="630" />
<meta property="og:type" content="article" />
<meta name="twitter:card" content="summary_large_image" />
<meta name="twitter:image" content="https://cdn.example.com/og/page.png" />

• Use absolute HTTPS URLs only. Relative paths break crawlers.
• Match width and height to the real file.
• Prefer a stable CDN URL you control (not a temporary signed URL that expires).

Design rules that survive the thumbnail

• One idea per image: title, optional eyebrow, small logo
• Title in large type (think mobile feed, not desktop mock)
• High contrast between text and background
• Avoid thin lines and tiny UI chrome that vanish at 300px wide
• Leave padding so crop does not clip the last letter

For automation, put the title (and maybe category) on their own Canva text layers so an API can swap them per page.

Mistakes that kill click-through

• One generic site-wide image for every URL
• Wrong aspect ratio (square logos get letterboxed)
• Tiny text that is unreadable in the thumbnail
• Missing cache busting after you replace an image
• Hotlinking an image that requires auth or cookies
• Using a different image than the one in the meta tags

Cache busting and debugging

Platforms cache OG images aggressively. After you change a preview:

1. Change the filename or add a query string (?v=2)
2. Re-scrape with Facebook Sharing Debugger / LinkedIn Post Inspector / X Card Validator
3. Confirm the crawler can reach the URL without login

If Slack or Discord still show the old image, wait or share a slightly different URL; those caches are opaque.

Dynamic OG images from Canva

Manual OG design does not scale past a handful of pages. With Layerre you design one 1200×630 template in Canva, import it, then generate a unique preview per page via API or no-code tools.

1. Design a 1200×630 Canva template with title and category layers
2. Import the share link into Layerre
3. At build time (or on first request), call the API with that page's title
4. Store the PNG on your CDN and set og:image to that URL

Common patterns:

• SSG / CI: generate all OG images when the site builds
• On demand + cache: generate the first time a page is shared, then reuse
• CMS hook: create the image when a blog post is published

Step-by-step FAQ: How to generate dynamic OG images. Broader context: Canva automation and API guide · image template API.