HTML Open Graph Tags: The Essential Reference (2026)
The complete reference for adding og:title, og:image, og:description, og:url, and Twitter card meta tags directly in HTML. With copy-paste examples for every platform.
What are Open Graph tags?
Open Graph (OG) tags are <meta> elements placed in the <head> of an HTML page. They tell social platforms — Twitter/X, LinkedIn, Facebook, Discord, Slack, WhatsApp — what title, description, and image to display when someone shares a link.
Without OG tags, platforms guess at your content and usually display something ugly: the raw URL, no image, and a truncated page title.
Minimal complete OG tag set
These five tags are the minimum required for a good link preview on most platforms:
<head> <meta charset="UTF-8" /> <meta name="viewport" content="width=device-width, initial-scale=1" /> <title>Your Page Title</title> <!-- Open Graph core --> <meta property="og:title" content="Your Page Title" /> <meta property="og:description" content="A concise description of this page." /> <meta property="og:image" content="https://example.com/og.jpg" /> <meta property="og:url" content="https://example.com/your-page" /> <meta property="og:type" content="website" /> <!-- Twitter / X Card --> <meta name="twitter:card" content="summary_large_image" /> <meta name="twitter:title" content="Your Page Title" /> <meta name="twitter:description" content="A concise description of this page." /> <meta name="twitter:image" content="https://example.com/og.jpg" /> </head>
Full OG tag reference
Required tags
| Tag | Purpose | Limit |
|---|---|---|
| og:title | Page title shown in card | ~60–70 chars |
| og:description | Summary shown below title | ~155 chars |
| og:image | Preview image (absolute HTTPS URL) | 1200×630 px |
| og:url | Canonical URL of the page | — |
| og:type | "website" or "article" | — |
Optional but useful
<meta property="og:site_name" content="My Site" /> <meta property="og:locale" content="en_US" /> <meta property="og:image:width" content="1200" /> <meta property="og:image:height" content="630" /> <meta property="og:image:alt" content="Description of the image" />
Article-specific tags
<meta property="og:type" content="article" /> <meta property="article:published_time" content="2026-03-15T00: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/X Card tags
Twitter reads og:* tags but has its own twitter:* namespace for overrides. Always include both:
<!-- Card type: summary_large_image shows a full-width image --> <meta name="twitter:card" content="summary_large_image" /> <meta name="twitter:site" content="@yourhandle" /> <meta name="twitter:creator" content="@authorhandle" /> <meta name="twitter:title" content="Your Page Title" /> <meta name="twitter:description" content="Description here." /> <meta name="twitter:image" content="https://example.com/og.jpg" /> <meta name="twitter:image:alt" content="Alt text for the image" />
OG image requirements by platform
| Platform | Recommended size | Max file size |
|---|---|---|
| Twitter/X | 1200×628 px | 5 MB |
| 1200×627 px | 5 MB | |
| 1200×630 px | 8 MB | |
| Discord | 1200×630 px | 8 MB |
| Slack | 1200×630 px | 2 MB |
| 400×400 px (min) | 300 KB |
Common mistakes to avoid
- Relative image URLs — always use
https:// - Tags injected by JavaScript — place them in static HTML
- Missing og:url — causes duplicate-content signals
- og:image smaller than 200×200 px — platforms ignore it
- Stale platform cache — use each platform's scraper debugger after deploy
Verify your HTML OG tags instantly → Paste your URL into OGFixer to preview your link on Twitter, LinkedIn, Discord, and Slack simultaneously.