Open Graph Preview Tool Online
See exactly how your page will look when shared on Facebook, Twitter, LinkedIn, and Discord. Fill in the fields below to generate live preview mockups and copy ready-to-use meta tags.
Open Graph Tags
Twitter Card Tags
Generated Meta Tags
Core Capabilities
Multi-Platform Preview
See exactly how your shared link will render on four major platforms simultaneously. Facebook, Twitter, LinkedIn, and Discord all interpret Open Graph tags differently, applying unique layouts, image crops, and text truncation rules. This tool reproduces each platform's card design so you can identify issues before publishing. No more sharing a link only to discover the image is cropped awkwardly or the title is cut off mid-sentence. You get an accurate visual preview that matches real-world behavior on every platform.
Live Real-Time Updates
Every character you type immediately refreshes all four preview mockups without any button clicks or page reloads. This real-time feedback loop lets you rapidly iterate on titles, descriptions, and image URLs until the preview looks perfect. You can experiment with different description lengths to see exactly where each platform truncates your text, test various title formats for maximum impact, and confirm that your chosen image renders well at every aspect ratio used by the platforms.
Ready-to-Use Tag Generator
Once you are satisfied with the previews, copy properly formatted HTML meta tags with a single click. The generator produces both Open Graph and Twitter Card markup with correct attribute names and proper escaping. Paste the tags directly into the head section of your HTML document and your social sharing previews are configured. This eliminates manual tag authoring, reduces typos, and ensures you never forget a required attribute. The output follows current best practices for both protocols.
Twitter Card Support
In addition to Open Graph tags, this tool lets you customize Twitter-specific card properties. Choose between summary and summary_large_image card types, set a separate Twitter title and description if needed, or rely on automatic fallback to your OG values. Twitter processes its own meta tags first and only falls back to Open Graph when its native tags are absent. Having dedicated fields for both protocols gives you full control over how your content appears on every platform without any guesswork.
Quick Start Guide
- Enter your Open Graph details. Fill in the og:title, og:description, og:image URL, and other fields in the Open Graph Tags section. The title and image are the most important elements that determine how your share card will look across all platforms.
- Configure Twitter Card options. If you want different text or images on Twitter compared to Facebook and LinkedIn, fill in the Twitter Card fields. Otherwise, leave them empty and the tool will automatically fall back to your Open Graph values.
- Review the live previews. As you type, all four platform mockups update in real time. Check that your title is not truncated, your description conveys the right message, and your image displays correctly at each platform's aspect ratio.
- Copy the generated meta tags. Click the Copy OG Tags button to copy properly formatted HTML meta tags to your clipboard. Paste them into the
<head>section of your web page to enable rich social sharing previews.
Test your Open Graph tags on multiple platforms — Facebook, LinkedIn, Twitter, and Discord each render previews differently. Facebook crops images to 1.91:1, Twitter supports both summary and large image cards, and LinkedIn favors 1200x627px images.
Social platforms aggressively cache Open Graph data. Updating your og:image or og:title on the page does not immediately update the preview. Use Facebook's Sharing Debugger (developers.facebook.com/tools/debug/) and Twitter Card Validator to force a cache refresh after changes.
Understanding Open Graph and Social Sharing
The Open Graph protocol was introduced by Facebook in 2010 to standardize how web pages are represented when shared on social media. Before Open Graph, sharing a URL on Facebook would often produce unpredictable results with incorrect images, missing titles, or generic descriptions pulled from random page content. By embedding a small set of meta tags in the HTML head section, developers gained complete control over the share card appearance. Today, the Open Graph protocol is supported by virtually every social media platform, messaging application, and content aggregator on the internet.
The core Open Graph tags include og:title, og:description, og:image, og:url, og:type, and og:site_name. The title and image are the two most impactful elements because they occupy the most visual real estate in a share card. Research consistently shows that posts with well-optimized Open Graph images receive significantly higher click-through rates than those with generic or missing images. The description provides context that helps users decide whether to click, making it a critical factor in social media engagement.
Twitter developed its own card system that runs in parallel with Open Graph. Twitter Cards use a separate set of meta tags prefixed with twitter: instead of og:. The twitter:card tag is unique because it controls the visual layout rather than the content. The summary card type shows a small thumbnail beside the text, while summary_large_image displays a large banner image above the text. When Twitter-specific tags are not present, the platform falls back to reading Open Graph tags, which is why many sites only implement OG tags. However, using both gives you fine-grained control over each platform independently.
LinkedIn and Discord also rely on Open Graph tags to generate link previews. LinkedIn renders share cards with a focus on the image and title, displaying the domain name beneath. Discord creates rich embeds with a colored sidebar, site name, title, description, and image arranged vertically. Each platform applies its own rules for image cropping, text truncation, and layout, which is why previewing your tags across multiple platforms is essential. An image that looks perfect on Facebook might be cropped poorly on Twitter or displayed at an unexpected size in a Discord chat.
Proper Open Graph implementation is also a strong signal for professional web development and content strategy. Search engines do not use OG tags for ranking, but the improved click-through rates from attractive share cards drive more traffic, increase dwell time, and generate natural backlinks. For content marketers, e-commerce sites, bloggers, and SaaS products, investing a few minutes in configuring Open Graph tags can meaningfully improve the performance of every shared link across every social channel.
Who Benefits from an OG Preview Tool?
Social Media Manager Preparing Posts
You are previewing how a blog post link will appear on LinkedIn, Facebook, and Twitter before sharing it to 50,000 followers. One broken image or truncated title can undermine an entire campaign. This tool shows you the exact card layout on every major platform simultaneously, so you can catch issues and fix them before a single post goes live.
Developer Debugging Broken Preview Cards
You are figuring out why a shared link shows a broken image or wrong title on social platforms. Instead of sharing test links repeatedly and waiting for caches to clear, this tool lets you paste in your OG tag values and instantly see how each platform will render them. You can identify whether the issue is a missing tag, an incorrect image URL, or a platform-specific crop problem in seconds.
Marketing Team Reviewing Brand Consistency
You are checking that all company pages display consistent branding in social media previews. When your organization has dozens of pages shared across multiple platforms, even small inconsistencies in titles, descriptions, or images erode brand trust. This tool lets you audit each page's OG tags visually across Facebook, Twitter, LinkedIn, and Discord in one view.
FAQ
Why does my shared link show an old image even after I updated og:image?
Social media platforms aggressively cache Open Graph data to reduce server load. When you update your og:image tag, Facebook, Twitter, LinkedIn, and Discord continue showing the previously cached version until the cache expires or is manually cleared. Facebook's cache can persist for days or even weeks. To force an update, use Facebook's Sharing Debugger (developers.facebook.com/tools/debug/) and click "Scrape Again" to refresh the cached data. For Twitter, use the Card Validator to trigger a re-fetch. LinkedIn provides the Post Inspector tool for the same purpose. Discord's cache typically expires within a week but cannot be manually cleared. Always verify your changes using these platform debugger tools before sharing updated links.
What image dimensions work best across all social platforms?
The universally recommended size is 1200 by 630 pixels, which produces a 1.91:1 aspect ratio that works well on Facebook, LinkedIn, and most other platforms. Twitter's summary_large_image card works best with 1200 by 628 pixels, while the standard summary card prefers a square image of at least 144 by 144 pixels. Discord displays images at various sizes depending on the embed context. For the safest cross-platform approach, create your image at 1200 by 630 pixels and keep critical content like text and logos centered and away from the edges, since each platform crops differently. Keep file sizes under 1 MB for fast loading, and use JPEG for photographs or PNG for graphics with text.
How do I make my link preview show a large image instead of a small thumbnail?
The card layout is controlled by the twitter:card meta tag. Set it to "summary_large_image" instead of "summary" to display a large banner image above the text on Twitter. For Facebook and LinkedIn, the image size determines the layout — images wider than 600 pixels automatically display as large cards, while smaller images appear as thumbnails beside the text. Ensure your og:image points to an image that is at least 1200 by 630 pixels for the best results. If your image is too small (under 200 pixels wide on Facebook), the platform may refuse to display it at all or fall back to a generic placeholder.
Can I set different preview images for Facebook and Twitter?
Yes. Twitter checks for the twitter:image tag first and only falls back to og:image when it is absent. This means you can set og:image for Facebook, LinkedIn, and other Open Graph platforms, then use twitter:image to specify a different image optimized for Twitter's aspect ratio and display rules. This is useful when Facebook's 1.91:1 crop works poorly for your content and you want to provide a Twitter-specific alternative. The same override pattern works for twitter:title and twitter:description, giving you full control over how your content appears on each platform independently.
Why does my preview look correct in the debugger but wrong when actually shared?
This discrepancy usually stems from CDN caching or propagation delays. When you use a platform debugger, it fetches a fresh copy of your page directly from your server. But when a regular user shares your link, the request may hit a cached version on a CDN edge server that still contains the old meta tags. Server-side rendering issues can also cause this — if your server returns different HTML to the platform's crawler than what the debugger sees, the previews will differ. Wait 15 to 30 minutes after updating your tags and purging your CDN cache, then test the share again. Also verify that your server does not serve different content based on user agent strings.
How do I add a preview image for pages on a single-page application (SPA)?
Single-page applications built with React, Vue, or Angular render content with JavaScript on the client side, but social media crawlers do not execute JavaScript. This means your dynamically injected Open Graph tags are invisible to Facebook, Twitter, and other platforms. The solution is server-side rendering (SSR) or prerendering. Frameworks like Next.js, Nuxt, and Angular Universal generate HTML on the server with all meta tags already in place. Alternatively, use a prerendering service that detects crawler user agents and serves a pre-built HTML snapshot with the correct OG tags. You can verify that your solution works by viewing the page source (not the inspector) to confirm the meta tags appear in the raw HTML response.
Open Graph Best Practices
Each social platform interprets Open Graph tags differently, with its own image dimensions, text truncation rules, and caching behavior. Designing for all of them at once requires knowing the specific constraints of each platform.
| Platform | Image Size | Title Limit | Description Limit | Special Notes |
|---|---|---|---|---|
| 1200 x 630 px | ~65 characters | ~155 characters | Aggressive caching. Use the Sharing Debugger to clear cache after updates. Minimum image width: 200px. | |
| Twitter (X) | 1200 x 628 px (large) 144 x 144 px (summary) |
~70 characters | ~200 characters | Prefers twitter: tags over og: tags. Set twitter:card to "summary_large_image" for best display. Max image file size: 5 MB. |
| 1200 x 627 px | ~150 characters | ~300 characters | Shows the domain name prominently below the image. Use the Post Inspector tool to refresh cached previews. Minimum image width: 1200px recommended. | |
| Discord | 1200 x 630 px (large) Any size (thumbnail) |
~256 characters | ~350 characters | Renders embeds with a colored sidebar using the og:theme-color meta tag. Supports og:video for inline video previews. Caches for roughly one week. |
| Slack | 1200 x 630 px | ~100 characters | ~300 characters | Unfurls links automatically in channels. Shows site_name above the title. Respects twitter:card for layout choice. Cache lasts approximately 1 hour. |
Universal recommendations: Create your OG image at exactly 1200 x 630 pixels, which is the safe zone that works well across every major platform. Keep the file size under 1 MB for fast loading (JPEG quality 80-85 is usually ideal). Place critical text and visual elements in the center of the image, because some platforms crop the edges. Always include og:title, og:description, og:image, and og:url as the minimum set of tags, then add platform-specific tags like twitter:card for maximum control over how your content appears everywhere it is shared.
How Toolrip Compares to Other OG Preview Tools
Several tools let you preview Open Graph tags, but they differ in privacy, platform coverage, and workflow. Here is how Toolrip compares to the most popular alternatives.
| Feature | Toolrip | Facebook Sharing Debugger | Twitter Card Validator | metatags.io |
|---|---|---|---|---|
| Privacy | 100% client-side, no data sent | Requires Facebook login | Requires Twitter/X login | Server-side processing |
| Multi-platform Preview | Facebook, Twitter, LinkedIn, Discord | Facebook only | Twitter only | Facebook, Twitter, LinkedIn, Google |
| Real-time Editing | Live preview as you type | Fetches live URL only | Fetches live URL only | Live preview as you type |
| Cost | Free, no signup | Free (requires account) | Free (requires account) | Free |
Toolrip is the only tool on this list that shows all four major platform previews simultaneously without requiring a login or sending your data to a server. The platform debuggers from Facebook and Twitter are essential for cache-clearing on live sites, but Toolrip is ideal for drafting and perfecting your OG tags before deployment.
Citations & Resources
- Google Search Central — Title Link Documentation — Official guidelines on how Google generates title links in search results
- The Open Graph Protocol — Official specification for Open Graph meta tags used by Facebook and other platforms
- Twitter Cards Documentation — Official guide for implementing Twitter Card meta tags