Open Graph Previewer
Preview exactly how your page will appear when shared on Facebook, LinkedIn, Discord, Slack, and Twitter/X. Enter OG tag values manually or paste raw HTML to auto-extract them.
How to Use This Tool
- Choose Manual mode to enter OG tag values field by field, or Paste HTML mode to auto-extract tags from your page's source code.
- Fill in og:title, og:description, og:image (URL), og:url, and og:site_name.
- Click the platform tabs (Facebook, LinkedIn, Discord, Slack, Twitter/X) to see how your page looks on each.
- Review the warnings panel for missing tags, image format issues, or truncation risks.
- Copy the generated HTML code (includes both OG and Twitter Card tags) and paste it into your page's
<head>section. - Use Load Sample to see example EmproIT OG tags, or Clear to start fresh.
About the Open Graph Previewer
The Open Graph protocol, originally developed by Facebook in 2010, has become the universal standard for controlling how web pages appear when shared on social media platforms. When someone shares a URL on Facebook, LinkedIn, Discord, Slack, or dozens of other platforms, these services look for OG meta tags in the page's HTML to generate a rich preview card with an image, title, and description. Without proper OG tags, platforms either show a blank card or attempt to guess content from the page — often picking the wrong image or a garbled description.
The challenge is that every platform renders OG data differently. Facebook displays a full-width image above a light-background card with the domain in uppercase. LinkedIn uses a similar layout but with different typography and image cropping (optimized for 1200x627 pixels). Discord renders an embed-style card with a colored left border and dark background. Slack shows a compact card with a gray left border and bold site name. Twitter/X has its own Card system with rounded corners and distinct styling. What looks perfect on Facebook might be truncated on LinkedIn or poorly formatted on Discord.
This Open Graph Previewer solves that problem by showing you all five platform previews simultaneously. Enter your OG tag values or paste raw HTML, and instantly see how your page will appear everywhere. The tool also validates your tags — checking for missing required properties, image format issues, and content length that might cause truncation. The generated code includes both Open Graph and Twitter Card meta tags, ready to copy and paste.
Unlike platform-specific debuggers (like Facebook's Sharing Debugger), this tool works before your page is published. You can test and refine your OG tags during development, catch issues early, and launch with confidence that your social previews look professional across every platform. Your input is auto-saved locally so you can return and continue editing anytime.
Everything runs 100% in your browser. No data is sent to any server, no account is required, and your content stays completely private. The recommended OG image size is 1200 x 630 pixels (1.91:1 aspect ratio), which works well across all major platforms.
Frequently Asked Questions
What is the Open Graph protocol?
The Open Graph protocol is a set of meta tags originally created by Facebook that allows web pages to become rich objects in a social graph. When you add OG tags to your HTML, social platforms like Facebook, LinkedIn, Discord, and Slack use them to generate rich preview cards when someone shares your URL.
What OG tags are required?
The four required OG tags are og:title, og:type, og:image, and og:url. Additionally, og:description and og:site_name are strongly recommended for the best social sharing experience across all platforms.
What is the recommended OG image size?
The recommended OG image size is 1200 x 630 pixels with a 1.91:1 aspect ratio. This size works optimally across Facebook, LinkedIn, Twitter, Discord, and Slack. Use JPG or PNG format and keep the file size under 5MB for fastest loading.
How is this different from Facebook's Sharing Debugger?
Facebook's Sharing Debugger fetches your live URL and shows only the Facebook preview. This tool lets you preview across 5 platforms simultaneously (Facebook, LinkedIn, Discord, Slack, Twitter) without publishing your page first. You can test OG tags before they go live.
What's the difference between OG tags and Twitter Cards?
OG tags are used by Facebook, LinkedIn, Discord, Slack, and other platforms. Twitter Cards (twitter:card, twitter:title, etc.) are Twitter-specific meta tags. Twitter will fall back to OG tags if its own tags are missing, but dedicated Twitter Card tags give you more control over the Twitter/X presentation.
What are valid og:type values?
Common og:type values include "website" (default for most pages), "article" (for blog posts and news), "product" (for e-commerce), "profile" (for person pages), and "video.other" (for video content). Most websites should use "website" as the default type.
How do I add OG tags to my page?
Add OG meta tags inside the <head> section of your HTML page. Each tag uses the format: <meta property="og:title" content="Your Title">. Use this tool to generate all required tags, then copy and paste the generated HTML code into your page's head section.
Why isn't my OG image showing on Facebook?
Common reasons include: the image URL is not absolute (must start with https://), the image is too small (minimum 200x200px), the image file is too large (over 8MB), the server blocks Facebook's crawler, or Facebook has cached an old version. Use Facebook's Sharing Debugger to clear the cache.