SEO Tools·5 min read

How Open Graph Tags Work: A Guide to Link Previews

Paste a link into Slack, LinkedIn or a Facebook post and the platform builds a card for it: image, headline, description. None of that is guesswork. The card comes from a handful of meta tags in the page's head, and when they are missing the platform improvises from whatever it can scrape. This guide explains how Open Graph tags work, which ones matter, a worked block you can adapt, how to size the image, and the few mistakes behind most ugly link previews.

Open the free Open Graph Generator All insights

The moment your URL becomes a social card

What happens in the first two seconds after you hit share.

The instant someone pastes your URL, the platform's scraper fetches the page, reads the head, and builds the card from what it finds there. It doesn't run your JavaScript, doesn't scroll, and doesn't wait. Whatever og markup sits in the raw HTML at that moment is the card, and most platforms cache that first scrape for days.

The stakes are concrete. Picture a product launch: the page went live an hour ago, marketing queues posts across three networks, and nobody checked the head. The scrape finds no og:image, so LinkedIn renders a gray text-only box while a competitor's announcement shows a full-width picture. Same feed, same afternoon, very different click counts.

How Open Graph tags work under the hood

One protocol, a few properties, every major platform.

Open Graph is a small vocabulary Facebook published in 2010 that the rest of the social web adopted. Each tag is a meta element with a property attribute starting og: and a content attribute holding the value. Six of them cover nearly every page.

og:title, the card's headline, and the one tag you should never omit
og:description, the one or two lines of supporting text under the headline
og:image, an absolute URL to the picture that dominates the card
og:url, the canonical address, which stops shares of ?utm= variants splitting engagement
og:type, website for most pages and article for posts
og:site_name, the publication name shown near the domain

The image tags that fix the first share

Three small lines that most pages skip.

Three more tags describe the picture itself. og:image:width and og:image:height tell Facebook the image size up front. Facebook says that with them it can show the image on the very first share, instead of downloading and measuring the file first. Without them, the first person to share a new URL may get a card with no picture.

og:image:alt describes the image for screen reader users. It costs one sentence and makes the card usable for people who can't see it. All three are optional, but on a page you expect to be shared, there is little reason to leave them out.

A worked og block for a product launch page

Real inputs, real output, ready to adapt.

Say the page is a keyboard launch. If the page is already live, paste its URL into the Open Graph Generator and click Auto-fill to load the tags it has, falling back to its title and meta description. Otherwise type the values in: og:title as Nimbus 2, the quiet mechanical keyboard, og:description as Hot-swappable switches, 40 percent quieter, ships worldwide from $129, og:url as https://example.com/nimbus2, og:image as https://example.com/social/nimbus2.png, and og:image:alt as Nimbus 2 keyboard on a wooden desk. Leave og:type as website.

When the image URL loads, the tool reads its real size and fills og:image:width and og:image:height for you. It also checks that the file answers with an image type, and warns if it is under 600 pixels wide, far from a 1.91:1 shape or heavy enough to slow the card. The output panel then shows one line per filled field, for instance <meta property="og:title" content="Nimbus 2, the quiet mechanical keyboard" />, and empty fields are left out rather than written blank.

The Also add matching twitter:* tags for X box is ticked by default. It adds twitter:card, set to summary_large_image when there is an image, plus matching title, description, image and alt lines, so X gets a proper card from the same values.

Sizing the og:image for every platform crop

1200 by 630 is the number to remember.

One size covers almost everything: 1200 by 630 pixels, a 1.91:1 ratio. Facebook and LinkedIn render that shape as a large card, and X's large image card crops it slightly to about 2:1. Go below roughly 600 pixels wide and many platforms drop to a small thumbnail layout, which is why an otherwise good page sometimes shares as a tiny square.

Keep text and logos inside the middle 80 percent of the frame, because each network trims the edges a little differently. Keep the file small too: a compressed JPG or PNG well under 1 MB. Some apps, WhatsApp among them, skip preview images that are slow to load.

Og tag mistakes that flatten your link previews

Four failures cause most of the damage.

A wrong link preview usually traces back to one of these in the head.

A relative og:image path like /img/hero.png, which scrapers can't resolve, so the card has no picture at all. The generator flags any image URL that doesn't start with https://.
og:url pointing somewhere other than the canonical, splitting likes and share counts across URL variants
One sitewide og:title copied into every template, so all 400 pages share as the homepage
An og:image hosted behind a login or a bot-blocking CDN rule, invisible to every scraper while looking fine in your browser

Two habits that keep og markup honest

Cheap insurance for every future share.

First, write og:title separately from your title tag instead of copying it. The SEO title carries your brand suffix and search phrasing; the card headline can be shorter and sharper, since feeds clamp it to about two lines. Second, keep social images at one predictable path, something like /social/slug.png at 1200 by 630, so no template ever falls back to a random inline image. When you regenerate tags after a redesign, the image URLs don't move and cached cards stay valid.

Where the Open Graph Generator ends and other tools begin

Build here, verify and specialize elsewhere.

The Open Graph Generator builds markup for a page you control. Once it's deployed, the Open Graph Checker fetches the live URL, runs pass, warn and fail checks, and shows the card on nine platforms, from Facebook and LinkedIn to WhatsApp, Slack and Discord. If you want a square summary card on X, separate @site and @creator handles, or a different headline for X, use the Twitter (X) Card Generator. For the full head, including title, meta description, robots and canonical, start with the Meta Tag Generator instead. And if you don't have a social image yet, the OG Image Generator makes one at exactly 1200 by 630.

Try it now

Open Open Graph Generator

The tool is one click away. No sign up, no upload, no payment.

Open Open Graph Generator

Write a review