You spent hours writing a great blog post or building a product page. Then someone shares the URL on Twitter, LinkedIn, or Slack — and the preview is a blank card, a wrong image, or a truncated title. Open Graph tags are what control that preview. This guide covers everything you need to get them right.

What Are Open Graph Tags?

Open Graph (OG) is a protocol created by Facebook in 2010 that lets web pages declare how they should appear when shared on social networks. You add <meta> tags to the <head> of your HTML, and when a crawler visits your page, it reads those tags to build a rich preview card.

Today, every major platform uses OG tags — Twitter/X, LinkedIn, Facebook, Discord, Slack, iMessage, WhatsApp, and more. Without them, platforms fall back to a best-guess: usually the page <title>, the first <p> of body text, and a random image.

The Four Required Tags

At minimum, every shareable page should have these four tags:

<meta property="og:title" content="Your Page Title" />
<meta property="og:description" content="A concise 1–2 sentence summary." />
<meta property="og:image" content="https://example.com/og-image.jpg" />
<meta property="og:url" content="https://example.com/your-page" />

These four cover the basics for Facebook, LinkedIn, Discord, and Slack. For Twitter/X, you also need the card type declaration.

The Complete Recommended Tag Set

<!-- Core OG tags — required by all platforms -->
<meta property="og:title" content="Your Page Title" />
<meta property="og:description" content="A 1–2 sentence 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" />
<meta property="og:url" content="https://example.com/page" />
<meta property="og:type" content="website" />
<meta property="og:site_name" content="Your Brand Name" />

<!-- Twitter/X card type — without this, Twitter may render a tiny thumbnail -->
<meta name="twitter:card" content="summary_large_image" />

<!-- Optional: Discord embed accent color -->
<meta name="theme-color" content="#7c3aed" />

Image Requirements by Platform

Getting the image right is the most common failure point. Here are the exact specs for each major platform:

—Twitter/X — summary_large_image: 1200×628px, 2:1 ratio. summary card: 400×400px, 1:1 ratio. Max 5MB.
—LinkedIn — 1200×627px, 1.91:1 ratio. Minimum 200×200px or image is hidden. Max 5MB.
—Facebook — 1200×630px, 1.91:1 ratio. Below 600×315px renders as small inline thumbnail.
—Discord — renders up to 400px wide. Animated GIFs supported and autoplay.
—Slack — thumbnail right-aligned next to text. Respects twitter:card for large images. Max 2MB on mobile.
—iMessage — rounded card, HTTPS required. Large HTML pages (>1MB) may skip preview.

TipRule of thumb: use 1200×630px JPEG or PNG at 72dpi. This single size looks good across all platforms, stays under file size limits, and matches the 1.91:1 ratio that most platforms prefer.

Platform-Specific Behaviours to Know

Twitter/X

Twitter reads twitter:* tags first, then falls back to og:* tags. The most important tag is twitter:card — without it, Twitter may use a small square thumbnail even if you have a 1200×628 image. Always set twitter:card to summary_large_image for hero-image cards.

LinkedIn ignores all twitter: tags entirely — it reads only og: tags. The LinkedIn crawler (LinkedInBot/1.0) is also aggressive about caching: once it has crawled a URL, it keeps that cached version for up to 7 days. Use LinkedIn's Post Inspector to force a re-crawl after fixing OG tags.

Discord

Discord's embed color is set by the theme-color meta tag, not an OG property. Without theme-color, Discord uses a grey strip. Setting it to your brand color makes embeds look intentional. Discord also supports og:video for inline video embeds — useful for product demos.

Slack

Slack's link unfurling can be disabled per-domain by workspace admins — so some users may never see your OG previews regardless of how correct they are. Images over 2MB may not display on mobile Slack. Slack respects twitter:card: summary_large_image for displaying large images.

Common OG Tag Mistakes

1.Missing og:image — the most common issue. Without it, most platforms show a text-only card.
2.Wrong image dimensions — an image that is too small (under 200×200) is hidden on LinkedIn. A non-2:1 image on Twitter gets cropped awkwardly.
3.HTTP image URL — Twitter and iMessage require HTTPS for images. An HTTP image URL silently fails.
4.og:url mismatch — if og:url points to a different URL than the actual page, some platforms use the og:url for deduplication, creating ghost entries.
5.Missing og:image dimensions — without width and height hints, crawlers that do lazy loading may render a wrong-size card until the image loads.
6.Description too long — LinkedIn truncates at ~300 characters, Twitter at ~200. Write descriptions that work at 150 characters.
7.Dynamic SPAs without SSR — if your page renders in JavaScript after load, most crawlers see a blank page. OG tags must be in the server-rendered HTML.

Open Graph for Article Pages

For blog posts and articles, use og:type="article" and add the article namespace tags:

<meta property="og:type" content="article" />
<meta property="article:published_time" content="2026-04-01T09:00:00Z" />
<meta property="article:author" content="https://example.com/about" />
<meta property="article:section" content="Technology" />
<meta property="article:tag" content="open graph" />
<meta property="article:tag" content="seo" />

Facebook uses these tags for news feed ranking. LinkedIn and other platforms ignore them but they add no cost to include.

Generating OG Images Automatically

Manually creating a unique 1200×630 image for every page is not realistic at scale. The modern approach is to generate OG images dynamically on the server. In Next.js, you can use the built-in opengraph-image.tsx file convention — it uses Satori to render React components to an image at build time or on the edge.

// app/blog/[slug]/opengraph-image.tsx
import { ImageResponse } from 'next/og'

export const size = { width: 1200, height: 630 }
export const contentType = 'image/png'

export default async function OGImage({ params }: { params: { slug: string } }) {
  const post = await getPost(params.slug)

  return new ImageResponse(
    <div style={{ background: '#0a0a14', width: '100%', height: '100%', display: 'flex', flexDirection: 'column', justifyContent: 'flex-end', padding: 64 }}>
      <div style={{ fontSize: 14, color: '#7c3aed', marginBottom: 16, textTransform: 'uppercase', letterSpacing: '0.1em' }}>
        OGProof Blog
      </div>
      <div style={{ fontSize: 52, fontWeight: 700, color: 'white', lineHeight: 1.2 }}>
        {post.title}
      </div>
    </div>,
    { ...size }
  )
}

Validating Your OG Tags

There are two problems with manually checking OG tags: you can only see one platform at a time, and you're never sure if the platform's crawler will see the same HTML your browser does. A proper validator fetches the URL server-side (so JavaScript-rendered content is excluded, just like the real crawlers) and shows you exactly what each platform's crawler sees.

OGProof fetches your URL from the server, parses all OG, Twitter Card, and meta tags, then renders them in six platform-accurate preview components — Twitter, LinkedIn, Facebook, Discord, Slack, and iMessage. It validates each tag against each platform's documented specs and shows you exactly what to fix.

Quick Reference Checklist

—og:title — max 60 chars for Twitter, 150 for LinkedIn
—og:description — max 150 chars (works across all platforms)
—og:image — HTTPS URL, 1200×630px, max 5MB
—og:image:width and og:image:height — always include
—og:url — exact canonical URL of the page
—og:type — "website" for most pages, "article" for posts
—og:site_name — your brand name
—twitter:card — "summary_large_image" for hero cards
—theme-color — hex color for Discord embed accent

The Complete Guide to Open Graph Tags in 2026