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