ScreenshotNeo
Sign in Get a free key

BlogHow-to

How to Fix a Missing Open Graph Image

Fix missing og:image previews with server-rendered tags, image checks, duplicate cleanup, platform debugging, and cache refresh steps.

By the ScreenshotNeo team29 September 202610 min read

How to Fix a Missing Open Graph Image

A missing Open Graph image usually means the shared page does not expose a valid, publicly reachable og:image in its server-rendered HTML, or the social platform is showing a cached result. Add the required metadata, verify the exact image URL returns an image over HTTPS, remove duplicate tags, then re-scrape the URL in the destination platform’s debugger.

1. What a missing Open Graph image means

A page’s normal featured image does not automatically become its social preview image. Facebook, LinkedIn and other crawlers look for metadata in the HTML head. The Open Graph protocol defines four required properties for every page:

  • og:title
  • og:type
  • og:image
  • og:url

og:image is the URL representing the page or object. A crawler can still show a blank card when the tag exists but points to an HTML error page, a protected asset, a redirect loop, a blocked response, or markup that appears only after client-side JavaScript runs.

The fastest repair is to put a complete, absolute HTTPS declaration in the server-rendered <head>:

<meta property="og:title" content="Page title">
<meta property="og:type" content="website">
<meta property="og:url" content="https://example.com/page">
<meta property="og:image" content="https://example.com/assets/og-image.jpg">
<meta property="og:image:secure_url" content="https://example.com/assets/og-image.jpg">
<meta property="og:image:type" content="image/jpeg">
<meta property="og:image:width" content="1200">
<meta property="og:image:height" content="630">
<meta property="og:image:alt" content="Short description of the image">

The secure URL, MIME type, dimensions and alt text are optional structured properties, but they make the image declaration explicit and easier for crawlers to process.

2. Inspect the deployed HTML

Check what an unauthenticated crawler receives, rather than what your browser constructs after JavaScript runs.

The crawler must receive the image declaration in the initial HTML and fetch the image URL directly.
The crawler must receive the image declaration in the initial HTML and fetch the image URL directly.

View page source

  1. Open the deployed URL.
  2. Choose View Page Source, or fetch the URL from a terminal.
  3. Search the returned source for property="og:image".
  4. Confirm that the tag is inside the initial HTML response and not injected by a client-side framework.
curl -L -sS https://example.com/page | grep -i 'property="og:image"'

If the command returns nothing, your CMS, theme or template is not emitting the tag. Add it to the server-side layout, static build template or framework metadata API. If it appears only in the browser’s Elements panel, move generation to server-side rendering or build time so social crawlers receive it without executing your application.

Check all Open Graph properties

curl -L -sS https://example.com/page | grep -iE 'og:(title|type|url|image)'

Make sure og:url is the canonical page URL and that the image belongs to the same intended page. Relative paths such as /images/card.jpg are less reliable than an absolute HTTPS URL.

3. Verify that the image URL is crawlable

Copy the exact value from og:image and test it independently. It must be publicly reachable without a login, cookie, special request header or browser-only JavaScript.

curl -I -L https://example.com/assets/og-image.jpg

A healthy response normally ends with a successful status such as 200 and an image content type such as image/jpeg, image/png or image/webp. Investigate these failures:

Result Likely cause Fix
404 Wrong path, deleted asset or case mismatch Upload the file again and update og:image.
401 or 403 Authentication, hotlink protection or an edge rule blocks crawlers Allow public GET access to the image path.
200 text/html The URL returns a login page, error document or application shell Point the tag at the actual binary image URL.
Redirect loop HTTP/HTTPS or host redirects conflict Use the final HTTPS URL directly and fix redirect rules.
Connection timeout Slow origin, firewall or unavailable host Serve the asset from a reliable public origin and reduce processing time.

Open the URL in a private browser window as a second check. A normal browser session may hide access requirements with existing cookies. Also inspect the final URL after redirects; the final response must still be an image.

4. Remove duplicate tags and preserve ordering

Plugins, themes and SEO modules often emit more than one og:image. The Open Graph specification gives the first tag from top to bottom preference when values conflict. A stale first declaration can therefore win even when a later tag looks correct.

  1. Search the complete HTML for every occurrence of og:image.
  2. Remove obsolete declarations from themes, plugins or layout components.
  3. Keep one intended image first.
  4. Place that image’s structured properties immediately after its declaration.
<meta property="og:image" content="https://example.com/assets/current.jpg">
<meta property="og:image:secure_url" content="https://example.com/assets/current.jpg">
<meta property="og:image:type" content="image/jpeg">
<meta property="og:image:width" content="1200">
<meta property="og:image:height" content="630">
<meta property="og:image:alt" content="Product dashboard on a laptop">

If you intentionally publish multiple images, repeat the structured-property group directly after each image declaration and put the preferred image first.

5. Use dimensions and formats that survive platform crops

Open Graph itself does not impose one universal canvas size, but each platform applies its own preview rules. LinkedIn documents a minimum of 1200 × 627 pixels. A practical baseline for Facebook-style large previews is approximately 1200 × 630 pixels. That ratio is close to 1.9:1 and gives major platforms enough pixels to create a sharp card.

  • Export a real image file, not an HTML page renamed with an image extension.
  • Declare the actual width, height and MIME type.
  • Keep logos and important subjects away from the outer edges because previews may crop.
  • Use a readable contrast between foreground and background.
  • Keep file sizes reasonable so crawlers can download the asset quickly.

When replacing an image at the same URL, an intermediary or platform cache may continue serving the old bytes. Publishing a new filename, or a cache-busting query string where supported, makes the new asset distinguishable.

6. Add platform-specific metadata

Facebook and Meta

Facebook reads og:image and caches the result. After fixing the source, paste the page URL into the Facebook Sharing Debugger and request a fresh scrape. Inspect the debugger’s fetched HTML and image URL; do not rely only on your own browser preview.

LinkedIn

LinkedIn expects Open Graph-compliant source code and documents a 1200 × 627 pixel minimum image size. Re-run LinkedIn’s post inspector after deployment so it fetches the corrected metadata.

X

X reads Twitter Card tags and can fall back to Open Graph tags. For a predictable large-card layout, add:

<meta name="twitter:card" content="summary_large_image">
<meta name="twitter:image" content="https://example.com/assets/og-image.jpg">

Keep the Open Graph tags as the shared baseline because other platforms use them directly.

7. Refresh stale social previews

Social networks cache both page metadata and image bytes. A corrected deployment does not guarantee an immediate change in an existing post.

  1. Deploy the corrected HTML and image.
  2. Fetch the page source yourself and confirm the new tag is present.
  3. Fetch the exact image URL and verify status, content type and dimensions.
  4. Run the destination platform’s sharing debugger or inspector.
  5. Request a re-scrape, then wait for that service to finish.
  6. If the old image remains, publish a new image URL or use a supported cache-busting query string.

Do not change only the visible page image while leaving the metadata untouched. The social crawler follows og:image, not your CMS media picker.

8. Generate a reliable social image from a page

If your Open Graph asset is a screenshot of a page, you can create it yourself with a headless browser or use a screenshot API. A browser workflow gives control, but it also requires navigation, waiting for assets, cookie handling, viewport configuration and failure handling.

Browser workflow checklist

  1. Launch a Chromium-based browser in a server environment.
  2. Navigate to the target URL and wait for the document or network to settle.
  3. Dismiss consent banners and hide chat widgets that obscure the page.
  4. Set a viewport whose output ratio matches your social card.
  5. Capture the page or a selected element.
  6. Encode the image as JPEG, PNG or WebP and publish it at a public HTTPS URL.
  7. Reference that URL in server-rendered og:image metadata.

For repeatable jobs, wait for a meaningful selector instead of an arbitrary short delay. Handle bot checks, blank documents, navigation errors and pages that never reach network idle. Store the generated asset so every social crawler receives the same bytes.

9. Or skip the browser setup

ScreenshotNeo is a website screenshot API and MCP server. One GET request returns a PNG, JPEG, WebP or PDF, so your build can create a public social image without maintaining browser infrastructure. Read the full parameter reference in the ScreenshotNeo documentation.

Consent elements and overlays can obscure an automated capture unless they are handled before the screenshot.
Consent elements and overlays can obscure an automated capture unless they are handled before the screenshot.

cURL

curl -G "https://api.screenshotneo.com/v1/shot" \
  -d access_key=YOUR_API_KEY \
  --data-urlencode url=https://stripe.com \
  -o shot.webp

Python

import requests

r = requests.get(
    "https://api.screenshotneo.com/v1/shot",
    params={"access_key": "YOUR_API_KEY", "url": "https://stripe.com"},
    timeout=90,
)
r.raise_for_status()
open("shot.webp", "wb").write(r.content)

Node.js

const fs = require('node:fs/promises');

const q = new URLSearchParams({
  access_key: 'YOUR_API_KEY',
  url: 'https://stripe.com'
});
const res = await fetch(`https://api.screenshotneo.com/v1/shot?${q}`);
if (!res.ok) throw new Error(`Screenshot failed: ${res.status}`);
await fs.writeFile('shot.webp', Buffer.from(await res.arrayBuffer()));

Set the relevant capture options for your page: full-page mode with lazy images loaded, a CSS selector for one element, dark mode, one of 12 device presets or a custom viewport, retina scale, custom CSS and JavaScript, a click before capture, selector waits, a delay or network-idle wait. You can also hide selectors, block ads, trackers, requests or resource types, set headers, cookies, user agent and Authorization, choose timezone and geolocation, use a transparent background, resize the output and cache with a TTL you choose.

For a social card, request a fixed viewport or capture a designed card element rather than relying on an arbitrary full-page ratio. Publish the returned file at a public HTTPS URL, then place that URL in og:image.

ScreenshotNeo accepts consent banners before capture and removes more than 60 known consent platforms, newsletter popups and chat widgets; each step can be turned off. Bot checks, CAPTCHAs, blank pages, timeouts, failed loads and cache hits are not billed. The response identifies the result with X-Page-Verdict and X-Billed headers. Its MCP server exposes take_screenshot, get_page_info and capture_pdf for Claude, Cursor and other MCP clients. Bulk capture supports up to 100 URLs per call, and signed links can serve public <img> tags.

Create a free ScreenshotNeo account for 1,000 screenshots per month with no card. Paid plans start at $5 for 3,000 shots.

10. Troubleshooting common failures

Symptom Cause Resolution
No og:image in source Client-side-only metadata or missing template field Emit the tag during server rendering or static generation.
Tag exists, preview is blank Image URL is private, blocked or returns HTML Test with curl -I -L; allow public image access.
Wrong image appears Duplicate tags or stale platform cache Delete duplicates, put the intended tag first and re-scrape.
Image is cropped badly Canvas ratio conflicts with platform card layout Use about 1200 × 630, protect edge content and inspect each platform.
New image does not appear Cached page or unchanged image URL Run the platform debugger and publish a changed asset URL if needed.
Screenshot contains a consent dialog Capture occurred before consent handling Accept or remove the banner before capture, or use ScreenshotNeo’s consent cleanup.
Automated capture times out Heavy page, blocked request or endless loading Wait on a selector, block unnecessary resources, set a bounded timeout and record failures.

11. Performance, reliability and cost considerations

  • Cache generated assets: Generate a social image when content changes, not for every crawler request.
  • Use deterministic URLs: A stable URL avoids repeated downloads; change the filename when the bytes change and a platform will not refresh.
  • Control page work: Block analytics, ads and unnecessary resource types during screenshot generation when they do not affect the card.
  • Bound waits: Selector waits, network-idle waits and explicit delays should have limits so one broken page does not stall a build.
  • Check verdicts: With ScreenshotNeo, inspect X-Page-Verdict and X-Billed to distinguish a clean shot from a bot check, blank page, timeout, failed load or cache hit.
  • Choose the right capture: An element capture is usually faster and produces a predictable ratio; full-page capture is useful when the entire document is the intended card.
  • Plan volume: ScreenshotNeo’s Free plan includes 1,000 shots per month without a card. Starter is $5 for 3,000, Growth $15 for 15,000, Pro $39 for 60,000, Scale $99 for 250,000 and Business $249 for 1,000,000. Yearly billing gives two months free, and every feature is included on every plan.

12. Verification checklist

  • Server-rendered HTML contains exactly the intended og:image.
  • The value is an absolute HTTPS URL.
  • The image responds publicly with a successful status and an image MIME type.
  • The file dimensions are appropriate, preferably around 1200 × 630 for broad compatibility.
  • Structured properties follow the image declaration.
  • Duplicate plugin or theme tags are removed.
  • Facebook, LinkedIn or X metadata is present for the platform you target.
  • The destination debugger has fetched the corrected page after deployment.
  • The social post uses the refreshed preview rather than an older cached result.

13. FAQ

No. Your template or SEO system must emit an explicit og:image tag in the HTML head.

Can I use a relative image path?

Use an absolute HTTPS URL. It removes ambiguity about the host and gives crawlers a directly fetchable address.

Why does the browser show the image while LinkedIn does not?

Your browser may have cookies or JavaScript access that the crawler does not. Test the exact URL without authentication and inspect server-rendered source.

Should I add both og:image and twitter:image?

Yes when you need predictable X card behavior. Keep og:image for the broader Open Graph ecosystem.

How long does a social cache take to update?

Timing varies by platform. Use its sharing debugger or inspector immediately after deployment to request a fresh scrape.

Can I use a screenshot API just for social cards?

Yes. Capture a designed element or fixed viewport, publish the returned file at a public HTTPS URL, and reference that URL from og:image.

Keep reading