Open Graph Tags — Complete Reference Guide
Open Graph tags are HTML meta tags that control how your page looks when shared on social media, messaging apps, and link previews. They tell platforms like Facebook, LinkedIn, Slack, and Discord what title, description, and image to display.
Without them, platforms guess — and usually get it wrong.
-> Check your Open Graph tags now with TryUnfurl
What Are Open Graph Tags?
Open Graph (OG) is a metadata protocol created by Facebook in 2010. It lets you define exactly how a page represents itself when shared — the title, description, image, and type.
Today it's the universal standard for link previews. Nearly every major platform reads OG tags: Facebook, LinkedIn, Slack, Discord, WhatsApp, iMessage, Pinterest, and more.
OG tags live in the <head> section of your HTML and are invisible to regular visitors — but every platform crawler reads them.
Core Open Graph Tags
These four tags are required. Every public page should have all of them.
| Tag | What it does | Recommended length |
|---|---|---|
og:title |
The headline shown in the preview card | Under 60 characters |
og:description |
The summary text shown below the title | Under 155 characters |
og:image |
The preview image URL (must be absolute HTTPS) | — |
og:url |
The canonical URL of the page | — |
All Open Graph Tags
| Tag | Purpose | Example value |
|---|---|---|
og:title |
Page title for the preview | "How to Fix Broken Link Previews" |
og:description |
Short summary | "Step-by-step guide to diagnosing..." |
og:image |
Preview image (absolute HTTPS URL) | "https://example.com/og.jpg" |
og:image:width |
Image width in pixels | "1200" |
og:image:height |
Image height in pixels | "630" |
og:image:alt |
Alt text for the image | "Diagram showing link unfurling" |
og:url |
Canonical URL of the page | "https://example.com/page" |
og:type |
Content type | "website" or "article" |
og:site_name |
Name of the website | "My Company" |
og:locale |
Language/region | "en_US" |
HTML Implementation Example
Add these tags inside the <head> of every page:
<head>
<!-- Fallback for platforms that ignore OG -->
<title>Your Page Title</title>
<meta name="description" content="Your page description under 155 characters.">
<!-- Open Graph -->
<meta property="og:title" content="Your Page Title">
<meta property="og:description" content="Your page description under 155 characters.">
<meta property="og:image" content="https://yourdomain.com/og-image.jpg">
<meta property="og:image:width" content="1200">
<meta property="og:image:height" content="630">
<meta property="og:image:alt" content="Descriptive alt text for the image">
<meta property="og:url" content="https://yourdomain.com/your-page">
<meta property="og:type" content="website">
<meta property="og:site_name" content="Your Site Name">
</head>
og:image Requirements
The image is the most impactful part of a link preview. Getting it wrong means no image appears at all.
| Requirement | Value |
|---|---|
| Recommended size | 1200 × 630 px |
| Minimum size | 600 × 315 px |
| Aspect ratio | 1.91:1 |
| File format | JPG or PNG (avoid WebP — limited support) |
| Maximum file size | 8 MB |
| URL type | Absolute HTTPS — never relative |
| Accessibility | Must be publicly reachable, not blocked by robots.txt |
Always include og:image:width and og:image:height — some platforms skip the image entirely if dimensions aren't declared.
og:type Values
| Value | Use case |
|---|---|
website |
Default — homepages and marketing pages |
article |
Blog posts, news, documentation |
video.movie |
Feature films and video content |
video.episode |
TV episodes |
music.song |
Individual music tracks |
book |
Books (supports ISBN) |
profile |
Person profile pages |
When in doubt, use website.
Which Platforms Use Open Graph?
| Platform | Uses OG tags? | Notes |
|---|---|---|
| Yes — primary source | OG was invented by Facebook | |
| Yes — primary source | Ignores Twitter Card tags | |
| Slack | Yes — primary source | Falls back to HTML title/description |
| Discord | Yes — primary source | Also reads Twitter Card tags |
| Yes | OG only | |
| iMessage | Yes | OG only |
| Twitter / X | Secondary | Prefers twitter:* tags; falls back to OG |
| Google Search | No | Uses <title> and meta description |
Common Open Graph Mistakes
- Relative image URLs — always use absolute URLs starting with
https:// - Missing
og:image— the most common cause of no image in previews - Title over 60 characters — gets truncated on most platforms
- No dimensions declared — add
og:image:widthandog:image:height - JavaScript-injected tags — most crawlers don't execute JS; tags must be in the initial HTML
- Conflicting values — keep
og:titleand<title>consistent
Test Your Open Graph Tags
Paste any URL into TryUnfurl.com to instantly see how your Open Graph tags are rendering across all major platforms — and spot any missing or misconfigured values.