What is Open Graph Image (OG Image)?

An Open Graph image (OG image) is the visual preview that appears when someone shares a link on platforms like Facebook, Twitter/X, LinkedIn, Slack, Discord, or iMessage. It's controlled by the og:image meta tag in your page's HTML.

Why OG images matter:

• Posts with custom images get significantly more engagement on social media
• They convey page-specific context (title, author, topic) at a glance
• They make your content look more professional and trustworthy
• They're the first visual impression many people have of your content

Standard dimensions: 1200×630 pixels (recommended for best cross-platform display)

Static vs. dynamic OG images:

Static: One image per page (or one default image for the whole site). Manual to create; doesn't scale.

Dynamic: Each page gets a unique OG image generated automatically from the page's metadata (title, description, author, category). Scales to any number of pages.

Generating dynamic OG images with design automation:

1. Design an OG image template in Canva (1200×630) with dynamic text layers
2. Import into Layerre
3. Call the API at build time or on request to generate a unique image per page
4. Set the og:image meta tag to the generated image URL

Implementation:

html
<meta property="og:image" content="https://cdn.example.com/og/my-page.png" />
<meta property="og:image:width" content="1200" />
<meta property="og:image:height" content="630" />

Common approaches:

• Build-time generation (SSG): generate during static site build
• On-request (ISR/serverless): generate and cache on first share
• Pre-generated and stored: generate batch for all pages, store on CDN

OG image dimensions by platform:

Common mistakes that hurt click-through:

• Using a generic site-wide OG image for every page (no page-specific context)
• Wrong aspect ratio causing cropped or letterboxed previews
• Text too small to read in the thumbnail preview
• Missing og:image tag entirely (platforms fall back to random page images)

Automating OG images at scale:

For blogs, documentation, or product catalogs with hundreds of pages, manually designing an OG image per page doesn't scale. Design automation tools like Layerre let you:

1. Create one 1200×630 Canva template with dynamic title and category fields
2. Generate a unique OG image per page at build time or on request
3. Set the og:image meta tag to the generated CDN URL

This is especially valuable for developer tools, SaaS products, and content sites where every page should have a distinct social preview. See the Open Graph image guide for specs and automation, and the Canva automation guide for how OG generation fits a broader workflow.