Open Graph Previewer
EXAMPLE WEBSITE
Page Title Example
This is an example description of the page content that would appear when shared on social media.
https://example.com/page
Page Title Example
This is an example description of the page content that would appear when shared on social media.
example.com
websiteHow to use Open Graph Previewer
- 1
Enter a page URL
Paste the full URL of the page you want to check into the website URL field.
- 2
Fetch the OG data
Click "Fetch OG Data" to pull the page's existing Open Graph title, description, image, and site name.
- 3
Edit manually if needed
Switch to Edit Manually to adjust the title, description, image URL, type, and other fields and see the preview update.
- 4
Preview and copy tags
Review the Facebook and Twitter card previews, then copy the generated meta tags to add them to your page.
The Definitive Guide to Open Graph and Link Previews
What the Open Graph protocol is
The Open Graph protocol is a small set of meta tags, originally introduced by Facebook, that lets any web page describe itself as a rich object when shared. Instead of a bare blue link, a page with Open Graph tags turns into a card with a headline, a summary, and a large image. The tags live in the head of the page and use the property attribute with an og prefix, for example og:title and og:image, paired with a content attribute holding the value. Because the standard was widely adopted, the same og tags now drive previews across far more than just Facebook.
Open Graph is purely about presentation in social and messaging contexts. It has no direct effect on search rankings, but it has a large effect on click-through and sharing, because a compelling card gets clicked and reshared while a plain or broken one gets scrolled past.
The core Open Graph tags
Five properties do most of the work. og:title is the headline of the card and can differ from your HTML title tag, letting you write share-optimized phrasing. og:description is the supporting line beneath it. og:image is the thumbnail, and it carries the most visual weight by far. og:url is the canonical URL the card should point to, which keeps shares consolidated on one address even when the same content is reachable through several URLs. og:type describes the object, commonly website for a generic page or article for a blog post or news story.
Additional properties refine the result: og:site_name labels the source, og:locale declares the language, and for images, og:image:width and og:image:height help platforms lay out the card before the image finishes downloading. Filling these in produces a more reliable, faster-rendering preview.
Twitter Cards and how X reads your tags
X uses its own twitter card tags, but it is forgiving: if the Twitter-specific tags are absent, it falls back to your Open Graph tags. The key tag is twitter:card, where summary_large_image produces the big-image layout most brands want, while summary yields a smaller thumbnail beside the text. You can also set twitter:title, twitter:description, twitter:image, and twitter:site to override the Open Graph values specifically for X when you want different copy there.
In practice, a good strategy is to set complete Open Graph tags for broad coverage and add only twitter:card to opt into the large-image layout, letting X inherit the rest from Open Graph. This avoids maintaining two near-identical sets of tags while still getting the richer card on X.
Image requirements that make or break the card
The og:image is where most previews succeed or fail. The widely recommended size is 1200 by 630 pixels, a roughly 1.91 to 1 ratio, which fills the large-image card cleanly on Facebook, LinkedIn, and X without cropping. Use an absolute, publicly reachable URL beginning with https; relative paths like /images/card.png are the number-one reason a thumbnail simply does not appear, because the scraper has no base URL to resolve them against. Keep the file under a few hundred kilobytes and avoid putting essential text near the edges, since different platforms crop slightly differently.
Each platform also enforces its own minimums and maximums. Images that are too small fall back to a tiny thumbnail or no image at all, and extremely large files may be skipped. Sticking to a single 1200 by 630 JPEG or PNG served over HTTPS is the safest choice for consistent rendering everywhere.
How Facebook, LinkedIn, Discord, and Slack render previews
When a link is pasted into any of these platforms, the platform sends its own scraper bot to fetch the page and read the head before rendering a card. Facebook uses facebookexternalhit, Slack and Discord have their own bots, and each parses the og tags to build the preview. This means the preview reflects what the scraper sees server-side, which can differ from what a logged-in user sees, especially on pages that require login or render their meta tags with JavaScript after load.
Because rendering happens bot-side, two things matter. First, your og tags must be present in the initial HTML the server returns, not injected later by client-side scripts that the scraper may not execute. Second, the page must be reachable by the bot without authentication, or the scraper gets a login wall instead of your content and the preview comes back empty.
Caching, debuggers, and forcing a re-scrape
Social platforms aggressively cache the preview they scrape, sometimes for days. This is the source of the classic complaint that updated Open Graph tags do not show up: the platform is still serving the cached version from before your change. The fix is to use the platform's own debugging tool to force a fresh scrape. Facebook's Sharing Debugger, LinkedIn's Post Inspector, and X's card validator all fetch the page again and show you exactly which tags they parsed, which doubles as a way to diagnose why a card looks wrong.
Make re-scraping part of your publishing routine whenever you change a title, description, or image on an already-shared URL. Without it, early shares can lock in a stale or broken card that lingers long after the page itself is correct. This previewer lets you check the tags before you publish so fewer corrections are needed later.
The most common Open Graph mistakes
The recurring failures are predictable: a missing og:image so the card has no thumbnail, a relative image URL that the scraper cannot resolve, an og:image served over HTTP on an otherwise HTTPS page (which some platforms reject), and tags injected by JavaScript that the scraper never runs. Another frequent one is leaving og:url pointing at a non-canonical or staging URL, which splits share counts and can send users to the wrong place.
A subtler mistake is forgetting that Open Graph and your search snippet are separate. The og:title and og:description control the social card, while the HTML title tag and meta description control the Google result, and they need not be identical. Optimize each for its context: punchy and curiosity-driven for the social card, clear and keyword-aware for the search snippet.
Frequently asked questions
What are Open Graph tags and why do they matter?
How does the Facebook and Twitter preview work?
Can I generate tags without an existing page?
Why might fetching a URL fail or return no data?
Is the tool free, and what happens to the URL I enter?
Related tools
Keep going with these handy tools