Special offer. See more information about Outbyte and uninstall instructions. Please review EULA and Privacy policy.

To check a social media preview, inspect the page’s Open Graph and platform-specific metadata, test the live URL with a preview checker, then use the affected platform’s own debugger or inspector to refresh and verify what it fetched. After changing the page or its image, deploy the fix and run the platform check again: a correct tag can still produce a wrong or stale card if a crawler cannot fetch the image or the platform has cached an earlier result.

What controls a social media preview?

Most link cards are driven by metadata in the page’s HTML <head>. Open Graph defines properties that let a web page appear as a rich object when shared. Its four required properties are og:title, og:type, og:image, and og:url. The specification also recommends optional properties such as og:description, og:site_name, and image details including og:image:width, og:image:height, and og:image:alt (Open Graph protocol).

Different networks may read different metadata. Facebook and LinkedIn use Open Graph values and may fall back to the page title or description. X/Twitter can use its own twitter:* tags first. A checker’s preview is useful for finding problems, but it is not a guarantee that every platform will produce the same crop or card. See the platform-specific tag guidance in the SocialCal link previewer guide.

Check the page’s metadata first

  1. Open the live page and inspect its source. Use the browser’s View Source command or developer tools, then search the document’s <head> for og: and twitter:. Confirm there is one intentional set of values rather than conflicting duplicate tags.
  2. Check the core Open Graph fields. Confirm og:title, og:type, og:image, and og:url are present and reflect the page you intend to share. The og:url should be the canonical URL for that page, not a different page or an unintended URL variant.
  3. Check the platform-specific fields. If you want to control an X/Twitter card separately, look for twitter:card, twitter:title, twitter:description, and twitter:image. Compare those values with the Open Graph fields so a network does not display an unexpected title, description, or image.
  4. Confirm the tags are in the server-rendered HTML. A crawler may not see metadata that is added only after client-side JavaScript runs. Search the source HTML itself rather than relying only on what appears after the browser finishes rendering.

For example, the relevant part of a page’s head could look like this. Replace the sample values with the actual page details and publicly accessible image URL:

What’s actually slowing this PC down?

Pick the symptom - the matching free tool is one click away.

Special offer. See more information about Outbyte and uninstall instructions. Please review EULA and Privacy policy.
<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/images/share-card.jpg">
<meta property="og:description" content="A concise description of the page.">
<meta name="twitter:card" content="summary_large_image">
<meta name="twitter:title" content="Page title">
<meta name="twitter:description" content="A concise description of the page.">
<meta name="twitter:image" content="https://example.com/images/share-card.jpg">

Verify that the image can be fetched

A correctly written og:image value does not help if the social crawler cannot retrieve the file. Use an absolute HTTPS image URL, then open that exact address in a private or unauthenticated browser session. It should return the intended image without requiring a login or a cookie-dependent redirect. Check that the URL does not lead to an error page or an unexpected image.

  • Make sure the image URL is publicly reachable by a crawler, not just by a logged-in site administrator.
  • Check redirects: the final destination should still be accessible without a session or special browser state.
  • Use a supported raster image and confirm its dimensions are suitable for the card you want. The appropriate dimensions can vary by platform and display context; there is no single cross-platform size that guarantees an identical result everywhere.
  • If the image should have descriptive alternative text, consider the Open Graph image detail property og:image:alt.

Run a multi-platform preview checker

Once the live metadata and image are accessible, enter the page URL in a multi-platform validator. OpenGraph Check documents checks for tag presence, canonical URLs and redirects, image dimensions, file size, and rendered previews for Facebook, X, LinkedIn, WhatsApp, Discord, and Slack (OpenGraph Check). Use the results to spot errors such as a missing field, a canonical URL pointing elsewhere, a redirect problem, or an image that is too small for the intended card.

These tools help compare platform-style renderings and diagnose the page, but a simulation cannot prove what a particular network has cached or exactly how its live composer will crop an image. Treat the checker as an early diagnostic, not the final authority.

Refresh the preview with the affected platform

After you have checked the page yourself and with a multi-platform tool, use the network’s own inspection path. The Open Graph specification links to Facebook’s Object Debugger/Sharing Debugger (Open Graph protocol). LinkedIn’s Post Inspector is documented as a way to inspect a URL, see the extracted title, description, and image, and request a refreshed inspection state (LinkedIn Post Inspector guide).

Special offer. See more information about Outbyte and uninstall instructions. Please review EULA and Privacy policy.
  1. Fix the metadata or image on the server and deploy the change.
  2. Submit the affected page URL to that platform’s debugger or inspector to prompt a new fetch.
  3. Review the extracted values and any reported problems. If the displayed result still looks old, check the live page source and image URL again before assuming the deployment failed.
  4. Paste the page into a fresh share composer on the target network and inspect the card there. The final crop and presentation can differ from a third-party simulation.

A platform may continue to show previously fetched data after a deployment. Re-scraping through its own inspector is therefore an important part of checking a change; merely refreshing your own browser does not establish that the platform fetched the new metadata.

Choose the right check for the problem

Check What it can tell you What it does not establish
View Source or developer tools Whether the intended metadata is present in the page HTML and whether duplicate or conflicting tags are visible. Whether a social platform has fetched the page or is showing a cached card.
Multi-platform validator Whether tags, canonical URLs, redirects, image dimensions, file size, and simulated previews have potential issues, depending on the checker. That every network will render the same crop or use the same fallback behavior.
Platform debugger or inspector What the specific platform extracted and, where supported, a way to request a fresh inspection. That other networks use the same tags, cache, or visual treatment.
Fresh share composer Whether the target network’s current share flow shows the card as expected. That all users, placements, or other platforms will display an identical card.

Why a preview is blank, wrong, or outdated

Blank or incomplete card

Check whether the tags are present in the server-rendered HTML rather than being added only by client-side JavaScript. Then verify that the URL being inspected is the same page whose metadata you edited. If the crawler cannot retrieve the page or image, the card may not contain the expected content.

Wrong title or description

Look for duplicate metadata and compare the canonical URL with the page you changed. A platform may be reading a different URL’s tags, or it may fall back to the page title and description when the relevant Open Graph or platform-specific values are absent.

Missing image

Open the absolute image URL without logging in and confirm it returns the intended file. Investigate access restrictions, redirects that rely on cookies, crawler blocking, an unsupported image format, or unsuitable dimensions. Also check whether X/Twitter has a separate twitter:image value that differs from og:image.

Special offer. See more information about Outbyte and uninstall instructions. Please review EULA and Privacy policy.

Old image after a fix

Use the affected platform’s debugger or inspector to trigger a new fetch, then inspect its extracted result. Platforms can retain cached data beyond the time it takes your deployment to appear on the live page. Confirm the deployed image URL itself returns the new file.

Different results on different networks

Compare the relevant tag families and the network’s own crop and fallback behavior. X/Twitter may prioritize its twitter:* properties, while Facebook and LinkedIn use Open Graph values and fallbacks. Different cards do not necessarily mean that one page is broken.

Independent reader supportYour contribution helps us test, update, and keep practical guides available for everyone.Support on Ko-Fi

Or skip the browser setup

A screenshot API can capture how a page currently renders in a browser, which is useful for checking visual layout, but that screenshot is not a social platform’s card preview and does not replace metadata inspection or the platform’s own debugger. ScreenshotNeo is a website screenshot API and MCP server; one GET request can return a PNG, JPEG, WebP, or PDF. For example, this cURL request captures the live page at stripe.com as WebP (see the ScreenshotNeo API documentation):

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

The same request in Python:

import requests

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

Or in Node.js:

const q = new URLSearchParams({ access_key: 'YOUR_API_KEY', url: 'https://stripe.com' });
const res = await fetch(`https://api.screenshotneo.com/v1/shot?${q}`);

ScreenshotNeo accepts consent banners like a visitor and removes more than 60 known consent platforms, newsletter popups, and chat widgets before capture; each of those steps can be turned off. Bot checks and CAPTCHAs, blank pages, timeouts, failed loads, and cache hits are not billed, and responses identify the page verdict and billing status with X-Page-Verdict and X-Billed headers. Its MCP server provides take_screenshot, get_page_info, and capture_pdf tools for Claude, Cursor, and other MCP clients.

Special offer. See more information about Outbyte and uninstall instructions. Please review EULA and Privacy policy.

It also offers full-page capture with lazy images loaded, CSS-selector element capture, dark mode, 12 device presets and custom viewports, retina scale, PDF options, HTML/CSS-to-image, custom CSS and JavaScript, click-before-capture, selector hiding, wait conditions, request and resource blocking, custom headers, cookies, user agent and Authorization, timezone and geolocation, transparent backgrounds, resizing, configurable-TTL caching, signed public image links, async jobs with signed webhooks, bulk capture for 100 URLs per call, a usage API, and an OpenAPI spec. Parameter names used by other screenshot APIs also work to ease migration. These capture options can help with rendered-page checks, but they do not re-scrape a social network’s cache.

Plan Monthly shots Price
Free 1,000 $0; no card required
Starter 3,000 $5
Growth 15,000 $15
Pro 60,000 $39
Scale 250,000 $99
Business 1,000,000 $249

All features are available on every plan; yearly billing gives two months free. Sign up for ScreenshotNeo’s free plan for 1,000 screenshots a month with no card; paid plans start at $5 for 3,000.

Frequently Asked Questions

Does a screenshot of my page show the same thing as a social media preview?

No. A browser screenshot shows the rendered page; a social card is generated from metadata and platform-specific fetching and rendering. Use a platform debugger or inspector to check the card itself.

Can I check a page before it is published?

A URL-based social checker needs to fetch the page and its image. If they are not publicly reachable, it cannot establish what an unauthenticated social crawler will retrieve.

Special offer. See more information about Outbyte and uninstall instructions. Please review EULA and Privacy policy.

Product prices and availability are accurate as of the date/time indicated and are subject to change. Any price and availability information displayed on Amazon at the time of purchase will apply.