Preview a social share card

Preview Open Graph and Twitter card tags at common social-card dimensions.

freeworks offlinenothing uploaded
ToolSocial Preview
Input
Output
—

How it works

Social tags become title, description, image, URL, creator, and card-type fields, then render at preview dimensions. Image selection follows tag order and does not fetch or resize remote files.

  • Landscape cards match common Open Graph previews.
  • Square crops suit some mobile surfaces.

Worked example

Preview Open Graph sharing card with image
See how a page with OG title, description, image, and URL appears when shared on Facebook and Twitter
Input
											<meta property="og:title" content="My Blog Post">
<meta property="og:description" content="A guide to modern web development best practices and tools.">
<meta property="og:image" content="https://example.com/cover.jpg">
<meta property="og:url" content="https://example.com/blog/my-post">
Output
												<div style="font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif; max-width: 550px; padding: 16px;">

  <h3 style="margin: 0 0 12px 0; font-size: 15px; color: #666;">Facebook / Open Graph Preview</h3>
  <div style="border: 1px solid #dadde1; border-radius: 8px; overflow: hidden; background: white; margin-bottom: 24px;">
    <div style="height: 260px; background-image: url('https://example.com/cover.jpg'); background-size: cover; background-position: center;"></div>
    <div style="padding: 10px 12px;">
      <div style="font-size: 12px; color: #606770; text-transform: uppercase;">example.com</div>
      <div style="font-size: 16px; font-weight: 600; color: #1d2129;…

When to use this

Campaigns, blog shares, and CMS metadata reviews preview social cards.

Edge cases

  • Wrong image aspect ratio can be cropped.
  • Blocked remote images cannot appear.
  • Social caches can keep old cards after edits.

References