Open Graph Meta Tags: The Complete Guide to Social Media Previews

What Open Graph Meta Tags Actually Are

The open graph protocol was created by Facebook in 2010 to turn any web page into a rich object in a social graph. Before it, shared links were just blue underlined text. Open graph meta tags gave crawlers a structured vocabulary: og:title for the headline, og:description for the summary, og:image for the preview picture, and og:url for the canonical address.

Today the protocol is the universal standard for link previews. Facebook, LinkedIn, WhatsApp, Telegram, Slack, Discord, and Pinterest all read open graph tags. X (Twitter) has its own Twitter card format but falls back to open graph tags when Twitter-specific ones are absent. One set of tags, written once, controls how your link looks almost everywhere.

Here is the smallest complete set of open graph tags:

<meta property="og:title" content="Your Page Title" />
<meta property="og:type" content="website" />
<meta property="og:url" content="https://example.com/page" />
<meta property="og:image" content="https://example.com/images/preview.jpg" />
<meta property="og:description" content="A one-sentence summary of the page." />

The Four Required Open Graph Tags

The open graph protocol defines four required properties. Everything else is optional enhancement. Get these four right and your previews will work on every major platform.

og:title — the preview headline. Keep it under 60 characters so it is not truncated; it can differ from your <title> tag and usually should be punchier, written for humans scanning a feed rather than search engines.

og:type — the object type. Use website for ordinary pages and article for blog posts and news (article unlocks article:published_time and article:author). Music, video, and product types exist but are rarely needed.

og:url — the canonical URL of the page. Always use the absolute URL including https://. This tag also consolidates likes and shares across URL variants (with or without trailing slash, UTM parameters) onto one object.

og:description — the preview summary, ideally 150–200 characters. It can mirror your meta description, but feeds reward a slightly more conversational tone than search snippets.

Beyond the required four, the most valuable optional tags are og:site_name (your brand, shown above the headline on Facebook), og:locale (e.g. en_US), and the image dimension tags og:image:width and og:image:height, which help crawlers reserve layout space and render previews faster.

og:image Specs That Actually Work

The preview image does most of the work — posts with images get dramatically more engagement than text-only links. But og image requirements are where most previews break, because each platform enforces minimums and the tags demand absolute URLs.

Size: 1200×630 pixels is the universally recommended open graph image size (1.91:1 ratio). Facebook requires at least 200×200; anything smaller is ignored. LinkedIn crops to roughly 1.91:1 on desktop. WhatsApp wants images under 300KB and at least 300×200, or it shows no preview at all.

URL: the og:image content must be an absolute URL starting with https://. Relative paths like /images/preview.jpg are the single most common reason for a missing preview image — social crawlers do not resolve relative URLs against your domain.

Format and weight: JPG or PNG work everywhere; WebP support is still inconsistent across messaging apps, so stick to JPG for previews. Keep the file under 8MB for Facebook and LinkedIn, and under 300KB if WhatsApp previews matter to you. Keep important text inside the central safe zone — platforms crop aggressively on mobile. For the full sizing breakdown, see our og image size guide.

Twitter Cards: The X Factor

X uses its own Twitter card markup, though it reads open graph tags as a fallback. If you only write open graph tags, X shows a basic summary card — functional, but not the large image layout most publishers want. Adding three Twitter-specific tags takes thirty seconds and is worth it:

<meta name="twitter:card" content="summary_large_image" />
<meta name="twitter:title" content="Your Page Title" />
<meta name="twitter:description" content="A one-sentence summary." />
<meta name="twitter:image" content="https://example.com/images/preview.jpg" />

Set twitter:card to summary_large_image for the big 1200×628 preview; the plain summary value gives a small thumbnail layout. Note the attribute difference: open graph uses property=, Twitter cards use name=. Mixing them up is a classic copy-paste bug — validators will silently ignore a twitter: tag written with property.

How Each Platform Reads Your Tags

Facebook reads the full open graph protocol and caches aggressively — the first scrape of a URL can stick for days, which is why the Sharing Debugger's re-scrape button exists. LinkedIn reads og:title, og:description, and og:image but ignores og:type extras; it also caches for about a week.

X prefers Twitter card tags and falls back to open graph. WhatsApp reads open graph tags but is the pickiest: image under 300KB, absolute URL, and the page must return the tags without JavaScript rendering — client-side-rendered SPAs often show no WhatsApp preview because its crawler does not execute JavaScript. Telegram, Slack, and Discord all read open graph tags with minimal caching, which makes them great for quick testing: share the link in a private channel and see the preview instantly.

Debugging Broken Link Previews

When a preview is wrong, work through this checklist in order. Nine times out of ten, the problem is in the first three steps.

1. View source. Open the page, view source, and confirm the og: tags are actually in the served HTML — not injected later by JavaScript. Social crawlers read raw HTML.

2. Check the image URL. Copy the og:image value into a new tab. If it does not load, neither will the preview. Confirm it is absolute (https://), publicly reachable, and meets the size minimums.

3. Check robots.txt. If your robots.txt blocks the platform's crawler (facebookexternalhit, Twitterbot, LinkedInBot), no tags will ever be read. This is a surprisingly common cause after a site hardens its crawler rules.

4. Re-scrape. Use the platform's debugger to force a fresh crawl: Facebook Sharing Debugger, X Card Validator, LinkedIn Post Inspector. This clears stale caches, which cause most "but I already fixed it" confusion.

5. Validate. Run the URL through an open graph validator to catch malformed tags — unescaped ampersands in content attributes, duplicate og:url values, or property/name mix-ups.

Generating Tags Without Hand-Writing Code

Hand-writing open graph tags is error-prone: one relative image URL or one property/name mix-up and the preview silently breaks. An opengraph generator (open graph generator) removes that risk — you fill in the title, description, URL, and image, and it emits the complete tag block with absolute URLs, correct attributes, and matching Twitter card tags.

The workflow takes under a minute: enter your page details in the Open Graph Generator, copy the generated markup, paste it into your page's <head> before the closing tag, then verify with a debugger. For sites with many pages, generate the block once as a template and have your CMS or static-site generator fill in the per-page values programmatically — the structure never changes, only the content attributes do.

OG Meta Tags Beyond the Basics

Once the core og meta tags are in place, a few optional properties polish your previews further. og:site_name brands every preview with your site name — on Facebook it appears above the headline in small caps. og:locale declares the content language (for example en_US), and og:locale:alternate lists other available languages for multilingual sites. Adding og:image:width and og:image:height lets crawlers reserve the right layout space before the image downloads, which makes previews render noticeably faster in feeds.

For article pages, switch og:type from website to article and add article:published_time, article:modified_time, article:author, and article:section. These article-specific og meta tags power the timestamp and author bylines you see on news previews. A good opengraph generator includes fields for all of these — not just the big four — so you never have to look up the property names.

Finally, test everything with the Facebook open graph debugger (officially the Sharing Debugger). Paste your URL, click “Scrape Again,” and it shows exactly which tags Facebook found, which it ignored, and any warnings — missing og:image, undersized images, or redirect chains. Run every important page through the Facebook open graph debugger after publishing; it takes ten seconds and catches the errors that silent fallbacks hide.

7 Mistakes That Break Previews

1. Relative image URLs. /images/preview.jpg instead of https://example.com/images/preview.jpg. Crawlers do not resolve relative paths.

2. JavaScript-rendered tags. Tags injected by client-side JS are invisible to most social crawlers. Server-render them or pre-render the head.

3. Crawler blocked in robots.txt. Blocking facebookexternalhit or Twitterbot kills previews site-wide.

4. Stale cache. Fixing tags without re-scraping leaves the old broken preview cached for days.

5. property/name mix-up. Open graph tags need property="og:*"; Twitter cards need name="twitter:*". Swapped attributes are silently ignored.

6. Oversized images. A 12MB PNG preview image times out on WhatsApp and slows every other platform's scrape.

7. No tags on some pages. Tags on the homepage but not on article pages means shared articles get grey empty boxes. Template the tags into every page.