Open graph preview: how to see your card before you share

An open graph preview is a look at the card Facebook, LinkedIn, Slack or X will build from your page before anyone posts the link. For a live public page, paste the URL into the platform's own debugger or an open graph checker. For a page on staging or localhost, those tools cannot reach it, so read the tags yourself with curl or view-source, then open a temporary public tunnel if you need to see the real card.

Preview first. A wrong card gets cached the moment someone posts.

Preview a live page with the platform debuggers

The platform debuggers show the card each network will actually build, because they run its own crawler. Facebook's Sharing Debugger and LinkedIn's Post Inspector both fetch the page, show the title, description and image they picked, and store that result as the cached card.

That last part is why the order matters. Running a page with broken tags through a debugger caches the broken card. Fix the tags, confirm them in the raw HTML, then run the debugger once. The step-by-step for each tool, including how to refresh a stale card, is in our guides to the Facebook Sharing Debugger and LinkedIn Post Inspector.

Slack has no public debugger. The quickest check there is to paste the link into a direct message to yourself and look at the unfurl.

Read the tags with curl or view-source

The tags a crawler sees are the ones in the HTML your server sends, so check that first. Browser dev tools show the page after JavaScript runs, which can include tags no preview crawler will ever read. Open view-source: in the address bar, or fetch the page from a terminal.

URL="http://localhost:3000/blog/new-pricing"

# Every og: and twitter: tag in the raw HTML
curl -s "$URL" | grep -Eio '<meta[^>]+(og|twitter):[^>]*>'

# Does the share image load, and is it an image?
curl -sI "https://staging.example.com/og/new-pricing-v2.jpg" | grep -i -E '^HTTP|content-type|content-length'

The first command should print your title, description, image, url and twitter:card lines. If a tag shows up in the browser inspector and not here, a script adds it after load, and preview crawlers will miss it. Our view rendered source guide explains that gap.

The second command should return 200, an image/ content type and a size you expect.

Check the domains in the output. The common staging bug is an og:image or og:url that points somewhere else. A build that writes http://localhost:3000/og/new-pricing.jpg into og:image ships a card no platform can load. One that points og:image at the production domain looks fine in the debugger until you notice production still serves last month's image.

Preview open graph tags on staging or localhost

Every debugger fetches your page from the internet, so localhost, private IPs and password-protected staging hosts are out of its reach. You have two ways around that.

Read the tags. For most changes the curl check above is enough. If the tags are present and absolute and the image loads, the card will build.

Open a temporary public URL. When you need the real card, put the local server behind a tunnel. Cloudflare's Quick Tunnels need no account.

cloudflared tunnel --url http://localhost:3000

cloudflared prints a random trycloudflare.com address. Paste that address plus your page path into the Facebook or LinkedIn debugger. Two details make this work.

1. Your app has to build og:url and og:image from the tunnel host, or from a base URL you set to it. Otherwise the card still points at localhost.
2. Cloudflare says the hostname changes every time you start a tunnel, so the debugger's cache never follows you to the next test.

For a staging site behind basic auth, exempt the path you are testing. Crawlers do not send passwords.

What each platform's card crops to

Each platform fits your image into its own frame. These are the numbers the platforms publish.

So a 1200 x 630 image fills Facebook and LinkedIn and loses a thin strip on X. Keep text and faces in the middle. The full size rules are in our Open Graph image size guide, and X's card types are covered in the Twitter card validator guide.

The headline gets cut too. Our checker flags an og:title over 90 characters and an og:description over 200, because most cards clip near those lengths.

If the card shows no picture at all, that is a different problem. Work through why your og:image is not showing.

Run an open graph check on your page

Our Open Graph checker fetches one public URL, lists every og:, twitter:, article: and fb: tag in the head, and draws an approximate large-image card. For each part of the card it shows which tag supplied it, including fallbacks to <title> and the meta description. It downloads the share image and reports its HTTP status, format, pixel size and file size, and flags a ratio outside roughly 1.7:1 to 2.1:1 that will be cropped. A run costs 5 credits.

It has the same reach as the debuggers. It refuses localhost, private IP addresses and hosts such as .local and .internal, so use curl or a tunnel for local pages. It reads the HTML as served and does not run JavaScript. Its card is an approximation, not each platform's exact layout, and it cannot refresh a platform's cached preview.