📣

Open Graph Debugger / Simulator

Enter your Open Graph tag values and instantly preview how your page looks when shared on Facebook, Twitter/X, LinkedIn, and WhatsApp.

OG Tag Values

Social Media Previews

Your page title will appear here
Your page description will appear here.
Your page title will appear here
Your page description will appear here.
Your page title will appear here

Generated Meta Tags

About Open Graph Debugger — Social Media Preview Simulator Online

When someone shares a link on Facebook, LinkedIn, Twitter/X, or WhatsApp, the platform fetches the Open Graph tags from your page's HTML and uses them to build the share card. The title, description, image, and site name all come from specific meta tags in your <head>. This simulator lets you enter those tag values directly and preview how the card will render on each platform — without publishing anything or waiting for a platform's cache to refresh. Changes to the inputs update the previews live.

The tool is most useful before launch and after making changes to OG tags. A content marketer publishing a new article can verify the share card looks right on all four platforms before announcing it. A developer who changed the og:image URL can confirm the new image loads correctly and fits the card dimensions before the change goes live. A marketer noticing poor click-through rates on shared links can experiment with title and description length in the simulator to understand what truncates and what doesn't, without changing the live page repeatedly.

How to Use Open Graph Debugger

  1. Enter your og:title — the title that appears on the share card. Watch the Facebook and Twitter previews update in real time as you type.
  2. Enter your og:description — the supporting text below the title. This truncates at different lengths depending on the platform.
  3. Enter the og:image URL — a publicly accessible image URL. The image must be accessible from the internet (not localhost) to render in the preview panels.
  4. Fill in og:url and og:site_name to complete the card metadata.
  5. Select a Twitter Card Type — summary_large_image shows a full-width image above the text; summary shows a small thumbnail to the left. Switch between platform tabs to check how each preview looks.

Platform-Specific Differences

Each platform renders OG tag data differently — what works on Facebook won't always translate directly to Twitter or LinkedIn.

  • Facebook: Reads og:title, og:description, og:image, and og:site_name. Titles truncate at around 65 characters and descriptions at around 155 characters in the standard link preview. Facebook caches OG data aggressively — after changing your tags, use Facebook's Sharing Debugger to force a cache refresh, otherwise the old preview may show for hours.
  • Twitter/X: Uses Twitter Card tags (twitter:card, twitter:title, twitter:description, twitter:image) but falls back to OG tags when Twitter Card tags are absent. The summary_large_image card type shows a full-width image above the card title and description — this is the format most commonly associated with high-engagement link previews. Twitter truncates titles at around 70 characters.
  • LinkedIn: Reads og:title, og:description, and og:image. LinkedIn shows a compact card with a smaller image thumbnail to the left of the title and description. Descriptions are truncated more aggressively than Facebook — aim for under 120 characters for reliable full display. Like Facebook, LinkedIn caches OG data and provides a Post Inspector tool to force a refresh.
  • WhatsApp: Shows a compact link preview with a small image thumbnail, title, and short description. WhatsApp is the most restrictive with description length — keep descriptions under 80 characters to avoid truncation in the WhatsApp preview. WhatsApp link previews can be disabled by the person sharing the link, so they're not guaranteed to appear.

Tips for Better OG Tag Performance

OG tag quality directly affects click-through rates on social shares — these are the decisions worth spending time on.

  • Use the shortest title that still works: Shorter titles are less likely to be truncated on any platform. The simulator shows exactly where each platform cuts the text — if your title has more than 60 characters, test what the truncated version reads like and consider shortening the title rather than having it cut off mid-phrase.
  • Design OG images specifically for sharing: An image that looks good on your article page (portrait, detailed, text-heavy) often looks poor as a 1200×630px landscape share card. Dedicated OG images with bold, simple visuals and readable text at small sizes tend to get more clicks than auto-cropped article header images.
  • Include text in the OG image for articles: Cards with the article headline or a short statement overlaid on the image often outperform cards with just a photo. The title in the card text and the title overlaid on the image together reinforce the message — but keep the image text short and readable at thumbnail size.
  • Set og:site_name to your brand, not the page title: The site_name field appears below the title on Facebook and LinkedIn cards as a domain/brand identifier. Using your brand name here rather than a specific page title makes it clear which publication or site the link comes from, which affects whether someone recognizes it as trustworthy.

Why Use a Social Media Preview Simulator Online

The official approach for previewing OG tags is using each platform's own tool: Facebook's Sharing Debugger, Twitter's Card Validator, LinkedIn's Post Inspector. These tools work but have significant friction — they require accounts, work on live URLs (not local or staging environments), have rate limits, and only show one platform at a time. A simulator that accepts direct tag input shows all four previews simultaneously from any values, including from pages that haven't been published yet, which makes it usable during development and design rather than only after deployment.

Frontend developers building new page templates benefit from seeing how the OG configuration will render before the template goes to production. Content teams responsible for article metadata benefit from a fast review tool that doesn't require navigating four separate platform tools. Marketing agencies reviewing client pages benefit from showing clients a visual representation of what shared links will look like, which is more intuitive than showing raw HTML meta tags.

Frequently Asked Questions about Open Graph Debugger

1200×630 pixels is the recommended size and works well for Facebook, LinkedIn, and Twitter's summary_large_image card type. The aspect ratio is 1.91:1. The minimum Facebook accepts is 200×200 pixels, but images below 600px wide display as small thumbnails rather than the full-width card preview. For the best appearance across all platforms, use 1200×630 with a JPG or PNG at less than 8MB. Images that are too tall (portrait orientation) will be center-cropped to fit the 1.91:1 card ratio.

For og:title, keep it under 60 characters to avoid truncation on any platform — Facebook truncates around 65, Twitter around 70, LinkedIn around 60. For og:description, aim for under 120 characters for the most reliable display across all four platforms — Facebook allows up to ~155, but LinkedIn and WhatsApp truncate much earlier. The simulator shows exactly where truncation happens for the current values you've entered, which is more useful than memorizing character limits.

The preview panel loads the image directly in your browser from the URL you provide. If the image doesn't appear, the most common causes are: the URL uses http:// on an https:// page (mixed content blocks the load), the URL is a localhost or private network address that isn't accessible publicly, the image server has CORS restrictions that block cross-origin image loads, or the image URL is incorrect. Try opening the image URL directly in a new browser tab to confirm it loads. In the actual platform previews, the platforms fetch the image from their own servers, so CORS isn't an issue — but a localhost URL will still fail.

Yes. Scroll down below the platform previews to see the Generated Meta Tags output — a complete set of HTML meta tags based on the values you entered. Copy this and paste it into your page's <head> section. For generating OG tags when you don't need to preview them, the Open Graph Generator tool is more focused on the tag generation workflow.

Social platforms cache OG tag data and may continue showing an old preview for hours or days after you update the tags. To force a refresh: Facebook has a Sharing Debugger tool where you can enter your URL and click "Scrape Again" to invalidate the cache. LinkedIn has a Post Inspector. Twitter's cache typically refreshes within a few hours without manual action. WhatsApp doesn't have an official cache invalidation tool — the preview will update the next time someone shares the link after the cache expires.

Yes, completely free. No account, no sign-up, and no usage limits. The simulator runs entirely in your browser using JavaScript — preview updates are instant and no data is sent to any server.