CodeKeetCodeKeet

Open Graph Preview

See how your page appears when shared on Facebook, Twitter, LinkedIn, Slack, WhatsApp, and Discord. 100% client-side.

ℹ️ How to use: Open the page you want to check, right-click → View Page Source (or Ctrl+U), then copy everything (Ctrl+A, Ctrl+C) and paste it below. Nothing is uploaded.
0 chars
👁️
Paste HTML source above to see social previews.
🔒 100% private: The HTML you paste is parsed entirely in your browser. Nothing is uploaded. Images are loaded from their original URLs, not copied.

About Open Graph Preview

When you paste a URL into a messaging app, social network, or chat tool, the platform fetches the page and extracts Open Graph (OG) and Twitter Card metadata to build a preview. This preview is often the first impression a user gets of your link — a strong image + compelling title drives clicks, while a broken or missing preview looks unprofessional. Open Graph tags (og:title, og:description, og:image, og:url) are the standard, defined by Facebook. Twitter Cards (twitter:card, twitter:title, twitter:image) are Twitter's own variant; most platforms fall back to OG tags if Twitter tags are missing. This tool extracts all these tags from pasted HTML and shows you exactly how different platforms will render your link.

How It Works

  1. Paste the full HTML of a page (View Source → Ctrl+A → Ctrl+C) into the input area.
  2. The tool extracts all meta tags (og:*, twitter:*, title, description, canonical).
  3. See previews rendered for Facebook, Twitter, LinkedIn, Slack, WhatsApp, and Discord.
  4. Review warnings for missing required tags, image size, or truncation.

✨ Key Features

  • ✓Paste HTML — extract OG and Twitter Card tags
  • ✓Previews for Facebook, Twitter, LinkedIn, Slack, WhatsApp, Discord
  • ✓Extracts og:title, og:description, og:image, og:url
  • ✓Extracts twitter:card, twitter:title, twitter:image
  • ✓Falls back to <title> and meta description if OG tags are missing
  • ✓Warnings for missing og:image, og:url, title
  • ✓Character count indicators (truncation warnings)
  • ✓Image size hints
  • ✓Copy extracted values
  • ✓Load sample HTML
  • ✓100% client-side — no data sent to any server

🎯 Common Use Cases

  • →Verifying link previews before sharing on social media
  • →Debugging missing or broken preview images
  • →Optimizing a landing page for social sharing
  • →Auditing OG tags on a competitor's page
  • →Testing a blog post's preview after publishing
  • →Preparing social media campaign links
  • →Checking Twitter Card rendering
  • →Learning the difference between OG and Twitter Card

💡 Advanced Tips & Pro Insights

  • ▸og:image should be at least 1200×630 pixels (1.91:1). Smaller images may be cropped or dropped entirely.
  • ▸Use absolute URLs for og:image and og:url (https://example.com/image.jpg) — relative URLs are not always resolved.
  • ▸og:title should be under 88 characters. Facebook truncates longer titles. Twitter truncates around 70 characters.
  • ▸og:description: under 200 characters for Facebook, under 200 for Twitter. Longer text is truncated.
  • ▸twitter:card = "summary_large_image" shows a wide image; "summary" shows a square thumbnail on the left.
  • ▸Slack, Discord, WhatsApp, iMessage, and Telegram all use OG tags — Twitter-specific tags are mostly ignored outside of Twitter/X.
  • ▸If a preview looks stale on Facebook, use the Facebook Sharing Debugger to clear the cache. Twitter has a similar Card Validator.

Frequently Asked Questions

Is this Open Graph preview free?▾
Yes, this Open Graph preview tool is completely free with no signup, email, or usage limits.
Is my data safe?▾
Yes, 100% safe. All extraction and preview rendering happens in your browser. The HTML you paste is never uploaded to any server.
What are Open Graph tags?▾
Open Graph tags are meta tags in the <head> of a page that control how the page appears when shared on social media and messaging platforms. They were introduced by Facebook and are now supported by LinkedIn, Slack, Discord, WhatsApp, iMessage, and more.
What is the difference between Open Graph and Twitter Card?▾
Open Graph (og:*) is the general standard, widely supported. Twitter Cards (twitter:*) are Twitter's own tags. If Twitter-specific tags are missing, Twitter falls back to Open Graph tags. For maximum compatibility, include both.
Which OG tags are required?▾
og:title, og:description, og:image, and og:url are the four most important. Without them, platforms fall back to page title and meta description, or show no preview.
What size should og:image be?▾
1200×630 pixels is the standard (1.91:1 ratio). Minimum recommended: 600×315. Under 200×200 may be rejected by Facebook. Twitter prefers 1200×600 for summary_large_image.
Why does my preview look different on each platform?▾
Each platform renders previews slightly differently — different sizes, layouts, and text truncation. This tool approximates the most common renderings. Always test on the actual platform before a big campaign.
How do I refresh a stale preview on Facebook?▾
Use the Facebook Sharing Debugger (developers.facebook.com/tools/debug/). Paste the URL, click "Scrape Again", and Facebook will fetch fresh metadata. Twitter has a Card Validator with the same purpose.