Open Graph Tags: The 6 You Need, the Sizes That Work, and How to Debug Previews
The protocol requires four tags and the platforms read two more. Image rules differ by app, and most broken previews turn out to be caching problems, not bad markup.
The short answer
Open Graph tags are <meta property="og:..."> tags in a page's <head> that tell Facebook, LinkedIn, WhatsApp, Slack, iMessage and most other apps which title, description and image to show when someone shares the link. Six do nearly all the work: og:title, og:description, og:image, og:url, og:type and og:site_name. Make the image 1200 × 630 px (1.91:1), a JPG or PNG under 600 KB at an absolute https:// URL, describe it with og:image:width, og:image:height and og:image:alt, and make sure the tags are in the HTML your server sends. If a preview is still wrong after that, it's almost always a cache, not your markup.
The 6 Open Graph tags and what each one does
The protocol at ogp.me strictly requires only four — og:title, og:type, og:image and og:url. In practice the platforms ask for more: LinkedIn's help center lists og:description among the tags that must exist, and WhatsApp's link-preview documentation says title, description and URL must all be in the head and not empty.
og:title
The headline of the card. Facebook, Apple and WhatsApp all say to leave branding out of it — the site name has its own tag. Google also lists og:title among the sources it uses to write title links in search results.
og:description
One or two sentences under the title. WhatsApp shows one or two lines and says 80 characters will suffice, and X's mobile apps don't display the description on large image cards at all — so put the point in the first few words.
og:image (plus width, height and alt)
The absolute URL of the preview image. Add og:image:width and og:image:height: Facebook says they let it render the image on the very first share instead of processing it in the background. ogp.me says any page with an og:image should also specify og:image:alt.
og:url
The canonical URL — no tracking parameters or session IDs — and it should match your rel="canonical". Facebook treats every link with the same og:url as one object and uses the metadata at that URL, so an og:url that points at your homepage makes every article share as your homepage.
og:type
website for most pages, article for posts and news. Facebook assumes website when it's missing; article adds optional properties such as article:published_time and article:author.
og:site_name
Your site's name, which some apps show alongside the card. Apple recommends it as the place for branding instead of the title, and Google considers it when choosing the site name shown in search results.
How to add Open Graph meta tags so crawlers see them
Use property=, not name= — the protocol is built on RDFa, and every example on ogp.me uses property. Put the tags high in the <head>: Meta's crawler cuts off Open Graph tags after the first 1 MB, and WhatsApp needs the head within the first 300 KB of HTML. Most important, render them on the server. Apple states that Messages link previews don't run JavaScript; Facebook, Slack and WhatsApp all describe fetching the HTML and reading the tags out of it. Tags injected in the browser by a single-page app or a tag manager are invisible to them.
<head>
<title>Trail Runner X2 Review | TrailFoot</title>
<link rel="canonical" href="https://trailfoot.example.com/reviews/trail-runner-x2">
<meta property="og:title" content="Trail Runner X2 Review">
<meta property="og:description" content="Grip, fit and comfort after a season on muddy trails.">
<meta property="og:image" content="https://trailfoot.example.com/og/trail-runner-x2.jpg">
<meta property="og:image:width" content="1200">
<meta property="og:image:height" content="630">
<meta property="og:image:alt" content="Muddy trail running shoe on a rocky path">
<meta property="og:url" content="https://trailfoot.example.com/reviews/trail-runner-x2">
<meta property="og:type" content="article">
<meta property="og:site_name" content="TrailFoot">
<meta name="twitter:card" content="summary_large_image">
</head>The last line is for X. X falls back to og:title, og:description, og:image and og:image:alt when the matching twitter: tags are absent, but nothing stands in for twitter:card — without it, X may fall back to a small summary card instead of the large image one. The Twitter card validator guide covers that gap in detail.
Next.js App Router. Set the same values through openGraph in your metadata. Relative image paths need metadataBase. Metadata merges shallowly, so a page's own openGraph without images wipes out the layout's image. And Next.js streams generateMetadata output into the body for ordinary browsers but keeps it in the head for bots such as facebookexternalhit and LinkedInBot, so test with a crawler user agent.
// app/reviews/trail-runner-x2/page.tsx
import type { Metadata } from "next";
export const metadata: Metadata = {
// Usually set once in app/layout.tsx
metadataBase: new URL("https://trailfoot.example.com"),
alternates: { canonical: "/reviews/trail-runner-x2" },
openGraph: {
title: "Trail Runner X2 Review",
description: "Grip, fit and comfort after a season on muddy trails.",
url: "/reviews/trail-runner-x2",
siteName: "TrailFoot",
type: "article",
images: [
{
url: "/og/trail-runner-x2.jpg",
width: 1200,
height: 630,
alt: "Muddy trail running shoe on a rocky path",
},
],
},
};og:image size: what each platform actually requires
- Facebook: minimum 200 × 200 px, maximum 8 MB. Use at least 1200 × 630 for high-resolution screens; below 600 × 315 the image still shows, but much smaller. Stay close to 1.91:1 to avoid cropping.
- LinkedIn: minimum 1200 × 627 px, maximum 5 MB, 1.91:1 recommended.
- X: the large image card uses a 2:1 ratio, from 300 × 157 up to 4096 × 4096 px, under 5 MB. SVG isn't supported.
- WhatsApp: under 600 KB, at least 300 px wide, with a width-to-height ratio of 4:1 or less.
- iMessage: at least 900 px wide; images under 150 px may be ignored or shown as an icon.
One file satisfies all five: a 1200 × 630 JPG compressed under 600 KB. WhatsApp's weight limit is the one people miss, so export photos as JPG, not PNG. Keep text away from the top and bottom edges, since X's 2:1 card can crop a 1.91:1 image slightly.
Paste a URL into CheckSEO's Open Graph Checker to see which og: tags the page has, which are missing, and a share-card preview built from those values — no signup.
Check your Open Graph tagsWhy your link preview is stale, and how to refresh it
Platforms fetch a URL once, cache the result and reuse it. Facebook also caches images by their URL, so overwriting the file at the same address changes nothing. How to force a fresh fetch:
- Facebook: paste the URL into the Sharing Debugger. It shows the tags the crawler read and any errors, and Scrape Again refreshes the cache.
- LinkedIn: run the URL through Post Inspector, which re-fetches the page and shows the preview it will use.
- Slack: caches link previews for around 30 minutes, so waiting is enough.
- WhatsApp, iMessage and Discord: none offers a public refresh tool. Use a URL they haven't seen: give the image a new filename or a
?v=2query string, and if the page itself is cached, share the link with a harmless query string added.
None of this fixes posts that are already out. Facebook says updating an image doesn't automatically update old shares, and LinkedIn says Post Inspector only changes the preview for new posts. Check the tags before a link goes out widely, not after.
Open Graph debugging checklist
The tags are in the raw HTML
Use view-source or curl -sA "facebookexternalhit/1.1" https://yourdomain.com/page and search for og:. Don't trust DevTools' Elements panel — it shows the page after JavaScript has run.
The image URL returns a real image
Open the og:image URL in a private window. It should return status 200 with an image/jpeg or image/png content type over HTTPS, with no login, hotlink protection or expiring signed URL. Facebook suggests pasting the image URL itself into the Sharing Debugger.
Size, ratio and weight are right
1200 × 630, under 600 KB, and the og:image:width and og:image:height values match the actual file.
Crawlers aren't blocked
Check robots.txt and any firewall or bot protection for rules that catch facebookexternalhit, LinkedInBot, WhatsApp or Twitterbot. Meta asks sites to allowlist its crawler and to respond within a few seconds. Slack ignores robots.txt entirely, so a working Slack preview proves nothing about Facebook.
Redirects resolve on the server
Apple follows server-side redirects but not meta refresh or JavaScript redirects, and Facebook uses the tags on the final URL. Make sure the page you land on carries the tags and an og:url pointing to itself.
No relative URLs
content="/og.jpg" fails. ogp.me defines URL values as full http:// or https:// addresses, and WhatsApp requires an absolute image URL.
No duplicate tags
When a theme and an SEO plugin both print og:image, ogp.me gives the first tag preference. Remove one source. The meta tags guide covers the rest of the head.
Check your Open Graph tags
CheckSEO's Open Graph Checker fetches a URL and reports whether og:title, og:description, og:image, og:url and og:type are present, flags a missing og:site_name or og:locale, warns when og:image isn't an absolute URL, and draws a share-card preview from the values it finds. Run it after every fix, then refresh the platform caches.
Frequently asked questions
What are Open Graph tags?
Open Graph tags are meta tags in a page's head, written with a property attribute such as og:title, that tell Facebook, LinkedIn, WhatsApp, Slack, iMessage and other apps which title, description, image and URL to show when the link is shared. The protocol requires og:title, og:type, og:image and og:url.
What size should an og:image be?
Use 1200 × 630 pixels (1.91:1), saved as a JPG or PNG under 600 KB. That meets Facebook's recommended size, LinkedIn's 1200 × 627 minimum and 5 MB cap, X's 5 MB limit and WhatsApp's 600 KB limit. Add og:image:width, og:image:height and og:image:alt, and use an absolute https URL.
How do I check my Open Graph tags?
View the page source, or fetch the page with curl using a crawler user agent, and confirm the og: tags are in the head of the HTML the server returns. Then use an Open Graph checker for a preview, and Facebook's Sharing Debugger or LinkedIn's Post Inspector to see what those platforms scraped.
Why does my link still show the old preview?
Platforms cache what they scraped. Run the URL through Facebook's Sharing Debugger and click Scrape Again, or through LinkedIn's Post Inspector. Slack's cache clears in about 30 minutes. WhatsApp, iMessage and Discord have no public refresh tool, so rename the image file or add a version query string. Posts already published usually keep the old card.
Do I need Twitter Card tags if I have Open Graph tags?
Only one is essential. X falls back to og:title, og:description, og:image and og:image:alt when the twitter: versions are missing, but nothing replaces twitter:card. Without a twitter:card tag set to summary_large_image, X may fall back to a small summary card instead of the large image card.
Check your own site with the Open Graph Checker.
Open Open Graph CheckerMore from the blog
Social Media Character Limits 2026: Instagram, X, Threads, LinkedIn, Facebook, TikTok
Instagram caption character limit is 2,200, but the feed cuts it far sooner. Every 2026 limit for X, Threads, LinkedIn, Facebook and TikTok in one table.
Social Media Image Sizes 2026: Every Dimension in One Cheat Sheet
Social media image sizes for 2026, checked against official help pages: Instagram, Facebook, X, LinkedIn, TikTok, YouTube and Pinterest, with safe zones.