How to preview Open Graph tags
- Open the page you want to check, view its source (Ctrl+U on Windows and Linux, Cmd+Option+U on a Mac) and copy everything, or at least the
<head>section. - Paste it into the box. The Open Graph and Twitter Card tags are read instantly.
- See how the link will look on Facebook, LinkedIn, X, Slack, Discord and in WhatsApp or iMessage, and read the list of missing or problematic tags.
- Fix your tags, for example with the Meta Tag Generator, and paste again to confirm.
What Open Graph tags do
When someone shares a link, the platform fetches the page and reads its Open Graph (og:) tags to build a preview card. The essentials are og:title, og:description, og:image and og:url. X uses its own twitter:card tag to decide between a small summary and a large image card, and falls back to Open Graph for the rest.
A good card has a clear, specific title (not just your brand name), a one-sentence description and an eye-catching 1200 × 630 pixel image with any text kept away from the edges, since some platforms crop it to a square. Image URLs must be absolute and publicly reachable.
Why check it this way?
Official debuggers such as the Facebook Sharing Debugger and LinkedIn Post Inspector need a public URL and an account. This preview works with any HTML, including pages on localhost, staging servers behind a login, or a template you have not deployed yet. Your HTML is parsed in your browser and not uploaded. Note that platforms cache previews; after changing tags on a live page, use their debuggers to refresh the cache.
Why does my link show the wrong image?
The og:image is missing, too small, blocked by robots.txt or not an absolute URL, or the platform cached an old version. Fix the tag, then re-scrape with the platform's debugger.
What size should an Open Graph image be?
1200 × 630 pixels, under 5 MB, in JPG or PNG. Smaller images may be shown as a thumbnail instead of a large card.
Do I need both og: and twitter: tags?
X reads Open Graph tags as a fallback, so you mainly need twitter:card in addition. Add twitter:title or twitter:image only if you want them to differ.