Use the free Open Graph Card Preview below: your data never leaves your browser — all work happens on your device, and nothing is uploaded to any server.
Why Your Link Looks Boring When Shared
You paste a link into a chat or a social post, and instead of a rich card with an image, a title, and a description, you get a bare URL. Or worse, you get a card with the wrong image, an old title, or a description cut off mid-sentence. The cause is almost always the same: the page’s Open Graph tags are missing, wrong, or untested. Open Graph is the set of meta tags that tells social platforms what to show when your page is shared, and nobody sees your tags until someone shares the link.
This preview tool lets you check the card before anyone shares it. You paste in the title, description, image URL, and site name, and the tool renders a mock card showing how those pieces fit together. It also flags the usual problems: a missing title, a missing description, a title long enough to be cut off, or no image at all. Fixing those four things covers most ugly-link problems.
What Each Tag Does
The og:title tag is the headline of the card. It should read like a real headline, not like a file name or a keyword list. Keep it under about 90 characters, because platforms cut longer titles with an ellipsis. The og:description tag is the one or two sentence summary under the title. Aim for under 200 characters and put the most important idea first, because the end is the first thing to be cut.
The og:image tag points to the picture on the card, and the picture does most of the work. A card with a strong image gets far more attention than a text-only card, which is why a missing image is the single most damaging Open Graph mistake. The recommended image size is 1200 by 630 pixels, a wide rectangle that fits most platforms without awkward cropping. The og:site_name tag shows the publication name above the title on some platforms, which helps readers recognize your site at a glance.
An Honest Limit of This Preview
This preview is a mock built only from the text you paste. It deliberately never fetches, loads, or contacts any other site, so the image area is a placeholder box rather than the real picture. That is a privacy and safety choice: a preview tool that fetched arbitrary URLs could be abused to probe private servers or leak your browsing. The trade-off is that you must check the image itself separately. Open the image URL in your own browser and confirm it loads, is the right picture, and is at least 1200 pixels wide.
The mock still catches the problems that matter most. It shows whether your title wraps awkwardly, whether your description is too long, and whether any field is empty. Those are the mistakes that survive every other check, because they only become visible when the card is actually rendered.
Common Open Graph Mistakes
The most common mistake is having no Open Graph tags at all, which leaves platforms guessing from your page title and first paragraph. The second is a relative image URL, such as /images/card.jpg instead of the full https:// address. Social platforms fetch the image from their own servers, and a relative URL means nothing to them, so the card arrives imageless. Always use absolute URLs for og:image and og:url.
The third mistake is caching. After you fix your tags, the first platform to share the link may still show the old card, because it cached the earlier version. Most platforms offer a debugger or sharing debugger tool that forces a fresh fetch. Use it after every fix, and share the link again only after the debugger shows the new card. The fourth mistake is duplicate tags: two og:title tags on one page, often from a plugin and a theme both adding them, leave platforms guessing which one to use.
How to Add Open Graph Tags to Your Site
Most content systems add Open Graph tags through an SEO plugin or a social sharing setting. Fill in the social title, social description, and social image fields for each important page, rather than relying on defaults. The homepage and your most shared articles deserve custom images and descriptions; archive and tag pages can use sensible defaults. After publishing, test the link in a sharing debugger before announcing it anywhere, because a broken card on launch day is hard to unsee.
Frequently Asked Questions
Why does the preview not show my real image? By design. This tool never fetches other sites. Check the image URL separately in your browser.
Why does my card still look old after I fixed the tags? The platform cached the old version. Use its sharing debugger to force a refresh.
Do I need Twitter card tags too? Most platforms fall back to Open Graph tags when Twitter tags are missing, but adding a twitter:card tag with the value summary_large_image gives you control over the large-image layout.
Write the four tags, preview the mock, check the image yourself, and your links will arrive looking the way you intended.
Related Tools
Also available in Spanish: Vista Previa de Tarjetas Open Graph Gratis – Ve tu Tarjeta Social.
More free tools: cURL Command Builder – Build cURL Commands Free Online, API Request Code Generator – Generate Fetch and Python Snippets Free, URL Query Parameter Editor – Edit URL Query Parameters Free Online, MIME Type Lookup – Find the MIME Type of Any File Extension Free, JSON Key Sorter – Sort JSON Keys Alphabetically Free Online, SSH Config Generator – Generate SSH Config Files Free Online, Nginx Config Generator – Generate Nginx Server Blocks Free Online, Env File Generator – Generate .env Files Free Online, Remove Duplicate Lines Online Free – Delete Repeated Lines Fast.