Guides · HolicAudit

Open Graph tags: the practical guide

Published 2 November 2026

In short: Open Graph tags are meta tags that control the title, description and image shown when someone shares your link. You need five on every shareable page, they must be in the server HTML, and the image must be an absolute https URL.

Why they matter

A link with a large image and a clear title takes far more space in a feed or chat than a bare URL, and gets clicked more. Without Open Graph tags, each platform guesses, often picking a logo, a cookie banner or nothing at all. Facebook introduced the protocol in 2010; LinkedIn, Slack, Discord, WhatsApp, Telegram, iMessage and most other apps now read it too, and X falls back to it when Twitter-specific tags are missing.

The five tags you need

<meta property="og:title" content="Your page title">
<meta property="og:description" content="One or two sentences.">
<meta property="og:image" content="https://example.com/og/page.png">
<meta property="og:url" content="https://example.com/page">
<meta property="og:type" content="website">
<meta name="twitter:card" content="summary_large_image">

Note that Open Graph uses property=, while Twitter tags traditionally use name=. The og:title can differ from your title tag: titles are written for searchers, og:titles for people scrolling a feed. Use article as og:type for blog posts and add og:site_name if you want your brand shown.

Images that work everywhere

1200 × 630 pixels (1.91:1). It's large enough for high-resolution screens and is the ratio most platforms use.
PNG or JPEG, ideally under 1 MB; some apps give up on large files.
A full https:// URL that isn't behind a login, a firewall rule or hotlink protection.
Keep text and faces in the centre: some apps crop to a square.
Add og:image:width, og:image:height and og:image:alt so the first share renders immediately and is accessible.

Why previews go wrong

The tags are added by JavaScript. Social crawlers don't run JavaScript. If your site is a client-rendered app, render the head on the server or pre-render pages. The preview is cached. Platforms keep the first version they saw for days or weeks. Use Facebook's Sharing Debugger, LinkedIn's Post Inspector or simply add a harmless query string to the URL to force a fresh fetch. The image is blocked. Bot protection that challenges unknown user agents often blocks the crawlers that fetch your og:image.

Check your pages

Our meta tag checker loads a page like a social crawler does and shows the card it would produce, with every tag listed. Run it after each template change.

Frequently asked questions

Do Open Graph tags help SEO?

Not directly. Google doesn't rank pages on them. They improve how links look when shared, which brings visits and sometimes links.

Do I need separate Twitter card tags?

X reads og:title, og:description and og:image as fallbacks. You do need twitter:card set to summary_large_image for the big image layout.