Free Open Graph Preview

What Open Graph Actually Is

The Open Graph protocol was created by Facebook in 2010 as a way to turn any web page into a "rich object" in a social graph, a structured set of metadata that other applications (originally Facebook, now also LinkedIn, Slack, Discord, Microsoft Teams, iMessage, WhatsApp, and dozens more) can read to render a preview card when someone pastes your URL. The official spec lives at ogp.me and the protocol has effectively become the lingua franca of link sharing on the web.

Without OG tags, social platforms scrape your page and guess: they pick a heading, grab the first image they can find, and call it a card. The result is rarely what you want. With OG tags you control the title, the description, and the image, which is the difference between a polished link and a broken-looking one.

The Four Required Tags (per ogp.me)

The official Open Graph spec defines four required properties. To qualify as an Open Graph object, a page must declare all four:

Recommended optional tags include og:description (a one- or two-sentence summary), og:site_name (your site's name as a label), og:locale (language and region), and the image dimension hints og:image:width / og:image:height / og:image:alt. Including the dimension hints lets social clients pre-allocate the right amount of space and avoids layout shift while the image loads.

Twitter / X Cards: Same Idea, Slightly Different Tags

X (formerly Twitter) has its own metadata namespace, twitter:card, twitter:title, twitter:description, twitter:image, twitter:site, twitter:creator, but importantly, X falls back to OG tags when Twitter-specific ones are missing. So a page that ships only the OG tags still gets a card on X. Where the two differ is in the card type:

• twitter:card = summary, small square thumbnail, title, description.
• twitter:card = summary_large_image, full-width image at the top of the card. The modern default for content sharing because it gets more visual attention in the feed.
• app and player, for app installs and inline video respectively.

Note: the standalone Twitter Card Validator preview at cards-dev.twitter.com/validator was removed by X on 2 August 2022. The current way to verify a card is to start a new tweet in the Tweet Composer, paste the URL, and let the preview render, you don't need to actually post the tweet. Some third-party tools (this one included) approximate the rendered card so you can iterate before going live.

Image Dimensions That Actually Work

There's no single perfect size, but a 1200×630 image (1.91:1 aspect ratio) is the most reliable single bet, it works everywhere without major cropping. Per-platform recommendations:

Keep important text and faces near the centre of the image, every platform crops differently and a logo in the corner can disappear behind the platform's UI overlays.

Why Your Card Sometimes Won't Show

If you've added OG tags but the preview is still broken or empty, the usual suspects:

• HTTPS required. Facebook and most modern platforms reject http:// image URLs. Serve og:image over HTTPS.
• Image not publicly accessible. Behind authentication, blocked by IP allowlist, or returning 403 to the platform's crawler. Test by opening the image URL in a private browser window.
• Image too small. Below the platform's minimum (Facebook 200×200, LinkedIn 1200×627), the card falls back to a small thumbnail or no image at all.
• Wrong aspect ratio. A 1:1 square image submitted as summary_large_image on X gets centred-cropped, often badly.
• Cache. Social platforms cache your OG metadata aggressively. After fixing tags, visit Facebook's Sharing Debugger and click "Scrape Again" to refresh; LinkedIn's Post Inspector does the same; X picks up changes the next time someone pastes the URL.
• Robots.txt blocks the social crawler. Make sure user agents like facebookexternalhit, Twitterbot, LinkedInBot, Slackbot can fetch your page and image.
• Server returns non-2xx to the crawler. Check your server logs for the social-bot user agents.
• Relative image URLs. og:image must be an absolute URL (https://yoursite.com/og.jpg), never /og.jpg.

The Cache Problem

Once a social platform scrapes your page, the metadata is cached for some period, community lore puts it around 7 days for Facebook and LinkedIn, though neither platform documents the exact TTL. Updating your OG tags doesn't refresh the cache automatically. To force a re-scrape, use the official tools: Facebook Sharing Debugger, LinkedIn Post Inspector. X picks up new metadata when the URL is next shared. Slack and Discord refresh their previews based on the OG tags at fetch time, so they update faster than Facebook.

Common og:type Values

The og:type tag tells the social platform what kind of object the page represents. Most pages are website (the default) or article; vertical-specific values let platforms render richer cards. From the spec:

• website, default for general pages.
• article, blog posts, news. Pairs with article:published_time, article:author, article:section, article:tag.
• book, pairs with book:author, book:isbn.
• profile, for user profile pages.
• video.movie / video.episode / video.tv_show / video.other, for video content.
• music.song / music.album / music.playlist / music.radio_station, for music.

Length Limits in Practice

No platform enforces a hard cap on title or description length, but every one truncates after a point:

• Title, keep it under ~60 characters to be safe across platforms; ~70 truncates on most. Critical message in the first 50.
• Description, under ~155–200 characters before truncation. Less on mobile (around 100). Front-load the key information.
• Image alt text, should be present (og:image:alt) for screen readers and accessibility-conscious clients; under 100 characters.

JSON-LD vs Open Graph (They're Different Things)

A common confusion: JSON-LD structured data (using schema.org vocabularies) and Open Graph meta tags do different jobs. OG / Twitter Cards control social-share previews, what shows up when someone pastes your URL into Slack or Facebook. JSON-LD with schema.org helps Google parse your page for rich search results, recipe cards, product info, FAQ snippets in Google Search. Both are recommended, and they don't replace each other.

Common Mistakes

1. Using a relative og:image URL. The spec requires an absolute URL. Relative paths are silently dropped.
2. Using a generic site logo for every page. The OG image is your card's hero, every page deserves a unique image, ideally tying into the page's content.
3. Forgetting og:image:width and og:image:height. Some clients pre-allocate space and miss the image without these hints.
4. Missing the summary_large_image twitter:card type. Without it, X defaults to the smaller summary card with a square thumbnail, often less engaging.
5. Putting key text in the corners of the image. Different platforms crop differently. Subjects and important text should be in the centre 80%.
6. Updating tags but not refreshing the cache. Visit the official Sharing Debugger / Post Inspector after every change.
7. Submitting an HTTP image URL. Most platforms reject non-HTTPS images; the card will appear without one.
8. Using only og:title and og:description. Without og:image the card renders as a sparse text-only stub on most platforms.

Frequently Asked Questions

<meta property="og:title"       content="Your Page Title" />
<meta property="og:type"        content="website" />
<meta property="og:url"         content="https://yoursite.com/page" />
<meta property="og:image"       content="https://yoursite.com/og.jpg" />
<meta property="og:description" content="A short summary of the page." />

Related Tools