Every time you paste a URL into Slack, Twitter, LinkedIn, or iMessage, those apps fetch metadata from the page and display a rich preview card: title, image, description. That preview is controlled entirely by Open Graph meta tags — a set of HTML <meta> tags that almost every developer adds incorrectly or forgets entirely.
This guide covers what they are, which ones actually matter, and how to add them properly.
What are Open Graph Tags?
Open Graph was created by Facebook in 2010 and is now a web standard. They live in the <head> of your HTML document:
<meta property="og:title" content="Your Page Title" />
<meta property="og:description" content="A short description of the page." />
<meta property="og:image" content="https://example.com/images/og-image.jpg" />
<meta property="og:url" content="https://example.com/your-page/" />
<meta property="og:type" content="website" />
<meta property="og:site_name" content="Your Site Name" />
When a social platform or messaging app fetches your URL, it reads these tags to build the preview card. Without them, it guesses — usually badly.
The Tags That Actually Matter
og:title
The title displayed in the link preview. It doesn't have to match the page's <title> tag — often a slightly shorter, punchier version works better for social sharing.
Recommended length: 60–70 characters.
og:description
The description shown below the title in the preview card. This is your one sentence to make someone decide whether to click.
Recommended length: 120–155 characters. Don't repeat the title.
og:image
The image shown in the preview card. This has the biggest impact on click-through rate.
Requirements:
- Minimum size: 1200×630 pixels (Facebook recommends this for best display across all placements)
- Format: JPG or PNG (WebP has inconsistent support)
- File size: under 1 MB
- Must be an absolute URL (not a relative path)
If you leave this out, platforms will either show nothing or try to grab any image from the page — usually your logo thumbnail or an ad.
og:url
The canonical URL of the page. This prevents duplicate sharing counts when the same content is accessible at multiple URLs (with/without trailing slash, http vs https, etc.).
og:type
Use website for most pages. Use article for blog posts, and then add article-specific tags:
<meta property="og:type" content="article" />
<meta property="article:author" content="https://yoursite.com/about/" />
<meta property="article:published_time" content="2024-05-31T10:00:00Z" />
Twitter Card Tags
Twitter/X uses its own tag format. You need these in addition to OG tags:
<meta name="twitter:card" content="summary_large_image" />
<meta name="twitter:title" content="Your Page Title" />
<meta name="twitter:description" content="Your description." />
<meta name="twitter:image" content="https://example.com/images/og-image.jpg" />
summary_large_image gives you the full-width image preview. summary gives the small thumbnail on the left. For any content with a compelling image, use summary_large_image.
Twitter also accepts the og: versions if twitter: tags are missing, but explicit twitter: tags give you more control.
A Complete Template
Here's the full set to add to every page:
<!-- Open Graph -->
<meta property="og:title" content="Page Title — Site Name" />
<meta property="og:description" content="One sentence describing what's on this page." />
<meta property="og:image" content="https://example.com/og-image.jpg" />
<meta property="og:url" content="https://example.com/this-page/" />
<meta property="og:type" content="website" />
<meta property="og:site_name" content="Site Name" />
<!-- Twitter Card -->
<meta name="twitter:card" content="summary_large_image" />
<meta name="twitter:title" content="Page Title — Site Name" />
<meta name="twitter:description" content="One sentence describing what's on this page." />
<meta name="twitter:image" content="https://example.com/og-image.jpg" />
<!-- Standard meta (still matters for search engines) -->
<meta name="description" content="One sentence describing what's on this page." />
Common Mistakes
1. Forgetting og:image
The single most impactful tag. A link preview without an image gets dramatically fewer clicks.
2. Using a relative path for og:image
/images/og.jpg won't work — it must be a full URL including protocol and domain.
3. Using the same image for every page
This works for the homepage, but article pages should have unique images that hint at the content.
4. og:title over 70 characters
Platforms truncate longer titles, often mid-word.
5. Not validating after deploy
Social platforms cache metadata aggressively. After adding or changing OG tags, validate using Twitter's Card Validator or Facebook's Sharing Debugger to force a cache refresh.
Platform-Specific Notes
- LinkedIn: uses og:title, og:description, og:image, og:url — reads og: tags, not twitter: tags
-
Slack: uses og: tags; will fallback to
<title>if og:title is missing - iMessage / WhatsApp: use og: tags for link previews
- Discord: uses og: tags; supports og:video for embedded players
Quick Reference
| Tag | Required? | Max Length |
|---|---|---|
| og:title | Yes | 70 chars |
| og:description | Yes | 155 chars |
| og:image | Yes | — (1200×630px recommended) |
| og:url | Recommended | — |
| og:type | Recommended | — |
| og:site_name | Optional | — |
| twitter:card | Yes for Twitter | — |
For a quick way to generate and preview your OG tags as they'd appear on Twitter, Facebook, and LinkedIn, try the developer tools at SnappyTools — specifically the HTML Entity Encoder for any special characters in your titles and descriptions.
Top comments (0)