Every time someone pastes your URL into Slack, Twitter, Facebook, LinkedIn, or iMessage, each platform sends a crawler to your page and scrapes a specific set of meta tags to render a rich preview. If those tags are missing or broken, your link shows up as a plain blue URL or an unflattering auto-guess. Open Graph tags are the universal contract between your site and every social platform — and they're the easiest SEO win most sites still ignore.

What Open Graph is (and isn't)

The Open Graph Protocol (OGP) was created by Facebook in 2010 so external websites could describe themselves as rich objects in the Facebook graph. It defines a small set of meta property="og:*" tags that go in your HTML <head>.

Over time, the rest of the web adopted OGP as a shared vocabulary. Today:

Facebook, Instagram, iMessage: use og:* directly.
LinkedIn: uses og:* with a few quirks (more below).
Slack, Discord, Teams: use og:* with a light fallback to twitter:* and generic meta.
Twitter / X: prefers twitter:* tags but falls back to og:* when they're missing.
Pinterest: uses og:* and a few pinterest-specific tags.
Google search: does NOT use Open Graph for titles/descriptions — that's still the regular <title> and meta description. OG only matters for social.

The minimum Open Graph set

If you only set six tags on every page, set these. They cover every major social platform.

<meta property="og:title" content="Your Page Title — 55-65 chars" />
<meta property="og:description" content="A 140-200 character summary of what users will get when they click." />
<meta property="og:image" content="https://example.com/og-image.png" />
<meta property="og:url" content="https://example.com/page" />
<meta property="og:type" content="website" />
<meta property="og:site_name" content="Your Brand" />

og:title

This is what appears as the bold headline in every social preview. Keep it between 55-65 characters — under Twitter's 70-char truncation and Facebook's 88. It can be different from your <title>; social CTAs usually work better than SEO titles.

og:description

The subtitle under the headline. Target 140-200 chars. Facebook shows up to 300, Twitter truncates at 200, LinkedIn sometimes hides descriptions entirely. If you write 200 chars of real content, you're covered everywhere.

og:image

This is the single most impactful tag. A good image lifts click-through rates by 2-3× on social. Requirements:

Dimensions: 1200 × 630 pixels (1.91:1). Works on Facebook, Twitter, LinkedIn, Slack, iMessage.
Format: PNG or JPG. No SVG, no WEBP for broadest compatibility.
File size: under 8 MB (Facebook limit). Under 5 MB is safer.
URL: absolute URL (https://...) — relative URLs break every crawler.
Text in the image: keep at least 80 pixels from every edge; each platform crops slightly differently.

og:url

The canonical URL of the page. Use the clean URL, not whatever tracking parameters the current visitor has. If two URLs share the same og:url, platforms treat them as the same piece of content — which is usually what you want.

og:type

Almost always website. Use article for blog posts (enables og:article:* tags like published_time, author, section). product for e-commerce. video.* for videos.

og:site_name

Your brand name. Appears as the small header above the preview card. Set it once per site.

Twitter Card tags

Twitter reads og:* as a fallback but prefers its own namespace. Override only when you need different copy or a different image for Twitter specifically.

<meta name="twitter:card" content="summary_large_image" />
<meta name="twitter:title" content="Your Page Title" />
<meta name="twitter:description" content="Description for Twitter (up to 200 chars)." />
<meta name="twitter:image" content="https://example.com/og-image.png" />
<meta name="twitter:site" content="@yourbrand" />
<meta name="twitter:creator" content="@author_handle" />

Twitter card types

summary_large_image: the big 1.91:1 card. Use this for 99% of pages.
summary: smaller thumbnail-style card. Only use for pages without a hero image.
player: embedded video/audio. Requires Twitter approval.
app: app store card. Deprecated in practice.

Note: Twitter uses name= (not property=) for its tags. Using the wrong attribute silently breaks everything. Our analyzer catches this mistake.

LinkedIn: the quirky one

LinkedIn uses Open Graph but has a few undocumented behaviors that catch people out:

Image minimum: LinkedIn requires at least 1200 × 627. Anything smaller shows as a plain text link. 1200 × 630 works fine — don't go smaller.
Image aspect ratio: must be 1.91:1 exactly. 16:9 (1.78:1) sometimes renders cropped, sometimes falls back to a small thumbnail.
Image file size: LinkedIn caches aggressively. If you update your og:image, LinkedIn may serve the old one for days. Use the LinkedIn Post Inspector to force a refresh.
Description visibility: LinkedIn often shows only the title and image, not the description. Don't rely on og:description for LinkedIn.
Image URL: LinkedIn won't follow URL redirects on og:image. Use the final direct URL.
HTTPS required: og:image must be HTTPS. HTTP URLs are silently dropped.

Discord, Slack, and iMessage

All three primarily use Open Graph. Specifics:

Discord: shows og:title, og:description, og:image. Also respects theme-color meta tag for the left border accent color.
Slack: shows og:title, og:description, og:image. If og:site_name is set, shows it above the card. Truncates descriptions around 200 chars.
iMessage: caches aggressively and rarely shows descriptions. The image and title are what matter. iMessage requires the og:image to be under 3 MB.

Article-type Open Graph

If your page is a blog post or news article, add these on top of the base tags. They power richer previews on Facebook and inform Google Discover:

<meta property="og:type" content="article" />
<meta property="article:published_time" content="2026-04-16T08:00:00Z" />
<meta property="article:modified_time" content="2026-04-16T08:00:00Z" />
<meta property="article:author" content="Jane Doe" />
<meta property="article:section" content="SEO" />
<meta property="article:tag" content="meta tags" />
<meta property="article:tag" content="open graph" />

Debugging broken previews

When a link doesn't render right, the problem is almost always one of these five:

Relative og:image URL. Must be absolute: https://example.com/og.png, not /og.png.
og:image behind auth or redirects. Social crawlers don't follow redirects or log in.
Stale cache. Run the platform's debugger to force a re-scrape (Facebook Sharing Debugger, Twitter Card Validator, LinkedIn Post Inspector).
Wrong image aspect ratio. Must be 1.91:1 for large cards.
Meta tags outside <head>. If your framework renders them below the fold, crawlers may not see them.

Copy-paste template for any site

<!-- Primary -->
<title>Your Page Title — 50-60 chars</title>
<meta name="description" content="140-160 char description with primary keyword." />
<link rel="canonical" href="https://example.com/page" />

<!-- Open Graph -->
<meta property="og:title" content="Your Page Title" />
<meta property="og:description" content="140-200 char social description." />
<meta property="og:image" content="https://example.com/og-image.png" />
<meta property="og:url" content="https://example.com/page" />
<meta property="og:type" content="website" />
<meta property="og:site_name" content="Your Brand" />
<meta property="og:locale" content="en_US" />

<!-- Twitter -->
<meta name="twitter:card" content="summary_large_image" />
<meta name="twitter:title" content="Your Page Title" />
<meta name="twitter:description" content="Description for Twitter." />
<meta name="twitter:image" content="https://example.com/og-image.png" />
<meta name="twitter:site" content="@yourbrand" />

Drop that in, fill in the blanks, and you've covered every platform that matters.

Test your Open Graph tags in 5 seconds

Paste your URL and we'll render exactly how your link will appear on Google, Twitter/X, Facebook, and LinkedIn — plus flag missing tags with copy-paste fixes.

Preview my link →

← Meta Tag Length in 2026

Complete SEO Meta Tag Checklist for 2026 →