April 27, 2026

Open Graph Tags Explained: Make Your Links Look Beautiful Everywhere

The complete reference for og:title, og:description, og:image and the rest. With examples.

Open Graph is the protocol that tells Facebook, LinkedIn, Slack, Discord, iMessage, and most other platforms how to render a link to your page. Done right, your links look like a magazine cover. Done wrong, they look broken.

The minimum viable set

You need four tags at minimum:

`og:title` — the headline that appears under the image. Up to 60 characters; longer gets truncated.

`og:description` — the subhead. Up to 200 characters but most platforms show only the first ~100.

`og:image` — the image, ideally 1200x630 pixels. Smaller works but looks worse on retina displays. Use a PNG or high-quality JPEG under 5MB.

`og:url` — the canonical URL of the page.

Why og: titles can be different from SEO titles

Your SEO title fights for ranking with keywords. Your og:title fights for clicks in social feeds where the user is already browsing. It can be more emotional, more curiosity-driven, less keyword-loaded. We often write SEO titles that are practical and og:titles that feel like a magazine cover line.

og:type

Set this to "website" for marketing pages, "article" for blog posts. The "article" type unlocks extra fields like article:published_time and article:author that show up in some clients.

og:image best practices

Use a 1200x630 image with text overlaid that summarizes the page. The image is what stops the scroll. A photo with no context performs worse than a clear text-on-color treatment that reads in 0.3 seconds. Keep important content in the center 60% — some platforms crop edges.

The Twitter overlap

Twitter (X) supports Open Graph as a fallback but prefers its own twitter:* tags. If you only set og: tags, Twitter will use them. If you want different copy for Twitter, set both. We default to writing one set and overriding only for Twitter when the audience justifies it.

How to validate

Before sharing a link, paste the URL into:

  • Facebook's Sharing Debugger
  • LinkedIn's Post Inspector
  • Twitter's Card Validator (or just paste the link in a draft tweet)
  • Each will show you exactly what users will see and surface any errors.


    Generate Open Graph tags for any page →

    ★ Try the tool

    Generate perfect meta tags in seconds

    No signup needed for your first 3 generations.

    Open the studio →