Open Graph Preview is a free, browser-based meta tag checker by Aibrify that previews how your links appear on Facebook, Twitter/X, Google, Slack, and Discord without uploading data to any server. Built for social media marketers and web developers who need fast, private Open Graph tag validation and optimization.
What Is Open Graph and Why Does It Matter?
Open Graph is a protocol originally created by Facebook that lets you control how your web pages are represented when shared on social media. When someone shares a link on Facebook, Twitter, LinkedIn, Slack, Discord, or iMessage, the platform reads your Open Graph meta tags to generate a rich preview card with a title, description, and image.
Without properly configured OG tags, platforms either generate a blank preview or pull random text and images from your page - leading to unattractive shares that get fewer clicks. Studies show that links with optimized social previews receive 2-3x higher click-through rates compared to links with broken or missing previews.
Essential Open Graph Tags Every Page Needs
The four required OG tags are:
- og:title - The title of your page as it should appear in social shares. Keep it under 60 characters to avoid truncation.
- og:description - A brief summary of the page content. Aim for 55-155 characters. This is your chance to write compelling copy that drives clicks.
- og:image - The URL of the image to display. Use 1200x630px for best results across all platforms. Must be an absolute URL starting with https://.
- og:url - The canonical URL of the page. This tells platforms which URL to associate with the shared content.
Additionally, og:site_name and og:type are strongly recommended. The site_name appears as a subtle label above the title on Facebook, giving brand context to the share.
Twitter Cards vs. Open Graph
Twitter/X has its own meta tag system called Twitter Cards. The two most common card types are:
- summary - A compact card with a small square thumbnail (120x120px) on the left and text on the right. Best for articles and text-heavy content.
- summary_large_image - A large card with a wide image (1200x628px recommended) above the text. Best for visual content, product pages, and landing pages.
If you only set OG tags and not Twitter-specific tags, Twitter will fall back to your OG values. However, setting twitter:card is required to control which layout Twitter uses. You can also set twitter:title and twitter:description to override OG values with Twitter-specific copy.
Platform-Specific Preview Differences
- Facebook: Displays og:image in a 1.91:1 aspect ratio above the title and description. The og:site_name appears in gray text at the top. Images must be at least 200x200px.
- Twitter/X: Layout depends on the twitter:card type. summary_large_image uses a 2:1 image ratio. The domain is shown below the description.
- Google: Uses meta title and description (not OG tags) for search results, but may use og:image for Discover and news carousels.
- Slack/Discord: Both read OG tags. Slack shows a colored left border, site name, title as a link, description, and image. Discord is similar but uses embed styling.
Common Open Graph Mistakes to Avoid
- Using relative image URLs instead of absolute URLs starting with https://
- Setting og:image to an image behind authentication or on localhost
- Using images smaller than 200x200 pixels
- Forgetting to set og:type (defaults to "website" but should be explicit)
- Duplicating the exact same OG tags across all pages
- Not testing after changes - platforms cache aggressively
- Writing og:description longer than 155 characters (gets truncated)
- Missing the twitter:card tag, causing Twitter to use a fallback layout