Open Graph & Twitter Card Preview

Open Graph & Twitter Card Preview

Preview how your URL will appear on Facebook, LinkedIn, Twitter/X, Slack. Fill in OG tags visually.

Facebook / LinkedIn preview

Twitter / X preview

Generated meta tags

What is Open Graph and Twitter Cards?

Open Graph (OG) is Facebook’s protocol (2010) for rich link previews. Twitter Cards is Twitter’s equivalent (2012). Both work by adding meta tags to your HTML that specify how your URL should look when shared on social media or messaging apps. Without OG/Twitter Card tags, your shared link is just a URL – boring, easy to ignore. With them: your link becomes a rich card with image, title, description, and source domain – visually compelling and 2-3x more clickable. Today, virtually every social platform (Facebook, LinkedIn, Twitter/X, WhatsApp, Slack, Discord, Pinterest, iMessage) uses these tags. This tool previews how your URL will appear and generates the meta tags to add to your site.

How to use this tool

  1. Enter page title — 60-90 characters max. The headline that appears in the preview card.
  2. Enter URL — The canonical URL of the page. Determines the domain shown in card.
  3. Enter description — 120-200 characters. Below the title in preview. Acts as the ‘lead’ for users to click.
  4. Optional: image URL — 1200×630 px image for best display. Must be absolute URL (https://). Card looks much better with image – use one!
  5. Preview the cards — Live preview of Facebook/LinkedIn and Twitter/X styles. See how your URL will look before sharing.
  6. Copy generated meta tags — Add the meta tags to your <head> section. Test by sharing the URL after deployment.

Essential OG and Twitter Card tags

Open Graph tags (Facebook, LinkedIn, etc.):

<meta property="og:type" content="website">
<meta property="og:url" content="https://yoursite.com/page">
<meta property="og:title" content="Your Page Title">
<meta property="og:description" content="Description here">
<meta property="og:image" content="https://yoursite.com/image.jpg">

Twitter Card tags (Twitter/X):

<meta name="twitter:card" content="summary_large_image">
<meta name="twitter:url" content="https://yoursite.com/page">
<meta name="twitter:title" content="Your Page Title">
<meta name="twitter:description" content="Description here">
<meta name="twitter:image" content="https://yoursite.com/image.jpg">

Image specifications:

  • OG image: 1200×630 px (1.91:1 ratio). Min 600×315. Max 5 MB.
  • Twitter summary_large_image: Same 1200×630 works fine. Min 300×157.

Examples

Without OG/Twitter tags: Plain URL in chat or post. Boring, low engagement.

With OG/Twitter tags: Rich preview with image, title, description, source domain. 2-3x more clickable.

Optimal image content:

  • Include readable text/headline ON the image – many users only see the image
  • Brand colors and logo if it helps recognition
  • High contrast – readable at thumbnail size
  • 16:9 aspect ratio (1200×630) – widely compatible

For blog posts: Use the post’s featured image. For products: use the main product photo. For business pages: use logo + tagline image.

Tips & best practices

  • Use a SINGLE 1200×630 image for both OG and Twitter – simplifies maintenance
  • Test rendering with Facebook Sharing Debugger, Twitter Card Validator, LinkedIn Post Inspector before sharing
  • Image must be absolute URL (https://yoursite.com/image.jpg), not relative (/image.jpg) – won’t fetch otherwise
  • Description: include CTA (Call to Action) – ‘Read the full guide’, ‘Discover how’, ‘Learn more’
  • Title: front-load important info – some platforms truncate at 50-60 characters
  • Cache-bust: when updating OG image, sometimes platforms cache old version – use Sharing Debugger to refresh
  • For e-commerce, OG image showing product is 3-5x more clickable than generic brand image

Limitations & notes

Social platforms cache OG metadata aggressively – changes may take 24-48 hours to propagate. To force refresh, use platform debuggers (Facebook Sharing Debugger, Twitter Card Validator). Image must be publicly accessible (not behind login). Some image hosts (Imgur, Dropbox) may block social previews – use your own server or CDN. Different platforms render slightly differently – test on each.

Frequently Asked Questions

What’s the difference between Open Graph and Twitter Cards?

Open Graph (OG) is Facebook’s protocol, used by FB, LinkedIn, WhatsApp, Slack, Discord, iMessage, and most messaging apps. Twitter Cards are Twitter’s equivalent (slightly different syntax). Both control preview images, titles, descriptions when your URL is shared. Most modern apps fall back to OG if Twitter Cards not found.

What size should my OG image be?

1200×630 pixels (1.91:1 ratio). This is the universal sweet spot – displays perfectly on Facebook, LinkedIn, Twitter/X, Slack, and most apps. Smaller images (600×315 minimum) work but look small on bigger screens. Larger images may get cropped.

Why isn’t my image showing when I share?

Common causes: (1) Image URL is relative not absolute. (2) Image not publicly accessible (private hosting, requires login). (3) Image file size over 5 MB – some platforms reject. (4) Image format not supported (use JPG or PNG, avoid HEIC/WebP for max compatibility). (5) Cache issue – use Facebook Sharing Debugger to refresh.

Do I need both OG and Twitter Card tags?

Strictly no – many apps fall back to OG if Twitter Cards missing. But for best Twitter/X display, include both. Five extra meta tags is cheap insurance for 30%+ better Twitter previews.

How do I add OG tags to WordPress?

Most SEO plugins (Yoast, Rank Math, AIOSEO) auto-generate OG and Twitter tags from post meta. Set featured image, title, and description in the post editor – tags get generated automatically. For custom themes, add the tags manually in header.php.

Can I use the same OG image for multiple pages?

Yes – but each page should ideally have its own. Generic site-wide image works for homepage and pages without specific imagery. Blog posts, products, and content-specific pages should have unique images for best CTR.

Why does my preview show old info after I updated the page?

Social platforms cache OG metadata for 24-48 hours. To force refresh: Facebook – use Sharing Debugger and click ‘Scrape Again’. Twitter – use Card Validator. LinkedIn – use Post Inspector. Manual refresh ensures changes propagate immediately.

Related tools

Meta Tag Generator · SERP Snippet Preview · Schema.org Generator

Copied to clipboard