Social Card Preview Widget

Add a social card previewer to your marketing or web-publishing guides. Readers enter a title, description, URL and image, pick a local image to see it in place, and get the Open Graph and Twitter Card tags to paste into their page.

SEO & Content Tool Runs in your browser Free · no ads

Customize your widget

Theme
Auto follows the visitor's light/dark setting.
Style
Attribution on your page
The widget is free; a visible credit is how you can say thanks. It is one plain line, shown in the code below, linking to the tool with rel="nofollow". Switch it off here or delete the line - the widget works the same either way.
More options
Starting values
Leave blank to use the widget's defaults. Visitors can still change every value.

Live preview

Exactly what your visitors will see

Under the widget on your page: Social Card Preview by A2Z Tools

Embed code

<div data-a2z-widget="social-card-preview" data-height="1170"></div>
<p class="a2z-attribution" style="margin:6px 0 0;font:12px/1.4 system-ui,sans-serif;opacity:.8">Social Card Preview by <a href="https://a2z.tools/social-card-preview" target="_blank" rel="nofollow noopener">A2Z Tools</a></p>
<script async src="https://a2z.tools/embed.js"></script>

Recommended. A small script (what it does) sizes the widget to fit its content, loads it lazily and keeps it isolated in its own frame. Works in WordPress (Custom HTML block), Squarespace, Webflow, Shopify, Blogger, React / Next.js and plain HTML - anywhere a <script> tag is allowed.

Works with

Advertisement

How it works

When a link is shared, Facebook, LinkedIn and X build a card from the page's Open Graph tags (og:title, og:description, og:image) and X's twitter:card tags. The widget lays the entered text out in the style of each platform's card, truncating long titles and descriptions the way the platforms visually do, and writes the matching meta tags with every value HTML-escaped. For privacy and security the embedded frame loads no images from other sites, so to see an image in the card the reader picks a file from their device; it is displayed through a temporary local URL. The image URL field is used only in the generated tags.

Method

  • Tags: og:type, og:title, og:description, og:url, og:site_name, og:image, twitter:card, twitter:title, twitter:description, twitter:image
  • twitter:card = summary_large_image when an image URL is given, else summary
  • Card image area 1.91:1 (1200 x 630 px recommended); text clamped to 1-2 lines
  • Length hints: title up to ~70 characters, description up to ~200

Limitations

  • Layouts are approximations of each platform's current card; WhatsApp, Slack, Discord and Pinterest previews are not drawn.
  • It cannot tell you what a platform has cached for your URL; use each platform's debugger to refresh a stale card.
  • No check that the og:image URL exists, is publicly reachable or meets size limits, because the frame fetches nothing.
  • Only the common tags are generated; og:locale, image width/height, article:* and product:* tags must be added by hand.

Where publishers use it

  • Tutorials on adding Open Graph tags to WordPress, Shopify or static sites
  • Social-media marketing guides about link previews
  • Developer docs for teams building share pages
  • Newsletter and PR guides explaining why a shared link shows the wrong image

Questions

Why can't the widget load my image URL?

The embedded frame blocks third-party images so it cannot be used to track visitors or load hostile content. Choose the image file from your device to preview it.

What image size should I use?

1200 x 630 pixels (1.91:1) works for Facebook, LinkedIn and X large cards. Keep important content away from the edges because platforms crop differently.

I updated my tags but the old card still shows.

Platforms cache cards. Use Facebook's Sharing Debugger or LinkedIn's Post Inspector to refresh them.

Is the preview exactly what each platform shows?

It is an approximation. Platforms change their layouts and truncation often.

Sources

  1. The Open Graph protocol - ogp.me (Facebook) . og:title, og:type, og:image, og:url, og:description, og:site_name
  2. Cards markup reference - X Developer Platform . twitter:card values and fallback to Open Graph tags

Cite or recommend this tool

If you reference this tool in an article, course or documentation, these formats are ready to copy. They are optional - nothing is added to your site unless you paste it.

A2Z Tools Social Card Preview
https://a2z.tools/social-card-preview

Related widgets

More SEO & Content widgets →

  • SERP Snippet Preview

    SEO & Content Tool

    Preview a title, URL and meta description as a Google-style result, with pixel-width estimates.

    Get code

  • URL Slug Generator

    SEO & Content Generator

    Turn a title into a clean URL slug: accents transliterated, optional stop-word removal and length cap.

    Get code

  • Word Counter

    SEO & Content Tool

    Words, characters, sentences, paragraphs, reading time and social-media character limits.

    Get code

  • Keyword Density Checker

    SEO & Content Tool

    Top one-, two- and three-word phrases in a text with counts and density, plus a focus keyword.

    Get code

  • Robots.txt Tester

    SEO & Content Tool

    Check whether a robots.txt allows a crawler to fetch a URL, and which rule decides it (RFC 9309).

    Get code

  • Reading Time Calculator

    SEO & Content Calculator

    Reading and speaking time for a word count or pasted text, at research-based reading speeds.

    Get code

Preview

CustomizeGet code
A2Z EMBEDS FOR YOUR WEBSITE
Advertisement