How to Check Social Media Previews for a Web Page

Direct answer: inspect the page’s server-rendered metadata, render the URL in a multi-platform checker, then confirm the result with the affected platform’s own debugger or inspector. After changing tags or images, re-scrape the URL and verify again.

A link card is built mainly from metadata in the HTML <head>. The Open Graph protocol defines four required properties: og:title, og:type, og:image, and og:url. Useful optional properties include og:description, og:site_name, og:image:width, og:image:height, and og:image:alt. See the Open Graph specification.

X can use its own twitter:* tags first, while Facebook and LinkedIn generally use og:* values and fallbacks. A platform may fall back to the document title or description when a preferred tag is absent.

Recommended head markup

<meta property="og:title" content="Your page title">
<meta property="og:type" content="website">
<meta property="og:url" content="https://example.com/articles/social-previews">
<meta property="og:image" content="https://example.com/images/social-previews.jpg">
<meta property="og:description" content="A concise description for the link card.">
<meta property="og:site_name" content="Example">
<meta property="og:image:width" content="1200">
<meta property="og:image:height" content="630">
<meta property="og:image:alt" content="Illustration of a social preview">

<meta name="twitter:card" content="summary_large_image">
<meta name="twitter:title" content="Your page title">
<meta name="twitter:description" content="A concise description for the link card.">
<meta name="twitter:image" content="https://example.com/images/social-previews.jpg">

2. Check the live HTML before using a validator

Open the published URL in a browser.
Choose View Source (or fetch the HTML from the command line).
Search the <head> for og: and twitter:.
Confirm there is one intentional set of values, and that og:url is the canonical URL you edited.

Server-rendered tags matter because many crawlers do not run the same client-side JavaScript as a normal browser. If your framework injects metadata only after hydration, the crawler may see an empty card.

Fetch source with cURL

curl -L --fail --silent --show-error https://example.com/articles/social-previews | sed -n '1,160p'

Save the response and search it with your usual tools if the document is large. Also check the final URL after redirects; the tags on the redirect target are what a crawler will normally read.

3. Verify the image URL independently

Copy every og:image and twitter:image URL and open it in an unauthenticated browser session. A crawler must be able to fetch it without a login, session cookie, or interactive challenge.

curl -I -L --fail https://example.com/images/social-previews.jpg

Check that the response is a successful image response, redirects do not require cookies, and the file is a supported raster image with dimensions suitable for the card. If your CDN returns an HTML error page with a successful status, the preview can still fail.

4. Use a multi-platform preview checker

A checker gives you a fast comparison across networks and can reveal issues that are easy to miss in source. 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. See its OpenGraph preview checker.

When comparing tools, look for these capabilities:

Capability	Why it matters
Live fetch	Shows what an external crawler can retrieve now.
Platform coverage	Different networks use different tag families and crops.
Image and redirect checks	Finds inaccessible files, unsuitable dimensions, and redirect chains.
Canonical URL checks	Prevents debugging one URL while sharing another.
Re-scrape support	Lets you request a fresh fetch after deployment.
No-account access	Useful for a quick pre-publish check.

5. Confirm the result with the platform’s own inspector

A third-party simulation is useful, but the affected network’s own tool is the final check because it uses that network’s crawler, cache, fallback rules, and crop.

Facebook: use the official Sharing Debugger/Object Debugger linked from the Open Graph specification. Submit the exact URL and request a new scrape after deployment.
LinkedIn: use Post Inspector to inspect the URL and refresh its extracted title, description, image, and inspection state. The workflow is documented in this LinkedIn Post Inspector guide.
X: compare the result against your twitter:card and other twitter:* tags, then create a fresh share composer after the page has been re-fetched.

After the inspector shows the new values, paste the URL into a fresh share composer. Do not assume every network will use the same crop or fallback.

6. A repeatable pre-publish workflow

Inspect server-rendered source and remove duplicate metadata.
Make og:url match the canonical URL you will share.
Test each image URL without authentication and follow redirects.
Run a multi-platform checker and record any warnings.
Deploy the metadata and image changes.
Run the affected platform’s debugger or Post Inspector to trigger a fresh fetch.
Open a new share composer and verify the visible card and crop.
Repeat for a URL with query parameters or a redirect if those are used in campaigns.

7. Troubleshooting common preview failures

Symptom	Likely cause	Fix
Blank card	Tags are injected only by client-side JavaScript.	Render the metadata in the initial HTML response and deploy it server-side.
Wrong title or description	Duplicate tags, an unexpected canonical URL, or a redirect to another page.	Keep one intentional tag set, check the final URL, and inspect that page’s source.
Missing image	Relative URL, login requirement, crawler blocking, redirect problem, or unsupported/invalid image response.	Use an absolute HTTPS URL, test it without cookies, inspect response headers, and permit crawler access.
Old image after a fix	The platform is serving cached metadata.	Use its debugger or Post Inspector to request a new fetch, then check a fresh share composer.
Different cards on different networks	Platform-specific tags, fallback behavior, or crop rules differ.	Compare `twitter:` with `og:` and verify each network separately.
Image appears cropped	The network applies its own card aspect ratio.	Keep important content away from edges and verify the crop in the target platform’s inspector.
Preview works locally but not in production	Production robots rules, authentication, CDN behavior, or a different canonical URL.	Test the public production URL from an unauthenticated session and inspect its final response.
Image URL returns 200 but still fails	The body is HTML, an unsupported format, or a challenge page.	Download the response, verify its file type and dimensions, and remove access challenges.

8. Performance, reliability, and cache notes

Keep the head deterministic: generate one metadata set per canonical page. Templates that vary between requests make debugging and caching harder.
Serve assets directly: a short redirect is easier for crawlers than a chain that depends on cookies or signed sessions.
Separate page and image caching: deploy the new image and metadata together, then trigger a platform re-scrape. A platform cache can outlive your deployment.
Check every URL variant: HTTP to HTTPS redirects, trailing slashes, query strings, and tracking links can resolve to different metadata.
Use the platform inspector for reliability: it is the only check that confirms the target network has actually fetched the current version.

9. Or skip the browser setup

If you need a rendered screenshot of the page or its preview state, ScreenshotNeo provides a website screenshot API and MCP server. It can capture a URL as PNG, JPEG, WebP, or PDF, including full-page and element captures, custom CSS or JavaScript, device and viewport settings, and waits for selectors, delays, or network idle. Cookie and consent banners, newsletter popups, and chat widgets are removed before capture. Bot checks, blank pages, timeouts, failed loads, and cache hits are not billed, and the response identifies the page verdict and billing status in X-Page-Verdict and X-Billed headers.

One call is enough to capture a page:

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

import requests

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

const q = new URLSearchParams({ access_key: 'YOUR_API_KEY', url: 'https://example.com/articles/social-previews' });
const res = await fetch(`https://api.screenshotneo.com/v1/shot?${q}`);
if (!res.ok) throw new Error(`Screenshot failed: ${res.status}`);
const image = Buffer.from(await res.arrayBuffer());
await import('node:fs/promises').then(fs => fs.writeFile('shot.webp', image));

See the ScreenshotNeo API documentation for all 63 options, including dark mode, retina scale, custom headers and cookies, geolocation, resource blocking, caching TTLs, signed links, asynchronous jobs, webhooks, bulk capture, usage reporting, and the OpenAPI specification. Its MCP server includes take_screenshot, get_page_info, and capture_pdf for Claude, Cursor, and other MCP clients. The free plan includes 1,000 screenshots per month with no card; paid plans start at $5 for 3,000 shots.

Create a free ScreenshotNeo account and capture your first 1,000 screenshots without a card.

10. FAQ

Do I need both Open Graph and Twitter tags?

Use both when you want predictable behavior across networks. Facebook and LinkedIn generally use Open Graph, while X can prioritize its twitter:* tags.

Existing posts and previews can retain cached data. Verify a fresh share composer after requesting a re-scrape.

Can a valid image URL still be rejected?

Yes. The crawler may be blocked, receive a redirect requiring cookies, or receive an unsupported format or an HTML challenge page.

Which URL should I submit to an inspector?

Submit the exact public URL people will share, including meaningful redirects and query parameters, then confirm its canonical URL in the returned HTML.

Is a third-party checker enough before launch?

Use it for broad coverage, then confirm the target network with its own debugger or inspector after deployment.