FastTool All tools

BLOG

Open Graph and Twitter Cards: The Social Media Preview Guide

April 13, 2026 · 12 min read

You spend two weeks writing a blog post. You share it on LinkedIn. The preview shows your site's favicon stretched to a blurry 1200x630 rectangle, the title is truncated mid-word, and the description pulls random text from your navigation menu. Three people see it. Nobody clicks. The post dies.

Social media previews are the first impression your content makes outside of search results. When someone shares a link on Facebook, LinkedIn, X (Twitter), Slack, Discord, or iMessage, the platform fetches your page's meta tags and builds a preview card. If those tags are missing or misconfigured, the platform guesses—and it guesses badly. Getting Open Graph and Twitter Card tags right is the difference between a link that looks professional and one that looks broken.

How Social Previews Work

When you paste a URL into a social media post, the platform sends a crawler (similar to a search engine bot) to fetch your page's HTML. It looks for specific meta tags in the <head> section. If it finds them, it builds a rich preview with your image, title, and description. If it doesn't, it scrapes whatever it can find—usually the first image on the page and the first chunk of body text, which is almost never what you'd want to show.

Two standards control this behavior:

  • Open Graph Protocol (OGP): Created by Facebook in 2010. Used by Facebook, LinkedIn, Pinterest, Slack, Discord, WhatsApp, Telegram, and most other platforms.
  • Twitter Cards: Created by Twitter (now X). Used by X and a few other platforms. Twitter also falls back to OG tags if Twitter Card tags are missing.

The good news: because Twitter/X reads OG tags as fallback, you can get 90% coverage with just Open Graph tags. Adding the Twitter-specific tags gives you full control over how your content appears on X.

The Essential Open Graph Tags

Four OG tags are required for a valid Open Graph object. Without these, platforms either won't generate a preview or will generate a broken one:

<meta property="og:title" content="Your Page Title Here" />
<meta property="og:description" content="A compelling summary of your page content." />
<meta property="og:image" content="https://example.com/image.jpg" />
<meta property="og:url" content="https://example.com/page" />

Additional recommended tags:

<meta property="og:type" content="article" />
<meta property="og:image:width" content="1200" />
<meta property="og:image:height" content="630" />
<meta property="og:site_name" content="Your Site Name" />
<meta property="og:locale" content="en_US" />

Important technical detail: OG tags use property as the attribute name, not name. This is because Open Graph is based on RDFa, not standard HTML meta tags. Writing name="og:title" instead of property="og:title" will cause some platforms to ignore the tag entirely.

An Open Graph preview tool shows you exactly how your page will appear on Facebook, LinkedIn, and other platforms. Paste your URL or your meta tags, and it renders the preview card. This catches issues before you share the link publicly—far better than discovering a broken preview after 500 people have already seen it.

Twitter Card Tags

Twitter/X supports four card types, but in practice you'll use two:

  • summary: A small square image with title and description beside it. Good for articles, pages, and general content.
  • summary_large_image: A large rectangular image above the title and description. Better for visual content, blog posts, and landing pages. This is what most websites use.
<meta name="twitter:card" content="summary_large_image" />
<meta name="twitter:title" content="Your Page Title" />
<meta name="twitter:description" content="A compelling summary." />
<meta name="twitter:image" content="https://example.com/image.jpg" />

Note that Twitter Card tags use name as the attribute, not property. This is the opposite of Open Graph. Mix them up and tags get ignored.

If you only provide OG tags and no Twitter Card tags, X/Twitter will fall back to OG values for title, description, and image. But it won't know which card type to use, so it defaults to summary (the small square image). To get the large image layout, you must include <meta name="twitter:card" content="summary_large_image">.

A Twitter Card preview tool renders both card types so you can see exactly what your post will look like on X before publishing.

The Image: Where Most People Get It Wrong

The social share image is the most visible part of the preview and the most common point of failure. Here are the specifications that matter:

Spec Recommended Minimum
Dimensions 1200 x 630 pixels 600 x 315 pixels
Aspect ratio 1.91:1 1.91:1
File size Under 1 MB Under 5 MB (platform limit)
Format JPG or PNG JPG, PNG, GIF, WebP
URL Absolute HTTPS Absolute (HTTP or HTTPS)

The 1200x630 dimension at 1.91:1 ratio is the universal sweet spot. It works on Facebook, LinkedIn, X/Twitter (large image), Slack, and Discord. Create one image at this size and it'll look correct everywhere.

Common image mistakes:

  • Relative URLs. og:image must be an absolute URL (https://example.com/image.jpg). Relative paths like /images/og.jpg won't resolve when crawled by external platforms.
  • Wrong aspect ratio. A square image in a 1.91:1 frame gets cropped or letterboxed, cutting off important content. Always design for the target aspect ratio.
  • Text too close to edges. Some platforms crop the image slightly differently. Keep important text and logos at least 80px from all edges.
  • Too small. Images under 200x200 pixels won't generate a preview on Facebook. LinkedIn requires at least 200x200. Anything under 600px wide will look blurry on retina displays.
  • SVG images. Most social platforms don't render SVG for preview images. Use JPG or PNG.

Schema Markup: The Third Layer

While Open Graph controls social media previews, schema.org structured data (JSON-LD) controls how Google and other search engines display your content in rich results. They're different systems that serve different purposes but often contain overlapping information.

For articles, the key schema type is Article:

<script type="application/ld+json">{
  "@context": "https://schema.org",
  "@type": "Article",
  "headline": "Your Article Title",
  "description": "Your article summary",
  "image": "https://example.com/image.jpg",
  "datePublished": "2026-04-13",
  "author": {
    "@type": "Organization",
    "name": "Your Site"
  }
}</script>

A schema markup generator builds this JSON-LD for you. Select the content type (Article, Product, FAQ, Recipe, etc.), fill in the fields, and copy the generated script tag. This is especially important for Google Discover eligibility—articles with proper schema markup and a 1200px+ image are more likely to appear in Discover feeds.

Meta Tag Generator: Building Everything at Once

Manually writing Open Graph tags, Twitter Card tags, and schema markup for every page is tedious and error-prone. A meta tag generator produces all of them from a single form. Enter your title, description, URL, and image URL, and it outputs the complete set of meta tags ready to paste into your HTML <head>.

The generator handles the subtle details that trip people up:

  • Correct attribute names (property for OG, name for Twitter)
  • Character limits (title under 70 characters, description under 200 characters)
  • Image dimension tags (og:image:width and og:image:height)
  • Canonical URL format
  • Locale specification

Debugging Social Previews

Social platforms cache your meta tags aggressively. If you fix a broken image or typo, the old preview might persist for hours or days. Each platform has a way to force a refresh:

  • Facebook: Use the Sharing Debugger (developers.facebook.com/tools/debug). Paste your URL and click "Scrape Again" to force a re-fetch.
  • X/Twitter: The Card Validator was deprecated in 2022, but you can force a refresh by posting the link in a tweet (or using Twitter's API to invalidate the cache).
  • LinkedIn: Use the Post Inspector (linkedin.com/post-inspector). Paste your URL and it shows the current cached preview with an option to refresh.
  • Slack: Post the link in a channel. If the preview is wrong, delete it and post again—Slack re-fetches on each new post.

The fastest debugging workflow: check your tags with an OG preview tool before deploying. Fix issues locally. Deploy. Then flush the cache on each platform you're sharing to. This avoids the situation where you share a link, notice the preview is broken, fix it, but the cached broken version keeps appearing to everyone.

Platform-Specific Quirks

Despite the standards, each platform interprets meta tags slightly differently:

Platform Quirk to Know
Facebook Caches previews for up to 30 days. Requires manual cache purge for updates.
LinkedIn Truncates titles at 70 characters. Descriptions at 100 characters in feed.
X/Twitter Falls back to OG tags if Twitter Card tags missing. Requires twitter:card for large image.
Slack Reads both OG and Twitter tags. Renders large image only if image is 800px+ wide.
Discord Uses OG tags. Supports og:video for inline video playback in chat.
WhatsApp Caches aggressively. Smaller image display than other platforms; keep text large.
iMessage Uses OG tags. Preview quality depends on Apple's link preview service cache.

A Complete Meta Tag Template

Here's a copy-paste template with every tag you need. Replace the placeholder values:

<!-- Primary Meta Tags -->
<title>Page Title | Site Name</title>
<meta name="description" content="Page description under 160 chars" />

<!-- Open Graph / Facebook -->
<meta property="og:type" content="article" />
<meta property="og:url" content="https://example.com/page" />
<meta property="og:title" content="Page Title | Site Name" />
<meta property="og:description" content="Page description" />
<meta property="og:image" content="https://example.com/og-image.jpg" />
<meta property="og:image:width" content="1200" />
<meta property="og:image:height" content="630" />

<!-- Twitter -->
<meta name="twitter:card" content="summary_large_image" />
<meta name="twitter:url" content="https://example.com/page" />
<meta name="twitter:title" content="Page Title" />
<meta name="twitter:description" content="Page description" />
<meta name="twitter:image" content="https://example.com/og-image.jpg" />

The time investment is maybe 10 minutes per page—or 30 seconds with a meta tag generator. The payoff is every link shared from your site looking polished instead of broken. That's a conversion rate improvement you get for free, on every share, forever.