Open Graph & Social Card Debugger

Extract OG tags, Twitter Cards, and meta tags from HTML — preview social sharing cards

Social media apps displayed on a smartphone screen

Photo by Alexander Shatov on Unsplash

TB
Written by Thibault Besson-Magdelain
Published June 15, 2025 · Updated February 10, 2026 · 8 min read

The Open Graph Protocol

The Open Graph protocol was introduced by Facebook in 2010 at their f8 developer conference to enable any web page to become a rich object in a social graph. Before Open Graph, sharing a URL on Facebook produced inconsistent results: sometimes the platform would pull the right image and description, but often it would select irrelevant text or show no preview at all. Open Graph tags gave web developers explicit control over the social sharing experience.

The protocol works through HTML meta tags placed in the <head> section of a page. The four required tags are og:title (the title as it should appear in the social card), og:type (the type of content, typically "website" or "article"), og:image (the URL of the preview image), and og:url (the canonical URL of the content). Additional commonly used tags include og:description, og:site_name, og:locale, and media-specific tags like og:video and og:audio.

Open Graph rapidly became the de facto standard for social sharing metadata. LinkedIn adopted it fully, Slack reads OG tags for link unfurling, and even messaging platforms like WhatsApp and Telegram use Open Graph tags to generate link previews. This widespread adoption means that properly configuring OG tags on your pages has an outsized impact on how your content appears across the entire social and messaging ecosystem. You can find more related tools in our link and URL tools collection.

Twitter Cards and X Integration

Twitter introduced its own Card markup in 2012, providing Twitter-specific metadata tags that control how links appear in tweets. The Twitter Card system supports four card types: summary (small square image with title and description), summary_large_image (wide image banner above the title), player (inline video or audio), and app (mobile application install card).

Twitter Card tags use the twitter: prefix, such as twitter:card, twitter:title, twitter:description, and twitter:image. When Twitter-specific tags are not present, the platform falls back to reading Open Graph tags. This fallback behavior means you can achieve reasonable Twitter previews with OG tags alone, but Twitter-specific tags give you precise control over the Twitter/X experience.

The most important Twitter Card tag is twitter:card, which specifies the card type. For most content pages, summary_large_image is the preferred choice because it displays a prominent image that captures attention in the Twitter timeline. The twitter:site tag identifies your organization's Twitter handle, and twitter:creator identifies the content author's handle.

How Platforms Scrape Your Content

When a URL is shared on a social platform, the platform's server-side crawler fetches the page and extracts metadata to generate the preview card. Each platform has its own crawler with different behaviors:

  • Facebook (facebookexternalhit): Caches previews aggressively, typically for 24 hours or more. Supports OG tags comprehensively. Use the Facebook Sharing Debugger tool to force a cache refresh after updating tags.
  • Twitter (Twitterbot): Uses its own cache that can persist for up to 7 days. Prefers Twitter Card tags but falls back to OG tags. The Twitter Card Validator allows you to preview and refresh cached cards.
  • LinkedIn (LinkedInBot): Reads OG tags and caches results for approximately 7 days. LinkedIn's Post Inspector tool forces a re-scrape. LinkedIn is particularly strict about og:image requirements.
  • Slack (Slackbot-LinkExpanding): Reads OG tags for link unfurling in channels and messages. Slack caches are shorter-lived (around 30 minutes) and generally update faster than other platforms.

og:image Best Practices

The og:image tag is arguably the most impactful Open Graph property because visual content drives significantly higher engagement rates on social platforms. Posts with images receive substantially more interactions than text-only posts, making image optimization critical for social sharing performance.

Key recommendations for og:image include using dimensions of 1200 by 630 pixels, which works well across Facebook, Twitter, LinkedIn, and Slack. The image should be under 8MB in file size (Facebook's limit), in JPEG, PNG, or WebP format. Always use an absolute URL with HTTPS. Position important content (text, logos, faces) in the center of the image, as different platforms may crop the edges. Avoid text-heavy images, as small text becomes illegible on mobile devices.

For pages without a specific featured image, create a branded default image template that includes your site name and a generic description. This ensures that even pages shared without custom images still present a professional, branded appearance in social feeds.

Character Limits by Platform

Each social platform imposes different character limits on the displayed title and description, making it important to front-load the most important information:

  • Facebook: Title displays up to approximately 60-88 characters depending on the device. Description displays up to 200 characters before truncation.
  • Twitter/X: Title displays up to 70 characters. Description displays up to 200 characters for summary_large_image cards.
  • LinkedIn: Title displays up to 120 characters. Description displays up to 150 characters.
  • Slack: Title displays fully in most cases. Description is truncated at approximately 300 characters.

Debugging and Cache Clearing

The most common frustration with social cards is cached previews showing outdated content. After updating your OG tags, each platform requires a separate cache-clearing action. Facebook provides the Sharing Debugger at developers.facebook.com/tools/debug, where you can enter your URL and click "Scrape Again" to refresh the cache. Twitter's Card Validator at cards-dev.twitter.com/validator previews and refreshes card data. LinkedIn's Post Inspector at linkedin.com/post-inspector serves the same purpose.

When debugging, always verify that your OG tags are present in the actual HTML source that servers deliver to crawlers. Single-page applications (SPAs) that render OG tags via client-side JavaScript will not work because social platform crawlers do not execute JavaScript. Tags must be present in the server-rendered HTML response. Additionally, ensure your server does not block social platform crawlers through robots.txt or rate limiting.

Frequently Asked Questions

What are Open Graph tags?
Open Graph tags are HTML meta tags that control how web content appears when shared on social media platforms. Originally developed by Facebook in 2010, the Open Graph protocol defines properties like og:title, og:description, og:image, and og:url that platforms use to generate rich link previews. These tags are now used across Facebook, LinkedIn, Slack, WhatsApp, and many other platforms.
What is the difference between OG tags and Twitter Card tags?
Open Graph tags use the og: prefix and were developed by Facebook for universal social sharing. Twitter Card tags use the twitter: prefix and are specific to Twitter/X. When Twitter Card tags are present, they take precedence on Twitter. When they are absent, Twitter falls back to reading Open Graph tags. Most sites implement both for maximum control.
What is the recommended og:image size?
Facebook recommends 1200x630 pixels for og:image. Twitter recommends 1200x628 pixels for summary_large_image cards. LinkedIn works best with 1200x627 pixels. Using 1200x630 pixels as a standard size works well across all major platforms. The image should be under 8MB and use JPEG, PNG, or WebP format.
Why is my social card preview not updating?
Social platforms cache link previews aggressively, sometimes for days. After updating OG tags, use each platform's debugging tool to force a re-scrape: Facebook Sharing Debugger, Twitter Card Validator, or LinkedIn Post Inspector. This tool analyzes raw HTML directly without any caching, so it always shows the current state of your tags.
Do I need both OG tags and Twitter Card tags?
You only strictly need OG tags since Twitter falls back to them automatically. However, implementing both gives you platform-specific control. For example, you might want a shorter title optimized for Twitter's display limits, or use summary_large_image on Twitter while relying on OG defaults for other platforms. Best practice is to include both.