SEO Tools·4 min read

How Open Graph Tags Work: A Field 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. Understanding how open graph tags work is the difference between a card you designed and a card the platform improvised from whatever it scraped. This guide covers the six og tags that matter, a worked block you can adapt, og image sizing, and the handful of mistakes behind almost every ugly link preview you've ever posted.

Open the tool 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 on most platforms that first scrape gets cached 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, six properties, every major platform.

Open Graph is a small vocabulary Facebook published in 2010 that the rest of the social web quietly adopted. Each tag is a meta element with a property attribute starting og: and a content attribute holding the value. Six cover nearly every real 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

A worked og block for a product launch page

Real inputs, real output, ready to adapt.

Say the page is a keyboard launch. In the Open Graph Generator you'd fill og:title with Nimbus 2, the quiet mechanical keyboard, og:description with Hot-swappable switches, 40 percent quieter, ships worldwide from $129, og:image with https://example.com/social/nimbus2.png, og:url with https://example.com/nimbus2, and leave og:type as website.

The output is one line per field, for instance: <meta property="og:title" content="Nimbus 2, the quiet mechanical keyboard" />. Six lines total land in your head, and the tool's social-card preview shows the image cropped to 1.91:1 with the title and description beneath it, which is close to what Facebook and LinkedIn will render from the same inputs.

Og image sizing that survives every platform crop

1200 by 630 is the number to remember.

Og image sizing has one dominant answer: 1200 by 630 pixels, a 1.91:1 ratio. Facebook and LinkedIn render exactly that shape, X's large card crops close to it at 2:1, and bigger files scale down without harm. Go below roughly 600 pixels wide and some platforms silently demote your card to a small-thumbnail layout, which is why an otherwise perfect page sometimes shares as a tiny square.

Keep text and logos inside the middle 80 percent of the frame, because each network shaves the edges slightly differently. And keep the file under about 8MB with a real image content type; scrapers give up on oversized or mislabeled files and your card ships blank.

Og tag mistakes that flatten your link previews

Four failures cause most of the damage.

Fixing wrong link previews usually means finding one of these in the head and correcting it.

A relative og:image path like /img/hero.png, which scrapers can't resolve, so the card renders with no picture at all
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 mirroring it. The SEO title carries your brand suffix and keyword phrasing; the card headline can be shorter and punchier, since feeds clamp it to about two lines. Second, park 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 Inspector fetches the live URL and shows the card per platform, which is the tool to reach for when a preview misbehaves in the wild. If you need control over X's layout, the Twitter Card Generator adds the twitter:card type og can't express. For the full head including title, meta description, and canonical in one pass, start with the Meta Tag Generator instead, and if you don't have a social image yet, the OG Image Maker builds 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