Open Graph Tags — Complete Reference + How to Test URL Unfurl
Open Graph tags are the HTML meta tags that control how your page looks when it's shared on social media, chat apps, and messaging platforms. They tell Facebook, LinkedIn, Slack, Discord, iMessage, and every other link-sharing surface what title, description, and image to show in the preview card.
Miss them — or get them wrong — and the platform guesses. The guess is almost always worse than what you'd have shipped.
This page is the complete reference: every Open Graph tag, the rules for each one, the image spec that keeps your preview card from getting downgraded, the common mistakes we see over and over in real-world audits, and a step-by-step on how to test URL unfurl results before you hit publish.
→ Check your Open Graph tags now on 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 it's shared — the title, description, image, canonical URL, and content type. Those values drive the URL unfurl preview card that every platform renders.
Today OG is the universal standard for link previews. Nearly every major platform reads Open Graph tags: Facebook, LinkedIn, Slack, Discord, WhatsApp, iMessage, Microsoft Teams, Telegram, Pinterest, and more. Twitter/X reads its own Twitter Card tags first but falls back to OG when those aren't set.
OG tags live in the <head> section of your HTML. They're 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:image:type |
MIME type | "image/png" |
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" |
og:locale:alternate |
Other supported locales | "fr_FR" |
og:determiner |
Word before the title ("a", "the", etc.) |
"the" |
og:video |
Video URL for video content | "https://example.com/movie.mp4" |
og:video:width |
Video width | "1280" |
og:video:height |
Video height | "720" |
og:audio |
Audio URL for audio content | "https://example.com/track.mp3" |
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 — or a downgraded tiny thumbnail instead of the big rich card.
| 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. See our Open Graph image size guide for platform-by-platform sizing.
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 |
video.other |
Other video content |
music.song |
Individual music tracks |
music.album |
Music albums |
book |
Books (supports ISBN) |
profile |
Person profile pages |
product |
E-commerce product pages |
When in doubt, use website.
Advanced Open Graph Tags
Beyond the core set, Open Graph defines optional vertical-specific tags that unlock richer previews on platforms that support them:
Article-specific tags
<meta property="article:published_time" content="2026-01-15T12:00:00Z">
<meta property="article:modified_time" content="2026-04-14T09:00:00Z">
<meta property="article:author" content="Jane Doe">
<meta property="article:section" content="Engineering">
<meta property="article:tag" content="URL unfurl">
Product-specific tags
<meta property="product:price:amount" content="29.99">
<meta property="product:price:currency" content="USD">
<meta property="product:availability" content="in stock">
Profile-specific tags
<meta property="profile:first_name" content="Jane">
<meta property="profile:last_name" content="Doe">
<meta property="profile:username" content="janedoe">
Most platforms won't render every advanced tag, but setting them costs nothing and helps the ones that do.
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 |
| Microsoft Teams | Yes | OG only |
| Telegram | Yes | OG only |
| Twitter / X | Secondary | Prefers twitter:* tags; falls back to OG |
| Google Search | No | Uses <title> and meta description |
How to Test URL Unfurl Results
Writing the tags is half the job. The other half is confirming they actually render the card you expected — on every platform your team ships links to.
Step-by-step: how to test URL unfurl
- Paste the URL into a live-fetch link preview checker. TryUnfurl fetches the page fresh (no cache) and renders the preview card for Twitter/X, Facebook, LinkedIn, Slack, Discord, and iMessage side by side.
- Scan the detected Open Graph tags. Confirm every
og:*tag is present, correctly spelled (property=, notname=), and populated with a non-empty value. - Open the
og:imageURL directly. Paste it into an incognito window — it must load without auth and return the correct image. - Check each rendered card. LinkedIn shows a downgraded small card if your image is under 1200×627px. iMessage crops more aggressively than Facebook. Catch those differences before your campaign launches.
- Force the platform cache to clear. Run your URL through the Facebook Sharing Debugger, X Card Validator, and LinkedIn Post Inspector. Each forces a re-scrape with your updated tags.
- Sanity-check in-app. Paste the link into a draft post or a private Slack channel to confirm the real card matches the tester.
For bulk testing — a content migration, a campaign, a monthly audit of evergreen pages — use the bulk URL unfurl checker to run up to 100 URLs in one pass.
URL Unfurl Best Practices
Once your tags are valid, these are the decisions that make a URL unfurl card actually earn the click:
- Treat
og:titleas ad copy, not SEO copy. Write for the click, not the ranking. - Design the
og:imagefor the thumbnail. 1200×630px gets cropped on mobile; keep the brand and value prop in the center. - Set a site-wide default
og:image. No page should ever launch without one. - Keep
og:titleand<title>close in intent — they don't have to match, but they shouldn't contradict. - Use
og:typecorrectly.articlefor blog posts,productfor commerce,websiteas the default. - Add
og:site_name. Consistent byline across every card. - Serve OG images with long cache headers and HTTPS. Crawlers re-fetch often.
- Server-render critical tags. If your site uses a JavaScript framework, make sure OG tags are in the initial HTML — platform crawlers don't run JS.
- Audit monthly. Regressions happen. The bulk URL unfurl checker catches them before users do.
Common URL Unfurl Problems and Solutions
The same failures come up again and again in real-world Open Graph audits:
- Missing
og:image— the single biggest cause of a blank preview card. - Relative image URLs (e.g.,
/images/hero.jpg) — crawlers don't guess. Use absolute HTTPS URLs. - Image too small — LinkedIn and Facebook downgrade anything under 1200×630px to a tiny thumbnail.
- JavaScript-injected tags — crawlers don't execute JS. Tags must live in the initial server-rendered HTML.
og:imagereturns 403/404 — the URL resolves in your browser but not from the crawler. Check auth and firewall rules.- Duplicate OG tags — a theme sets
og:title, a plugin sets it again with a different value. Check the rendered HTML, not the template. - Stale cached preview on Facebook/LinkedIn — the tags are fixed but the old card is still showing. Force a re-scrape in each platform's debugger.
- Tag typos —
property="og:image"is correct;name="og:image"is silently ignored by most crawlers.
Deeper troubleshooting lives in the link preview troubleshooting guide and why link previews break.
Frequently Asked Questions
What is an Open Graph tag?
An Open Graph tag is an HTML <meta> tag with a property="og:*" attribute that tells social and messaging platforms how to render a link preview card when someone shares your URL. The core set is og:title, og:description, og:image, and og:url.
Which Open Graph tags are required?
At minimum, every page should set og:title, og:description, og:image, and og:url. Adding og:type and og:site_name is strongly recommended.
How do I test URL unfurl previews across platforms?
Paste your URL into TryUnfurl. It fetches the page live and renders the preview card for Facebook, LinkedIn, Twitter/X, Slack, Discord, and iMessage in one view — plus a full breakdown of every detected Open Graph tag.
What size should my og:image be?
1200×630px at a 1.91:1 aspect ratio is the universal safe size. It renders full-bleed on Facebook, LinkedIn, Slack, Discord, and iMessage. Smaller images get downgraded to a tiny thumbnail on LinkedIn and Facebook. See the Open Graph image size guide for per-platform specs.
Why isn't my og:image showing on Facebook?
Four common causes: the image URL is relative, the file is smaller than 600×315px, the URL returns 403/404 for the crawler (check auth/firewall), or Facebook has cached an older version without the image — run the URL through the Sharing Debugger to force a re-scrape.
Do I need both Open Graph tags and Twitter Cards?
Twitter/X falls back to Open Graph when Twitter Card tags are missing, so strictly speaking you can get away with OG only. For a polished X card — especially summary_large_image — set both.
Will Open Graph tags help my SEO?
Not directly. Google doesn't use OG tags for ranking. But OG tags drive click-through rate from social shares, and higher CTR and more backlinks are strong indirect SEO signals.
Can I use the same og:image for every page?
You can — and many sites do, as a fallback. But unique per-page OG images dramatically outperform generic ones on shares. Set a site-wide default, then override it for hero pages.
How do I fix a stuck Open Graph preview on Facebook or LinkedIn?
Run the URL through each platform's official debugger (Facebook Sharing Debugger, LinkedIn Post Inspector) and click the re-scrape button. That forces the platform to re-fetch your page with the updated tags. See how to refresh a link preview for the full workflow.
Test Your Open Graph Tags
Ready to see how your tags actually render? Paste any URL into TryUnfurl for an instant URL unfurl test across every major platform — free, no login.
→ Test your Open Graph tags now · → Bulk-check up to 100 URLs