Home/ Guides/ Open Graph tags

Guide · Open Graph

The Open Graph tags that actually matter.

You don't need twenty og: tags. Six decide whether your link unfurls into a rich card or shows up as a bare text row. Here they are, a copy-paste <head> block, and how to test it before you post.

Updated June 3, 2026 · by slsh.me

The short answer

These six tags control your link card. Everything else is optional.

title og:title desc og:description image og:image url og:url type og:type card twitter:card

The first three (og:title, og:description, og:image) are what people see. og:url sets the canonical link, og:type classifies the page, and twitter:card set to summary_large_image is what gives you the big image card on X. Get these six right and Facebook, X, LinkedIn, Slack, Discord, iMessage and WhatsApp all unfurl cleanly.

Don't want to hand-write tags at all? Every slsh.me short link ships a correct, complete Open Graph card on every link — set the title, description and image once, and the markup is generated for you. Free.

The copy-paste <head> block.

Drop this into the <head> of your page, swap in your own values, and you have a complete, correct set. Note the absolute https:// image URL and the summary_large_image card.

<!-- The six that decide your card -->
<meta property="og:title"       content="Make every click stick">
<meta property="og:description" content="Short links with custom social cards and live analytics.">
<meta property="og:image"       content="https://example.com/og.png">
<meta property="og:url"         content="https://example.com/page">
<meta property="og:type"        content="website">
<meta name="twitter:card"     content="summary_large_image">

<!-- Nice to have: declare the image dimensions so scrapers -->
<!-- reserve the right space before the file loads. -->
<meta property="og:image:width"  content="1200">
<meta property="og:image:height" content="630">

That's the whole job. The og:image should be 1200 × 630 px for a crisp large card, and the og:image:width / height pair is optional but helps platforms lay out the card faster.

What each tag does, at a glance.

Three of the six do the visible work of the card; the other three are strongly recommended. Miss og:image in particular and your link degrades to a plain text row.

Tag What it does Required? Example
og:title The bold headline on the card. Required Make every click stick
og:description The grey line of supporting copy beneath the title. Required Short links with custom cards.
og:image The preview image — the single biggest driver of clicks. Required https://example.com/og.png
og:url The canonical URL the card links to and de-dupes against. Recommended https://example.com/page
og:type Classifies the page (website, article, …). Recommended website
twitter:card Picks the card style on X. Set to summary_large_image for the big image card. Recommended summary_large_image

Tag by tag — and the gotcha for each.

og:title is the bold headline. Keep it under about 60 characters — X and Facebook both truncate longer titles with an ellipsis, usually mid-word. Write it like a headline, not a page <title> stuffed with your brand name.

og:description is the grey supporting line. Aim for roughly 110 characters; past ~200 it gets cut. It's a hook, not a meta description — say what the reader gets from clicking.

og:image does the heavy lifting; a missing or broken image is the difference between a full card and a bare link. The gotcha: it must be an absolute https:// URL. A relative path like /og.png resolves in your browser but not for a scraper, so the image silently vanishes. See the Open Graph image size guide for the exact dimensions.

og:url should be the page's canonical URL — clean, without tracking parameters. Platforms use it to de-duplicate shares and to decide which URL "owns" the engagement. Point UTM-tagged links at the canonical here so all your shares aggregate to one card.

og:type classifies the object. website is right for most pages; use article for blog posts and guides. It rarely changes the visible card, but it's part of the spec and some integrations read it.

twitter:card is the one non-og: tag that earns its place. X reads your og: tags for the title, description and image, but it only draws the big, full-width image card when twitter:card is summary_large_image. Leave it out and you get a cramped thumbnail card instead.

Common mistakes.

These four account for most broken or underwhelming cards. Each is a one-minute fix.

No og:image at all

Without an image your link unfurls as a bare title-and-domain text row — by far the biggest hit to click-through. Pages generated from a template often forget to set a per-page card.

Fix: set og:image on every shareable page, and use an absolute https:// URL.

Relative og:image URL

A path like /og.png or //cdn/og.png works in your browser but a scraper can't resolve it, so the image disappears even though the tag is "present."

Fix: always use the full https://your-site.com/og.png, served over HTTPS.

Missing twitter:card

With og: tags but no twitter:card, X falls back to a small thumbnail instead of the full-width image card — the same image, a fraction of the impact.

Fix: add <meta name="twitter:card" content="summary_large_image">.

Title or description too long

Over-long copy gets truncated mid-sentence with an ellipsis, often cutting your strongest words. A 90-character title looks fine in your editor and broken on the card.

Fix: keep og:title under ~60 characters and og:description around 110.

How to test it.

Markup that looks right in your editor can still unfurl wrong, so check the real thing before you post. Paste your URL into a checker and see the actual card each platform will draw, plus a pass/fail audit of all six tags. If a card later looks wrong, the link preview not working guide walks through every cause.

The free slsh.me Open Graph checker fetches your page, reads its tags, and renders the real card on X, Facebook, LinkedIn, Slack, Discord, iMessage and WhatsApp — with a best-practices audit of every tag above.

Check your tags on the free Open Graph checker

Or skip the hand-rolled tags entirely: shorten your link on slsh.me and it ships a correct card on every link — free.

Questions

What are the essential Open Graph tags? +
Six tags decide whether a link unfurls into a rich card: og:title, og:description, og:image, og:url, og:type, and twitter:card. The first three are what people see; og:url sets the canonical link; og:type classifies the page; and twitter:card set to summary_large_image gives you the big image card on X.
Do I need twitter:card if I have og: tags? +
Yes, if you want the large image card on X. X falls back to your Open Graph tags for the title, description and image, but it will only draw the big, full-width image card when twitter:card is set to summary_large_image. Without it you get a small thumbnail card instead.
What is og:type? +
og:type tells platforms what kind of object the page represents — website, article, product, video, and so on. For most pages website is correct; for blog posts and guides use article. It rarely changes the card appearance, but it's part of the spec and some integrations read it, so set it.
Are Open Graph tags required for SEO? +
No. Open Graph tags don't directly affect Google rankings — they control how your link looks when shared on social platforms and in chat apps. But a rich, well-designed card earns far more clicks per share, and that downstream traffic and engagement can help indirectly. Treat them as share optimization, not on-page SEO.

Every link gets a perfect card.

Shorten any URL with slsh.me and design its 1200×630 Open Graph card — title, description, image — once. All six tags are generated correctly for you, it renders right on every platform, and you get live click analytics for free.

Create a link with slsh.me

Free forever · see pricing