Social Media Previews: OG & Twitter Cards

When someone shares your link on Twitter, LinkedIn, or Facebook, the platform generates a preview. That preview—the image, title, and description—determines whether people click.

Without proper meta tags, platforms guess. They might grab the wrong image, truncate your title, or show an irrelevant description. With the right tags, you control exactly what appears.

When a URL is shared, the platform’s crawler fetches the page and looks for specific meta tags:

Open Graph tags (Facebook, LinkedIn, WhatsApp, Discord)
Twitter Card tags (Twitter/X)
Fallbacks (title tag, meta description, first image)

Platforms cache previews, sometimes for days. If your preview looks wrong, you may need to force a refresh.

Open Graph Tags

Open Graph (OG) was created by Facebook but is now used widely.

Essential OG Tags

<meta property="og:title" content="Your Page Title" />
<meta property="og:description" content="Your description here. Keep it under 200 characters." />
<meta property="og:image" content="https://example.com/og-image.jpg" />
<meta property="og:url" content="https://example.com/page" />
<meta property="og:type" content="website" />

OG Image Specifications

Platform	Recommended Size	Aspect Ratio
Facebook	1200×630	1.91:1
LinkedIn	1200×627	1.91:1
WhatsApp	1200×630	1.91:1
Discord	1200×630	1.91:1

Best practice: Create images at 1200×630 pixels. This works well across all platforms.

Article-Specific Tags

For blog posts:

<meta property="og:type" content="article" />
<meta property="article:published_time" content="2026-03-10T12:00:00Z" />
<meta property="article:author" content="https://example.com/about" />
<meta property="article:section" content="Technology" />
<meta property="article:tag" content="Open Graph" />

Twitter Cards

Twitter uses its own meta tags, falling back to Open Graph if not present.

Summary Card

Standard card with small image:

<meta name="twitter:card" content="summary" />
<meta name="twitter:site" content="@yourhandle" />
<meta name="twitter:title" content="Your Page Title" />
<meta name="twitter:description" content="Your description here." />
<meta name="twitter:image" content="https://example.com/image.jpg" />

Large Image Card

Card with large, prominent image:

<meta name="twitter:card" content="summary_large_image" />
<meta name="twitter:site" content="@yourhandle" />
<meta name="twitter:title" content="Your Page Title" />
<meta name="twitter:description" content="Your description here." />
<meta name="twitter:image" content="https://example.com/large-image.jpg" />

Large image size: 1200×628 (2:1 aspect ratio preferred, but 1.91:1 also works)

Most sites should use summary_large_image—the larger preview gets more engagement.

Complete Example

A well-tagged page:

<head>
  <!-- Primary Meta Tags -->
  <title>How to Build a React App | Corco Labs</title>
  <meta
    name="description"
    content="A step-by-step guide to building your first React application."
  />

  <!-- Open Graph -->
  <meta property="og:type" content="article" />
  <meta property="og:url" content="https://corcolabs.com/blog/react-guide" />
  <meta property="og:title" content="How to Build a React App" />
  <meta
    property="og:description"
    content="A step-by-step guide to building your first React application."
  />
  <meta property="og:image" content="https://corcolabs.com/images/react-guide-og.jpg" />

  <!-- Twitter -->
  <meta name="twitter:card" content="summary_large_image" />
  <meta name="twitter:site" content="@corcolabs" />
  <meta name="twitter:title" content="How to Build a React App" />
  <meta
    name="twitter:description"
    content="A step-by-step guide to building your first React application."
  />
  <meta name="twitter:image" content="https://corcolabs.com/images/react-guide-og.jpg" />
</head>

Best Practices

Images

Size: 1200×630 for OG, 1200×628 for Twitter (or use 1200×630 for both)
File size: Under 5MB, ideally under 1MB
Format: JPG or PNG (avoid GIFs for previews)
Important content: Keep key visuals in the center (cropping varies)
Text in images: Use sparingly, ensure legibility at small sizes

Titles

Length: 60-70 characters (truncated after on most platforms)
Clarity: Should make sense without context
Engagement: Write for clicks, but don’t be clickbait

Descriptions

Length: 155-200 characters
Value proposition: Why should someone click?
Avoid: Repetition of title, vague statements

Testing Previews

Before publishing, verify how your previews will appear.

The Social Media Preview tool shows exactly how your URL appears on:

Facebook
Twitter/X
LinkedIn
WhatsApp
Discord
Google Search (SERP)

It fetches your actual meta tags and renders accurate previews. Catch problems before sharing.

Platform Debuggers

Each platform has an official debugger:

Facebook: Sharing Debugger
Twitter: Card Validator
LinkedIn: Post Inspector

These also force cache refreshes when you’ve fixed issues.

Creating OG Images

Design Tools

Figma/Canva: Create templates, export as PNG/JPG
Purpose-built tools: Generate images programmatically
Our tool: Social Media Image Generator creates images for all common social formats

Dynamic OG Images

For sites with many pages, generate images programmatically:

Include page title in image
Use consistent branding
Libraries: @vercel/og, Puppeteer, Playwright

Template Approach

Create a template with:

Brand elements (logo, colors)
Placeholder for title text
Background image or pattern

Generate per-page by filling in the title.

Common Mistakes

No OG Image

Platforms pick a random image from your page, often incorrectly.

Wrong Image Size

Non-standard sizes get cropped awkwardly.

Generic Description

“Welcome to our website” tells users nothing.

Not Testing

Assumption that it “just works”—platforms interpret tags inconsistently.

Forgetting to Update

Content changes but OG tags stay outdated.

Platform-Specific Notes

Facebook

Caches aggressively (use Sharing Debugger to clear)
Prefers 1.91:1 aspect ratio
May show image, or may show text-only preview

Twitter/X

twitter:image should be absolute URL
Images under 5MB
Alt text supported via twitter:image:alt

Uses OG tags primarily
Often slow to update cache
Preview in Post Inspector before publishing

Uses OG tags
Image preview can be finicky
Test by actually sharing (no official debugger)

Take Action

Check your current previews with Social Media Preview
Identify missing or incorrect tags
Create proper OG images (use Social Media Image Generator)
Add complete meta tags
Test on platform debuggers before sharing

For help with social media optimization or content strategy, reach out.

How Social Previews Work