Open Graph Preview

What is Open Graph?

Open Graph is a set of meta tags that control how your content appears when shared on social media platforms. When someone shares your link on Facebook, Twitter, LinkedIn, Slack, or Discord, these tags determine what image, title, and description are shown in the preview card.

How to Use the Open Graph Preview Tool

1. Enter your og:title — the headline shown in social cards
2. Write your og:description — a brief summary of your content
3. Provide your og:image URL — the image displayed in previews (1200x630px recommended)
4. Set your og:url and og:site_name
5. View real-time previews across all major platforms
6. Adjust text to fit platform character limits and look compelling

Essential Open Graph Tags

• og:title — The headline of your content (required)
• og:description — A brief summary (recommended, 2-4 sentences)
• og:image — The URL of an image to display (recommended, 1200x630px)
• og:url — The canonical URL of your page
• og:type — The type of content (website, article, video, etc.)
• og:site_name — Your brand or website name

Optimal Image Dimensions by Platform

• Facebook & LinkedIn: 1200x630px (1.91:1 ratio) — minimum 200x200px
• Twitter: 506x506px for square, 506x280px for landscape
• Discord: Max file size 8MB, recommended 1024x512px or larger
• Slack: Variable sizes depending on user preferences

Character Limits by Platform

• Facebook Title: 88 characters (will truncate after)
• Facebook Description: 2-3 lines visible, typically 300 characters
• Twitter Title: 70 characters (display varies based on card type)
• LinkedIn Title: 100 characters
• LinkedIn Description: 2-3 lines visible
• Discord Description: 2048 characters maximum

Best Practices for Open Graph Tags

• Use unique titles and descriptions for each page — avoid generic text
• Include your primary keyword in the og:title
• Keep titles concise and compelling. A strong title increases shares.
• Use high-quality, eye-catching images. Logos alone typically perform poorly.
• Test your tags with each platform's debugger before publishing
• Ensure your og:image URL is publicly accessible and HTTPS
• Match your og:title, og:description, and og:image to form a cohesive message

Frequently Asked Questions

What happens if I don't set Open Graph tags?

Social platforms will try to extract content from your page automatically. Without Open Graph tags, they may pull random text or images, resulting in a poor preview. Always set these tags to control how your content is shared.

Which image size should I use?

Use 1200x630px (1.91:1 ratio) as the standard. This size works well across Facebook, LinkedIn, Twitter, and Discord. Larger images (up to 4000x4000px) are supported but may slow down sharing. Always keep images under 5MB.

Why doesn't my preview update on social media?

Social platforms cache link previews for performance. If you change your Open Graph tags, use the platform's link debugger to force a refresh. Facebook uses its Link Debugger, LinkedIn has a Post Inspector, and Twitter has a Card Validator.

Can I use different og:title and page title?

Yes! Your page's HTML title tag is for search engines and browser tabs. Your og:title is specifically for social sharing. They can be different — optimize each for its purpose.

What's the difference between og:description and meta description?

Meta description (used by Google) and og:description (used by social platforms) are separate tags. Meta descriptions typically appear in search results, while og:description shows in social preview cards. Write both for optimal performance.

Which platforms support Open Graph tags?

Facebook, LinkedIn, Twitter, Discord, Slack, and many others support Open Graph. Not all platforms respect every tag — some have proprietary formats. Always test your links on the platforms where you plan to share.