How to Preview Open Graph Images Before Publishing a Page

To preview an Open Graph image before publishing, inspect the page’s Open Graph tags and verify that the image URL is reachable. For a public page, enter its URL in a debugger that fetches the page and renders a social card. For staging, private, or localhost pages that crawlers cannot reach, inspect pasted HTML or the document head; then repeat the check against the public URL before sharing.

A preview shows what a particular checker sees or simulates. It cannot guarantee that every social platform will display the same card: platforms may cache crawls and render cards differently.

1. Add Open Graph metadata to the page

Open Graph metadata belongs in the HTML document’s <head>. The protocol’s four required properties are og:title, og:type, og:image, and og:url. A concise og:description is also useful. See the Open Graph protocol specification for the definitions and structured image properties.

<!doctype html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>A practical guide to deployment</title>

  <meta property="og:title" content="A Practical Guide to Deployment">
  <meta property="og:type" content="article">
  <meta property="og:image" content="https://example.com/images/deployment-guide.jpg">
  <meta property="og:url" content="https://example.com/guides/deployment">
  <meta property="og:description" content="A clear guide to preparing and deploying a web application.">

  <meta property="og:image:alt" content="A deployment pipeline shown as connected steps">
  <meta property="og:image:type" content="image/jpeg">
  <meta property="og:image:width" content="1200">
  <meta property="og:image:height" content="630">
</head>
<body>
  <h1>A Practical Guide to Deployment</h1>
</body>
</html>

The image MIME type, width, height, secure URL, and alt text are documented structured image properties. Provide accurate values for the image you actually serve. Do not assume a single image dimension is a universal requirement across platforms; confirm current guidance for the destination where the card will appear.

2. Preview a public page

Deploy the page at the URL you intend to share, and confirm that it can be reached without a login or internal network access.
Paste that URL into an Open Graph debugger that fetches page metadata.
Inspect the raw values it found, especially og:image, og:title, og:description, and og:url.
Review the rendered card. Confirm that the image is the intended one and that its crop and text make sense in the preview.
If you edit the metadata, request a fresh crawl through the destination platform’s debugger or recrawl workflow when available, then inspect again.

A URL-fetching debugger can help reveal metadata visible to a crawler and simulate a card. For example, the Liinks Open Graph Debugger describes URL-based previewing and cache caveats. That describes its tool; it is not a guarantee of identical behavior across platforms.

3. Preview staging, private, and localhost pages

A public-URL debugger cannot fetch a page it cannot reach. During development, inspect the source or copy the document head into a preview checker that accepts pasted markup. A tool description for Online OpenGraph preview free says it can extract Open Graph and Twitter Card tags from pasted content. This checks the supplied markup, not whether the eventual live URL or its image can be crawled.

You can also inspect the head directly in your source code or browser developer tools. Check that the metadata belongs to the page being tested, values are complete, and the image URL is absolute and points to the intended asset. Once deployed, test the actual public URL: source review cannot catch access restrictions, server responses, redirects, or stale platform caches.

4. Check the image URL and metadata

Use the intended absolute URL. Verify that og:image points to the correct image, not a relative path that a crawler cannot resolve as expected.
Check access from outside your environment. An image that loads only while signed in, on a VPN, or from your development machine may not be available to a crawler.
Keep values consistent. Make sure the title and description describe this page, and og:url identifies the page URL you intend to share.
Supply image alt text. The protocol specifies og:image:alt for a description of the image.
Check structured image fields. If you include MIME type, width, height, or secure URL, ensure each value matches the actual image and its served address.
Inspect the fetched tags, not only the card mockup. A visual preview can hide which source value caused a wrong title or image. Prefer a checker that exposes both raw metadata and the rendered result.

5. Refresh a stale preview

If the page source has the correct new image but a share card still shows the old one, the destination may be displaying a cached crawl. Recheck the public URL in the platform’s debugger or recrawl workflow when it offers one. The reviewed Liinks debugger describes Facebook and LinkedIn re-scraping and mentions changing a query-string URL for some other preview caches. Those steps are platform-specific and can change, so verify the current procedure for your destination.

After requesting a recrawl, inspect the result again. Changing a URL or query string may create a different cache key; it does not establish that every platform will refresh the original URL.

6. Common problems and fixes

Symptom	Likely cause	What to check
No image appears	The image tag is missing, malformed, or points to an inaccessible asset.	Inspect the fetched `og:image` value, then open its absolute URL from a public context.
The wrong image appears	The page has an unintended image value, duplicate metadata, or a cached earlier crawl.	Inspect the raw metadata the debugger found, correct the page head, then trigger a fresh crawl where supported.
The preview checker cannot load the page	The URL is private, local, protected, or otherwise unreachable by the checker.	Use pasted HTML for a markup-only review; deploy the page publicly and test that URL before sharing.
The card still shows old content after an edit	The platform may have cached its earlier crawl.	Use that platform’s current debugger or recrawl method and inspect the refreshed card.
The title or description belongs to another page	Metadata may be copied from a template, rendered for the wrong route, or inconsistent with the shared URL.	Compare the fetched title, description, canonical page, and `og:url` with the URL being tested.
The checker and destination show different cards	A simulated preview and the platform’s own crawler or rendering can differ.	Check the actual destination’s recrawl tool and live result; a third-party simulation is diagnostic, not a display guarantee.

7. Choose the right kind of checker

Choose based on what you need to verify:

Public URL fetch: useful for checking what metadata a crawler can retrieve from a deployed page.
Pasted HTML: useful for checking tags on staging, private, or localhost pages that cannot be fetched publicly.
Raw metadata plus rendered card: helps connect an unexpected preview to the exact values found in the head.
Platform-specific recrawl: useful when the destination is showing a cached card and supports a refresh workflow.

These methods answer different questions. Pasted HTML can confirm the markup you supplied, a public fetch can test reachability and fetched tags, and a platform debugger may request a new crawl. Neither a preview simulation nor a manual source check proves that all destinations will render the same card.

8. Capture the rendered page for a visual check

An Open Graph debugger inspects metadata and simulates a share card. A screenshot of the live page can answer a separate question: what does the page itself look like when rendered? ScreenshotNeo is a website screenshot API and MCP server for developers. Its website describes clean captures that accept cookie consent and remove known consent platforms, newsletter popups, and chat widgets before capture. A screenshot does not replace checking the Open Graph tags or the destination platform’s card cache.

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

See the ScreenshotNeo API documentation for request options. The endpoint accepts a URL and returns a screenshot or PDF; this example saves a WebP screenshot.

Or skip the browser setup

Use one API request to capture the page itself. This is useful alongside a metadata debugger when you also need a rendered page image:

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

Read the ScreenshotNeo API documentation for the available parameters.

Cookie banners, newsletter popups, and chat widgets are removed before the shot; each cleanup step can be turned off.
Bot checks, blank pages, timeouts, and failed loads are never billed. Responses identify the page verdict and billing status in headers; cache hits also cost nothing.
An MCP server gives AI agents, including Claude, Cursor, and other MCP clients, tools to take screenshots, get page information, and capture PDFs.
The free plan includes 1,000 screenshots a month with no card. Paid plans start at $5 for 3,000 shots.

Performance, reliability, and cost notes

For a one-off social preview, a metadata debugger is usually the shortest path: it fetches the page and renders a diagnostic card. Use pasted markup during development when the page is inaccessible, then validate the live URL before release. If you automate rendered-page captures, account for page load time and use the capture service’s wait options when the content appears asynchronously.

Keep the jobs distinct: an image capture shows rendered page pixels, while Open Graph inspection checks metadata and a platform recrawl addresses that destination’s cached card. A ScreenshotNeo capture is billed only when it produces a clean shot; bot checks, blank pages, timeouts, failed loads, and cache hits cost nothing. For current plan quantities and options, consult the ScreenshotNeo site and its documentation.

FAQ

Can I preview Open Graph tags without publishing the page?

Yes. Inspect the source or paste the HTML head into a checker that accepts markup. That confirms the supplied tags, but you still need to test the live URL once it is publicly reachable.

Does a correct preview guarantee the same card everywhere?

No. A checker provides a diagnostic or simulation. Destination platforms may use different rendering and caching behavior.

Why does the preview still show the old image?

The platform may have cached an earlier crawl. Correct the metadata, request a recrawl with the destination’s current method if available, and check again.

Can a screenshot API tell me whether `og:image` is correct?

A screenshot shows rendered pixels, not which Open Graph value a crawler reads. Inspect the metadata with a debugger; use screenshots to review the visual page separately.