Fix Missing og:image: Add a 1200x630 Preview Image

What's happening

The og:image meta tag specifies the image social platforms should render in the link preview card. Facebook, LinkedIn, Slack, Discord, Telegram, iMessage, and WhatsApp all read it. When it is missing, each platform falls back to its own heuristic — usually scraping the first on the page, which might be a logo, a tracking pixel, or an ad.

Open Graph specifies that og:image accepts a URL, with optional og:image:width, og:image:height, og:image:alt, and og:image:type sub-properties. The recommended dimensions are 1200x630 pixels at a 1.91:1 aspect ratio. Smaller images (under 600px wide) render as small thumbnails alongside text rather than as the dominant preview element.

A common gotcha: og:image must be a fully qualified absolute URL with https:// — relative paths and protocol-relative URLs (//example.com/image.png) are not parsed reliably by all crawlers. The image itself must be publicly accessible (no auth required) and ideally cached at a CDN edge for speed.

Why it matters

Link preview cards collapse from 'large image with headline' to 'small icon with text'. The visual real estate in a feed or chat drops by 80%, and so does the perceived authority of the link.

Engagement falls. A/B tests on social distribution consistently show 2-3x click-through on cards with rich images vs. text-only cards. For paid social campaigns, missing og:image directly increases CPC.

AI-generated previews fill the gap unpredictably. Modern chat apps (Slack, Discord) sometimes render an LLM-generated image when og:image is missing — opaque, off-brand, and impossible to control.

Common causes

• Page metadata sets og:title and og:description but not og:image.
• og:image is set to a relative URL, which crawlers do not resolve correctly.
• The image URL requires authentication or is on a private CDN.
• The image returns a 404 because of a typo or a deleted asset.
• Social crawler gets an HTML response from the image URL because of CDN routing rules.
• The image is set client-side via JavaScript, missing in SSR HTML.

Detect this on your site

Run a quick scan with the OG Checker. The tool surfaces this exact issue with the records and context needed to apply the fix below.

How to fix it

1. 1

   Audit which pages lack og:image

   Crawl the site and report URLs missing og:image or where og:image returns a non-200 response. The OG Checker fetches each og:image URL and reports HTTP status, dimensions, and rendered preview.

2. 2

   Generate or design a 1200x630 image

   1200x630 PNG or JPG at 1.91:1 aspect ratio. PNG for designs with text and flat colors; JPG for photo-driven content. Keep file size under 1 MB for fast crawler fetches; max allowed is 8 MB.

3. 3

   Use absolute HTTPS URLs

   og:image content must be an absolute URL: https://example.com/og/page-slug.png. Relative paths and protocol-relative URLs are unreliable. Confirm the image is publicly fetchable with curl -I.

4. 4

   Add image dimensions and alt

   Include og:image:width=1200, og:image:height=630, og:image:type=image/png, and og:image:alt='Descriptive text'. The dimensions help platforms reserve layout space and avoid CLS in their previews.

5. 5

   Generate per-page images programmatically

   For articles and product pages, use a server-side OG image generator (Vercel OG, Satori, Cloudinary, Bannerbear). Inputs are page title + author + brand; output is a templated 1200x630 image at the canonical URL.

6. 6

   Re-scrape after deploying

   Facebook caches OG previews aggressively. After deploying og:image changes, paste the URL into Facebook's Sharing Debugger and click 'Scrape Again'. Slack and LinkedIn also expose force-refresh in their preview tools.

Example

<meta property="og:image" content="https://example.com/og/article-slug.png" />
<meta property="og:image:width" content="1200" />
<meta property="og:image:height" content="630" />
<meta property="og:image:type" content="image/png" />
<meta property="og:image:alt" content="Brewbar logo over an espresso shot" />

Full og:image declaration with dimensions and alt

Related fixes