DevToolBoxGRATIS
Blog

Open Graph Image Preview โ€” Social Share Card Tester

Preview how your page looks when shared on Facebook, Twitter/X, LinkedIn, and Discord. Generate og:tags and twitter:card meta tags.

OG preview
Social Previews
Facebook
example.com
My Awesome Website
Discover the best tools and resources for developers. Build faster, ship smarter.
Twitter / X
example.com
My Awesome Website
Discover the best tools and resources for developers. Build faster, ship smarter.
LinkedIn
My Awesome Website
example.com
Discord
Example Site
My Awesome Website
Discover the best tools and resources for developers. Build faster, ship smarter.
Generated Meta Tags
<meta property="og:title" content="My Awesome Website" />
<meta property="og:description" content="Discover the best tools and resources for developers. Build faster, ship smarter." />
<meta property="og:image" content="https://via.placeholder.com/1200x630/1a1a2e/e2e8f0?text=OG+Image+Preview" />
<meta property="og:url" content="https://example.com" />
<meta property="og:site_name" content="Example Site" />
<meta property="og:type" content="website" />

<meta name="twitter:card" content="summary_large_image" />
<meta name="twitter:title" content="My Awesome Website" />
<meta name="twitter:description" content="Discover the best tools and resources for developers. Build faster, ship smarter." />
<meta name="twitter:image" content="https://via.placeholder.com/1200x630/1a1a2e/e2e8f0?text=OG+Image+Preview" />
๐• Twitterin LinkedIn

Nilai alat ini

3.8 / 5 ยท 164 penilaian

Alat Lainnya

๐Ÿท๏ธMeta Tag Generator๐Ÿ“Schema Markup Generator๐Ÿ”—Generator Slug URLโญFavicon Generator

Recommended

VercelDeploy your frontend instantlyDigitalOceanCloud hosting from $4/mo

Tetap Update

Dapatkan tips dev mingguan dan tool baru.

Tanpa spam. Berhenti kapan saja.

Enjoy these free tools?

โ˜•Buy Me a Coffee

How to Use

  1. Enter your page title, description, and image URL
  2. Set your site name and page URL
  3. Preview cards for each platform
  4. Copy the generated meta tags

Use Cases

  • Testing social share appearance
  • Optimizing click-through rates
  • Generating Open Graph meta tags
  • Previewing Discord embeds

FAQ

What platforms are previewed?
Facebook, Twitter/X, LinkedIn, and Discord card previews.
What is the recommended og:image size?
1200x630 pixels for optimal display across all platforms.