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
Optional and entirely your choice. The exact line is shown in the code below; it links to the tool with rel="nofollow".
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

Embed code

<iframe src="https://a2z.tools/embed/w/social-card-preview" title="Social Card Preview by A2Z Tools" width="100%" height="1170" style="border:0;width:100%" loading="lazy" allow="clipboard-write"></iframe>

A plain iframe. Works everywhere, including site builders that strip scripts. Adjust height if your content needs more room.

Works with

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 →

Preview

CustomizeGet code