Social & Meta Tags Guide
6 min read
Updated August 2026

The Ultimate Guide to Open Graph Cards

Design high-converting 1200×630 preview cards, configure social meta tags, and debug link scraping across Twitter (X), LinkedIn, and messaging apps.

Create an OG Card
Imagerry mascot presenting a large social link-preview card connected to two smaller preview cards

[!TIP] Open Graph Best Practices Summary:

  • Standard Dimensions: 1200 × 630 px (Aspect Ratio: 1.91:1).
  • Inner Safe Zone: Keep titles and logos inside the center 1000 × 500 px.
  • Payload Target: Keep image weight under 1 MB (WebP or compressed JPEG) for instant bot fetching.
  • Absolute Paths: Always specify https://yourdomain.com/og.jpg rather than relative /og.jpg.
  • Twitter/X Tag: Include <meta name="twitter:card" content="summary_large_image"> to trigger large previews.

When your links are shared across Twitter (X), LinkedIn, Facebook, Slack, Discord, or iMessage, the platform’s bot crawls your page to render a rich social preview card.

Links with engaging, high-contrast visual cards achieve up to 300% higher click-through rates (CTR) than plain text links or links with missing thumbnails.

1. The 1200 × 630 Standard & The Safe Zone

While platforms historically supported various thumbnail sizes, 1200 × 630 pixels has become the undisputed standard for modern social cards.

┌────────────────────────────────────────────────────────────┐
│ 1200 × 630 px Canvas (1.91:1 Aspect Ratio)                 │
│                                                            │
│    ┌ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ┐     │
│    │ 1000 × 500 px Inner Safe Zone                   │     │
│    │                                                 │     │
│    │      ★ Bold Headline (60-80px Bold)             │     │
│    │      ★ Subtitle & Value Proposition             │     │
│    │      ★ Brand Logo & Author Emblem               │     │
│    │                                                 │     │
│    └ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ┘     │
│                                                            │
│ * Keep outer 100px margins clear for mobile card radii     │
└────────────────────────────────────────────────────────────┘

Why the Safe Zone Matters

Mobile applications (such as WhatsApp bubbles, Telegram cards, and Twitter mobile feeds) render social cards inside rounded containers with overlay badges. Placing critical text or branding along the extreme outer 100 pixels risks awkward clipping.

2. Complete HTML <head> Meta Tag Boilerplate

To ensure flawless link previews across all major networks, place this unified block inside your <head> tags:

<!-- 1. Primary Page Metadata -->
<title>Article or Page Title | Your Brand</title>
<meta name="description" content="A compelling 1-2 sentence description explaining the key value of the page.">

<!-- 2. Open Graph Protocol (Facebook, LinkedIn, Discord, Slack, iMessage) -->
<meta property="og:type" content="article">
<meta property="og:url" content="https://yourdomain.com/guides/your-guide-slug/">
<meta property="og:title" content="Article or Page Title | Your Brand">
<meta property="og:description" content="A compelling 1-2 sentence description explaining the key value of the page.">
<meta property="og:image" content="https://yourdomain.com/assets/og/your-guide-slug.webp">
<meta property="og:image:width" content="1200">
<meta property="og:image:height" content="630">
<meta property="og:image:alt" content="Preview of Article Title illustrating key points">

<!-- 3. Twitter / X Cards -->
<meta name="twitter:card" content="summary_large_image">
<meta name="twitter:site" content="@yourhandle">
<meta name="twitter:title" content="Article or Page Title | Your Brand">
<meta name="twitter:description" content="A compelling 1-2 sentence description explaining the key value of the page.">
<meta name="twitter:image" content="https://yourdomain.com/assets/og/your-guide-slug.webp">

3. Visual Design Rules for Maximum Click-Through

Social feeds are fast-moving environments. An effective OG card must communicate the article’s core value proposition in under half a second:

  1. High Typography Contrast: Use bold, heavy sans-serif fonts (Inter, Montserrat, Plus Jakarta Sans) sized between 56px and 72px.
  2. Dark or Vibrant Solid Backdrops: Dark backdrops (#09090b with cyan, purple, or emerald glows) stand out sharply against both light-mode and dark-mode feed interfaces.
  3. Avoid Cluttered Screenshots: A miniaturized screenshot of a complex UI is unreadable on mobile feeds. Use an illustrative icon, punchy headline, and clean badge instead.
  4. Branded Visual Anchor: Position your brand logo consistently in the top-left or bottom-left corner to build immediate recognition.

4. Platform Cache Invalidation & Debugging Tools

When you publish a new OG card design, social networks will often continue displaying the old cached version. Use these official debugging tools to purge caches:

PlatformOfficial Cache Purge Tool
LinkedInLinkedIn Post Inspector
Facebook & MessengerMeta Sharing Debugger
X / TwitterSend a test tweet in a DM or append a cache query param (?v=2)
Discord & SlackAppend a query parameter to your shared URL (e.g. https://yourdomain.com/post?refresh=1)

5. Generate Professional OG Cards in Seconds

Stop designing cards from scratch in heavy graphic editors for every new blog post or release note.

The Imagerry Open Graph Studio allows you to:

  • Select curated developer and design templates.
  • Customize headlines, tags, gradients, and brand logos in real time.
  • Export pixel-perfect 1200 × 630 px assets in WebP or PNG format.
  • Runs entirely in your browser with zero data retention and instant export.
Local & Private

Try it in your browser

Imagerry runs 100% locally on your device using Canvas and WebAssembly. No server uploads. No accounts required.

Create an OG Card
Common Questions

Frequently Asked Questions

Q.What is the standard dimension for an Open Graph image?

The universal standard is 1200 × 630 pixels (a 1.91:1 aspect ratio). This triggers the full-width, large-format card preview across X, LinkedIn, Facebook, Slack, and Discord.

Q.Why do I need to use absolute URLs for og:image?

Social platform crawler bots (such as FacebookExternalHit or Twitterbot) do not evaluate relative paths. An absolute URL starting with https:// ensures bots can fetch and render your preview card.

Q.Why does my updated social preview still show old images?

Platforms cache scraped metadata aggressively for performance. When you change your preview card, use debugging tools like LinkedIn Post Inspector or Meta Sharing Debugger to force a cache purge.

Q.What is the safe zone for an Open Graph card?

Keep all critical text, titles, and logos within the central 1000 × 500 pixel area. Mobile apps and chat bubbles often apply rounded corners or subtle crops that can clip elements near the edges.

Found an error or have feedback? Email us at support@imagerry.com