Guide to Meta OG Tags: Optimizing Social Metadata
If you only ever learn one thing about social metadata, learn this: there are exactly four Open Graph tags that 90% of websites need, and you can copy them in under five minutes. Everything else is refinement. This post is the five-minute version, the floor that turns a shared link from a naked blue URL into a card with a title, a sentence, and an image.
When you paste a link into Slack, iMessage, LinkedIn, or WhatsApp and a little preview card appears, that card was built from Open Graph (og:) tags in the page's HTML. No tags, no card: the platform just shows the raw URL, and a raw URL gets ignored.
The four tags you actually need
<meta property="og:title" content="How to brew better coffee at home" />
<meta property="og:description" content="A no-nonsense guide to dialing in your grinder, water, and ratio." />
<meta property="og:image" content="https://example.com/images/coffee-card.jpg" />
<meta property="og:url" content="https://example.com/blog/better-coffee" />
Drop those four lines inside the <head> of your page, swap in your own values, and you are done for the vast majority of sites. Here's what each one does:
og:titleis the bold headline on the card. It can differ from your browser<title>; make this one punchier and human, since it's competing for a tap in a busy feed.og:descriptionis the one or two sentences under the title. Aim for roughly 110 to 140 characters of readable summary, not keywords.og:imageis the picture. Use an absolutehttps://URL (not/images/card.jpg), sized 1200×630. This is the single tag that makes the biggest visual difference.og:urlis the canonical address of the page, so every share of the same content gets counted as one URL.
That's the whole starter kit. You'll notice older guides also push og:type as "required." It isn't. If you omit it, every platform defaults to website, which is fine for a homepage, a landing page, or a tool. Add og:type="article" later if you run a blog and want it categorised as such, but don't let it block you today.
A copy-paste block you can ship now
Here's a complete, valid set with the optional-but-nice og:type and og:site_name included, plus the one Twitter/X line that stops X from showing a sad little thumbnail:
<!-- Open Graph -->
<meta property="og:title" content="Your page headline" />
<meta property="og:description" content="One clear sentence about the page." />
<meta property="og:image" content="https://yourdomain.com/og-image.jpg" />
<meta property="og:url" content="https://yourdomain.com/this-page" />
<meta property="og:type" content="website" />
<meta property="og:site_name" content="Your Brand" />
<!-- X/Twitter falls back to og:* but needs this one line for a big image -->
<meta name="twitter:card" content="summary_large_image" />
Add the twitter:card line because X reads its own twitter: tags first and only partially falls back to Open Graph. Without it you get a cramped thumbnail instead of the full card. For the rest of the Twitter-specific tags, see our Twitter Card implementation guide.
Three mistakes that break the card
Before you call it done, dodge the three errors that cause 90% of "my preview isn't working" complaints:
- A relative image URL.
og:image="/og.jpg"fails silently because the scraper has no domain to resolve it against. Always use the fullhttps://yourdomain.com/og.jpg. - A missing or oversized image. No
og:imagemeans no picture. A 3 MB PNG screenshot means WhatsApp and iMessage (which need the file under ~300 KB) show nothing. Export a compressed JPG around 1200×630. - A made-up tag. There is no
og:keywordstag. It was never part of the spec, and every platform ignores it. It's a myth that refuses to die. Put your effort into the title and description instead.
Check it before you share it
Don't publish and hope. Paste your live URL into our Open Graph Checker to see the exact tags a scraper reads from your page, then use the Social Preview tool to see the rendered card the way Facebook, LinkedIn, and X will draw it. If the checker shows a tag you set but the platform still shows the old card, the platform has cached it. Re-scrape with the network's own debugger to clear it.
When four tags aren't enough
For most sites, the block above is the finish line. You cross into "I need more" territory only when:
- You generate pages dynamically (a blog, a store, a SaaS dashboard) and need a different card per page. That's the implementation problem; see our complete Open Graph meta tags guide for Next.js, WordPress, and raw-HTML patterns.
- You're fussing over the image: exact ratios, safe zones, file formats. Our OG image size and format best practices covers the specs.
- You want the full tag vocabulary (
og:image:width,article:author, video tags, and the rest). That's the meta property og reference. - You're wondering whether any of this helps your Google rankings. Short version: not directly. The mechanism is explained in does Open Graph affect SEO.
But none of those are prerequisites. Ship the four tags, verify the card, and move on.
Frequently Asked Questions
What are the minimum Open Graph tags I need?
Four: og:title, og:description, og:image, and og:url. With those four in your page <head>, every major platform can build a proper preview card. Adding og:type and og:site_name is nice but optional.
Is og:type required?
No. If you omit it, platforms default to website, which works fine for most pages. Set og:type="article" only if you want blog posts categorised as articles, or other types like product or video for those page types.
Does og:keywords exist?
No. There has never been an og:keywords tag in the Open Graph protocol, and social platforms and search engines ignore it. It's a persistent myth. Use a clear og:title and og:description instead.
Why isn't my image showing up?
The two usual causes are a relative URL (/og.jpg instead of the full https://... address) or a file that's too large. Keep it under ~1 MB, and under ~300 KB for WhatsApp and iMessage. Paste the page into our OG Checker to confirm the scraper sees a valid absolute image URL.
Can og:title be different from my page title tag?
Yes, and often it should be. The <title> tag targets search results and browser tabs; og:title targets a social feed. Making the social version a little more conversational and click-worthy is normal and intentional.