Every time someone shares a link on social media, the platform fetches your page and reads its Open Graph tags to build the preview card — the title, description, and image that appears in the feed. Without OG tags, platforms scrape whatever content they can find, which almost always produces an ugly, poorly cropped result. With them, you control exactly how your content looks.
Generate a complete, ready-to-paste set with the DevToolShack OG Tag Generator. This guide explains exactly what each tag does and how to write them well.
The Essential OG Tags
These five are the minimum viable set for any page:
<meta property="og:title" content="Your Page Title Here">
<meta property="og:description" content="A compelling description under 200 characters.">
<meta property="og:image" content="https://example.com/og-image.png">
<meta property="og:url" content="https://example.com/this-page">
<meta property="og:type" content="website">og:title
The headline of the share card. Can differ from your <title> tag — OG titles don't need the brand suffix since the platform shows the domain separately. Keep it under 60 characters to avoid truncation on most platforms. Write it like a headline: specific, compelling, front-loaded with the key information.
og:description
The body text of the card. Facebook shows about 200 characters, LinkedIn a little less. This is your hook — what does the reader get by clicking? Lead with the value, end with a reason to click. Avoid starting with "This article..." or "In this post..." — start with the substance.
og:image
The single most impactful OG tag. Pages with a strong image get dramatically more engagement than text-only cards. Requirements:
- Size: 1200 × 630px (1.91:1 ratio) — the universal safe zone across all platforms
- Format: PNG or JPEG; PNG preferred for text-heavy images
- File size: Under 8MB (under 1MB loads faster and avoids some platform limits)
- Must be an absolute URL — relative paths don't work for OG images
- No important content in the outer 15% — some platforms crop to a square
og:url
The canonical URL of the page — should match your canonical link tag. This is what platforms use to deduplicate and count shares. Without it, shares to /page and /page?ref=twitter are counted separately.
og:type
The content type. Use website for most pages. For blog posts and articles, use article — which unlocks additional article-specific tags. For products, use product.
Article-Specific Tags
When og:type is article, these additional tags are available:
<meta property="article:published_time" content="2025-12-22T00:00:00Z">
<meta property="article:modified_time" content="2025-12-22T00:00:00Z">
<meta property="article:author" content="https://example.com/about">
<meta property="article:section" content="Web Development">
<meta property="article:tag" content="CSS">Facebook and some RSS aggregators use the published time to sort content. The section and tags help with content categorisation in news-style platforms.
Platform-Specific Differences
| Platform | Title limit | Description limit | Image ratio |
|---|---|---|---|
| ~60 chars | ~200 chars | 1.91:1 or 1:1 | |
| ~70 chars | ~200 chars | 1.91:1 | |
| Twitter/X | ~70 chars | ~200 chars | 2:1 (summary_large_image) |
| Slack | No limit shown | ~200 chars | 1.91:1 |
| ~70 chars | ~200 chars | 1:1 cropped | |
| Discord | Full title | ~350 chars | Displayed as-is |
Twitter Card Tags
Twitter/X has its own card system that supplements OG tags. Always add these alongside OG:
<meta name="twitter:card" content="summary_large_image">
<meta name="twitter:title" content="Your Title">
<meta name="twitter:description" content="Your description">
<meta name="twitter:image" content="https://example.com/twitter-card.png">
<meta name="twitter:image:alt" content="Description of the image for screen readers">summary_large_image shows a full-width image card — far more eye-catching than the default small thumbnail. Always use this for article and product pages.
OG Image Best Practices
- Use a template system — for blogs and product pages, dynamically generate OG images with the page title overlaid on a branded template. Much better than a generic fallback image on every page.
- Use large, readable text — OG images are displayed at small sizes in feeds. Text that looks fine at 1200px can be unreadable at 400px. Aim for 60px+ headline text.
- Include your brand — logo or domain in the corner establishes trust at a glance before the user even reads the title.
- Avoid cluttered designs — one strong visual concept per image. Less is dramatically more.
- Test on mobile — most social media is consumed on phones. View your card preview on a phone screen before publishing.
<head>. Pair it with the Meta Tag Generator for the full SEO + social meta tag setup.