Devloxify
Devloxify

Devloxify · 110+ Tools

Open Graph Previewer

Perfect your content's first impression on the social web.

Edit Meta Content

Target: 50-60 characters23 chars
Target: 150-160 characters98 chars

Generated Tags

<!-- Standard Meta Tags -->
<title>Your Amazing Page Title</title>
<meta name="description" content="This is a compelling description of your content that encourages clicks on social media platforms.">

<!-- Facebook Meta Tags -->
<meta property="og:url" content="https://example.com/page-url">
<meta property="og:type" content="website">
<meta property="og:title" content="Your Amazing Page Title">
<meta property="og:description" content="This is a compelling description of your content that encourages clicks on social media platforms.">
<meta property="og:image" content="https://images.unsplash.com/photo-1460925895917-afdab827c52f?auto=format&fit=crop&q=80&w=1200&h=630">

<!-- Twitter Meta Tags -->
<meta name="twitter:card" content="summary_large_image">
<meta property="twitter:domain" content="example.com">
<meta property="twitter:url" content="https://example.com/page-url">
<meta name="twitter:title" content="Your Amazing Page Title">
<meta name="twitter:description" content="This is a compelling description of your content that encourages clicks on social media platforms.">
<meta name="twitter:image" content="https://images.unsplash.com/photo-1460925895917-afdab827c52f?auto=format&fit=crop&q=80&w=1200&h=630">
OG Preview

EXAMPLE.COM/PAGE-URL

Your Amazing Page Title

This is a compelling description of your content that encourages clicks on social media platforms.

Live Mockup
1200x630 Optimized

Pro Tip: Character Counts

Keep titles under 60 characters and descriptions under 160. Most platforms truncate beyond these limits, reducing your content's immediate impact.

Pro Tip: Image Ratio

Use an aspect ratio of **1.91:1** (e.g., 1200x630px). Images smaller than 600x315 will not be rendered as large cards on Facebook or Twitter.

Pro Tip: Debugging

Social platforms **cache** meta tags. If you update your site, use the Facebook Sharing Debugger to force a refresh of your content across their servers.

What are Open Graph Tags?

Open Graph meta tags are snippets of code that control how URLs are displayed when shared on social media. Originally created by Facebook, they are now utilized by virtually every major social platform including LinkedIn, Twitter (X), Slack, and Discord.

Why Visual Previews Matter

Sharing a link is more than just passing text—it's a marketing opportunity. A shared link with a high-resolution og:image and a compelling og:title can increase Click-Through Rates (CTR) by over 250% compared to a plain text link.

Core Tags to Optimize

  • og:title: The headline of your page. Keep it punchy.
  • og:description: A 2-3 sentence summary that explains "why" a user should click.
  • og:image: The most critical element. Use 1200x630px for full-width cards.
  • og:url: The canonical link for your page.

This Open Graph Previewer allows you to rapidly iterate on your metadata without having to deploy your site or use external debuggers. Copy the generated code once you're satisfied and paste it into the <head> of your HTML.