Open Graph Preview Guide
Sharing a link is supposed to be simple, but what actually happens behind the scenes when you paste a URL into a social post is anything but. The platform reads a handful of Open Graph and Twitter Card meta tags hidden in the page's HTML head, then assembles a preview card from whatever it finds — a title, a description, and an image, each pulled from specific tag names like og:title, og:description, and og:image. If any of those tags are missing, malformed, or pointing to an image that's too small, the wrong dimensions, or simply broken, the resulting card can look amateurish or, worse, blank, and you usually don't find out until after the post is already live and being seen by your actual audience.
This tool closes that gap by rendering the preview card before publication. Paste in a URL and it fetches the page's meta tags, or paste in raw HTML or individual tag values directly, and it builds a visual mockup of the card the way major platforms would typically display it, complete with the image, title, and description positioned the way readers will actually encounter them. Seeing the rendered card rather than just reading the raw tag values makes problems immediately obvious — a description that gets awkwardly truncated, an image that's cropped strangely because its aspect ratio doesn't match what the platform expects, or a title that simply didn't get picked up because the tag was misspelled or missing.
Everything renders client-side in your browser. When you provide raw HTML or tag values directly, nothing is sent anywhere; when you provide a URL to check a live page, the fetch happens to retrieve the publicly available meta tags, the same way any social platform's crawler would, and the rendering itself still happens locally. There's no signup, no rate limit beyond reasonable use, and no record kept of which URLs you've checked.
For anyone who publishes content regularly — marketers sharing campaign pages, developers shipping a new product page, writers promoting an article — this preview step has become as routine as a spell-check, because a broken or unappealing share card directly affects click-through rates on social platforms, and there is no in-platform way to preview a card before posting on most networks. Catching the issue here, before the link goes out, is far better than catching it in the comments after the fact.
How to preview your Open Graph tags
- Enter the URL or paste your meta tags. Type or paste the full URL of the page you want to check, including the protocol, so the tool can retrieve its public meta tags the same way a social platform's crawler would. Alternatively, if the page isn't live yet or you're working from a local development environment, paste the raw HTML head section or individual og: and twitter: tag values directly into the input. Either path leads to the same rendered preview, so choose whichever matches where you are in the publishing process — a live URL for already-published pages, raw tags for pages still in development. If a page sits behind authentication or isn't publicly reachable yet, the raw tag path is the only option, since a fetch can't retrieve meta tags it has no public access to.
- Review the rendered preview card. Look at the generated mockup the way a visitor on a social platform actually would: is the title clear and not awkwardly cut off mid-word, does the description give a real sense of what the page is about, and does the image look intentional rather than randomly cropped or stretched. The tool typically shows the card at the dimensions and proportions common social platforms use, which makes layout problems like an off-center focal point or text overlapping busy image content immediately visible in a way that raw tag values never would. It's also the fastest way to notice a stale or placeholder image left over from an earlier draft of the page.
- Check the image dimensions and aspect ratio. Confirm the og:image being pulled in actually matches the recommended aspect ratio for share cards, typically a roughly 1.91:1 landscape ratio at a reasonably high resolution. An image with the wrong proportions tends to get cropped unpredictably by different platforms, sometimes cutting off a logo or a person's face in the source image. If the preview shows obvious cropping or a blurry, low-resolution result, that is the signal to update the source image dimensions before publishing rather than after the fact. Different platforms crop slightly differently, so leaving generous margin around the focal subject in the source image helps it survive whichever crop a given network applies.
- Verify the title and description length. Check whether your og:title and og:description are being displayed in full or getting truncated with an ellipsis, since most platforms impose their own character limits regardless of how long the actual meta tag content is. A description that reads as a complete, compelling sentence in the preview is far more effective than one that trails off mid-thought because it ran past the platform's cutoff point. If you see truncation, shorten the underlying tag content directly rather than relying on the platform to make a sensible cut for you. Front-loading the most important words at the start of the title and description also reduces the damage when truncation does occur.
- Fix the source tags and re-check. Once you've spotted an issue, update the actual og: and twitter: meta tags in your page's HTML or your CMS's SEO settings, then paste the corrected version, or re-fetch the live URL once deployed, to confirm the fix actually rendered the way you intended. Because social platforms cache previews aggressively, also remember that after deploying a fix to a live page you may need to use the platform's own cache-busting or debug tool to force it to re-fetch the updated tags before the new card appears publicly.
Use Cases
- Checking a new blog post before sharing: Preview how a freshly published article will appear when shared on social media before posting the link.
- Debugging a broken or missing share image: Diagnose why a page is showing a blank or wrong image card by inspecting its actual og:image tag and rendered preview.
- QA-ing a CMS template across many pages: Spot-check a handful of pages generated from the same template to confirm the dynamic meta tags are populating correctly.
- Comparing how a page looks on different platforms: Check both Open Graph and Twitter Card output to see whether a page renders consistently across networks.
- Reviewing a landing page before a campaign launch: Confirm a marketing landing page's share card looks polished before driving paid traffic and social shares to it.
- Auditing a client website's social metadata: Quickly check several client pages for missing or malformed Open Graph tags as part of an SEO or marketing audit.
About This Tool
What is it? A browser-based tool that renders a visual mockup of how a webpage's Open Graph and Twitter Card meta tags will appear as a share card on social platforms, based on a live URL or pasted tag values.
Why use it? It lets you catch a broken image, a truncated title, or a missing description before a link goes out publicly, since most social platforms offer no native way to preview a card before you post, and it runs the check without requiring you to actually publish a post to see the result.
Alternatives: Posting the link privately to yourself on each platform works but means publishing before you can see the result, and checking separately on every network is slow; some platforms offer their own debug tools, but those only cover one network at a time and require separate accounts, while this tool checks the general rendering pattern in one place.
Common mistakes: Forgetting that platforms cache previews is the most common frustration — fixing a tag and then seeing the old broken card still appear when sharing, simply because the platform hasn't re-fetched the page yet; a second common mistake is using an og:image with the wrong aspect ratio, which gets cropped unpredictably differently on each platform rather than displaying as designed.
Frequently Asked Questions
- Why does my preview look fine here but broken on the actual platform?
- Social platforms cache the meta tags from a URL the first time it's shared and may keep showing the cached version even after you fix the tags, until you use that platform's own cache-refresh tool or the cache naturally expires.
- What size should my og:image be?
- A common recommendation is roughly 1200x630 pixels, which gives a landscape aspect ratio of about 1.91:1 that most platforms display without awkward cropping.
- Does this tool check Twitter Card tags as well as Open Graph?
- Yes, it looks at both og: prefixed tags and twitter: prefixed tags, since the two systems are similar but not identical and a page sometimes has one set configured correctly and not the other.
- My page has no preview image at all — why?
- This usually means the og:image tag is missing entirely, points to a broken or relative URL that doesn't resolve publicly, or points to an image file format some platforms don't support.
- Is the URL I check sent anywhere or logged?
- Fetching a live URL retrieves its public meta tags the way any crawler would; the rendering and analysis happen in your browser, and pasted HTML or tag values are never uploaded.
- Why is my title getting cut off with "..." in the preview?
- Most platforms truncate titles and descriptions past a certain character count; shortening the actual og:title or og:description tag content is the only reliable fix.
- Can I preview a page that isn't live yet?
- Yes, paste the raw HTML head section or the individual meta tag values directly instead of a URL, and the tool will render the preview from that without needing the page to be publicly accessible.
- Does fixing my meta tags improve my search ranking?
- Open Graph and Twitter Card tags primarily affect how a link looks when shared socially, not search rankings directly, though a more compelling, click-worthy preview can indirectly improve traffic from social shares.