Open Graph Preview

Preview Open Graph meta tags for Facebook, Twitter, LinkedIn, Discord, Slack, and WhatsApp. Generate complete OG meta tag HTML. Validate image dimensions and character counts.

0 characters (recommended: 60)
0 characters (recommended: 160)
Recommended: 1200×630px (max 8MB)

📘 Facebook

No image
quickutil.dev
QuickUtil.dev - Free Online Developer Tools
Free online developer tools for modern development workflows.

🐦 Twitter

No image
QuickUtil.dev - Free Online Developer Tools
Free online developer tools for modern development workflows.
quickutil.dev

💼 LinkedIn

No image
QuickUtil.dev - Free Online Developer Tools
quickutil.dev

💬 Discord

QuickUtil.dev
QuickUtil.dev - Free Online Developer Tools
Free online developer tools for modern development workflows.
No image

Features

👁️

Live Preview

See exactly how your content will appear when shared on Facebook, Twitter, LinkedIn, and Discord. Update in real-time as you type.

✅

Character Validation

Get warnings when your title or description exceeds recommended character limits. Ensure optimal display across all platforms.

📐

Image Guidelines

See recommended image dimensions for each platform. Ensure your og:image displays correctly without cropping or distortion.

🔖

Generate HTML

Automatically generate complete meta tag HTML code. Copy and paste directly into your webpage's <head> section.

About Open Graph Protocol

The Open Graph protocol was created by Facebook in 2010 to standardize how web pages are represented when shared on social media. By adding Open Graph meta tags to your HTML, you control the title, description, image, and other information that appears in social media previews. This ensures your content looks professional and enticing when users share it on Facebook, LinkedIn, Twitter, Discord, Slack, WhatsApp, and other platforms. Without OG tags, social platforms fall back to generic page content, which often results in poor-looking previews with missing images or incorrect text.

Why Open Graph Matters

Social media is a primary driver of web traffic. When users share your content, the preview card is the first thing potential visitors see. A well-crafted Open Graph preview with an eye-catching image, compelling title, and clear description can significantly increase click-through rates. Studies show that posts with images get 2-3x more engagement than those without. OG tags also help with brand consistency, ensuring your site name and branding appear correctly across all platforms. For businesses, developers, and content creators, mastering Open Graph is essential for effective social media marketing.

How This Tool Works

Fill in the form fields for title, description, image URL, page URL, and site name. Click "Update Preview" to see live previews for Facebook, Twitter, LinkedIn, and Discord. The tool displays character counts for title and description, warning you when you exceed recommended limits (60 characters for title, 160 for description). When you're satisfied with your previews, click "Generate Meta Tags" to get the complete HTML code. The generated code includes og: tags for Open Graph, twitter: tags for Twitter Cards, and standard meta tags. Copy the HTML and paste it into your webpage's <head> section.

Common Use Cases

Frequently Asked Questions

What are Open Graph meta tags? ▼
Open Graph meta tags are snippets of code in your webpage's HTML <head> section that control how your content appears when shared on social media platforms. Originally created by Facebook, OG tags are now used by LinkedIn, Discord, Slack, WhatsApp, and many other platforms. The main tags are og:title (the title of your page), og:description (a brief description), og:image (a preview image URL), og:url (the canonical URL), and og:site_name (your website name).
What is the difference between Open Graph and Twitter Cards? ▼
Twitter Cards use a separate set of meta tags with the twitter: prefix (e.g., twitter:card, twitter:title, twitter:description, twitter:image). However, if Twitter-specific tags are not present, Twitter will fall back to using Open Graph tags. Most websites include both sets of tags for maximum compatibility. Twitter Card types include summary (small image), summary_large_image (large image), app (mobile app), and player (video/audio).
What are the recommended image dimensions for Open Graph? ▼
Facebook recommends 1200×630 pixels (1.91:1 ratio) for og:image. The minimum size is 600×315 pixels. Twitter recommends 1200×628 pixels for summary_large_image cards and 120×120 pixels for summary cards. LinkedIn recommends 1200×627 pixels. Images should be under 8MB for Facebook and 5MB for Twitter. Use JPG or PNG format. This tool validates your image URL and provides dimension recommendations for each platform.
How long should my og:title and og:description be? ▼
For og:title, keep it under 60 characters to avoid truncation on most platforms. Facebook displays about 60 characters, LinkedIn about 70, and Twitter about 70. For og:description, aim for 150-160 characters. Facebook shows up to 200 characters on desktop but may truncate earlier on mobile. LinkedIn shows about 150 characters. Twitter shows about 200 characters. This tool displays character counts and warnings when limits are exceeded.
How do I test my Open Graph tags? ▼
After adding OG tags to your webpage, use platform-specific debugging tools: Facebook Sharing Debugger (developers.facebook.com/tools/debug/), Twitter Card Validator (cards-dev.twitter.com/validator), LinkedIn Post Inspector (linkedin.com/post-inspector/). These tools fetch your page, show how it will appear when shared, and highlight any issues with your tags. This preview tool simulates the appearance before you publish, but official validators fetch and cache your actual page.
What is og:type and what values can it have? ▼
The og:type tag specifies the type of content on your page. Common values include 'website' (default for most pages), 'article' (blog posts, news articles), 'video.movie', 'video.episode', 'music.song', 'music.album', 'book', 'profile' (user profile), and 'product'. Each type can have additional specific properties. For example, article type can include article:author, article:published_time, article:section. Most websites use 'website' or 'article'.
Do I need both og:url and the canonical URL? ▼
Yes, they serve different purposes. The canonical URL (<link rel='canonical'>) tells search engines which version of a page is the primary one (useful when you have duplicate content or URL parameters). The og:url tells social platforms which URL to display when the page is shared. They should usually be the same URL. Always use absolute URLs (starting with https://) for both. This ensures consistent sharing and proper attribution.
How do I generate the complete meta tag HTML? ▼
This tool generates a complete set of meta tags including og:title, og:description, og:image, og:url, og:site_name, og:type, and Twitter Card equivalents (twitter:card, twitter:title, twitter:description, twitter:image). Simply fill in the form fields and click 'Generate Meta Tags'. The HTML code is displayed in a textarea where you can copy it and paste it into the <head> section of your webpage, right after your page title and before the closing </head> tag.

Explore More Developer Tools

Check out our other free SEO and web development tools. Generate meta tags, QR codes, favicons, and more.

Meta Tag Generator →