You've spent time writing a great piece of content, hit publish, and shared the link on LinkedIn or Facebook — only to watch it appear as a blank card with no image, a truncated title that makes no sense out of context, and a description pulled from somewhere random on the page. It looks unprofessional, gets fewer clicks than it deserves, and undermines the credibility of the content before anyone's even read a word.

The culprit is almost always missing or misconfigured Open Graph tags — a set of HTML meta tags that control exactly how your pages appear when shared across social platforms. They take about ten minutes to implement correctly and can dramatically improve the performance of every link you share. Here's everything you need to know.

What Open Graph Tags Are

Open Graph (OG) is a protocol originally developed by Facebook that allows web pages to control how they appear when shared on social media. It's now used by virtually every major platform — Facebook, LinkedIn, Twitter/X, Slack, Discord, WhatsApp, iMessage, and many others — to build the preview card that appears when someone shares a link.

OG tags live in the <head> section of your HTML, alongside your regular meta tags. They look like this:

<meta property="og:title" content="Your Page Title Here" />
<meta property="og:description" content="A compelling description of what this page is about." />
<meta property="og:image" content="https://yourdomain.com/images/your-share-image.jpg" />
<meta property="og:url" content="https://yourdomain.com/your-page/" />
<meta property="og:type" content="article" />

When someone shares your URL, the social platform's crawler fetches your page, reads these tags, and uses them to build the preview card. Without OG tags, platforms fall back to guessing — pulling whatever title, description, and image they can find on the page, with often poor results.

The Four Tags You Can't Skip

The Open Graph specification includes dozens of optional properties, but four are essential for every page:

og:title — The title that appears in the preview card. This doesn't have to match your SEO title tag exactly, and often shouldn't. Your SEO title is optimized for search results and keyword placement; your OG title can be more conversational, benefit-focused, and curiosity-driven. A title that makes someone stop scrolling is doing its job.

og:description — The description beneath the title in the preview card. Aim for 2–3 sentences that clearly communicate the value of clicking. Unlike meta descriptions for search, OG descriptions are rarely truncated as aggressively, so you have a bit more room — but concise and compelling still wins.

og:image — The image displayed in the preview card. This is the single most important visual element in a social share, and the one most commonly missing or wrong. A well-chosen, correctly sized image can double the click-through rate of a shared link compared to a blank or mismatched image. More on image specifications below.

og:url — The canonical URL of the page being shared. This should be the clean, canonical version of the URL — no tracking parameters, no session IDs. Setting this explicitly prevents platforms from using a parameter-laden URL as the identifier for the shared content.

The og:image Specifications That Actually Matter

Getting the OG image right is where most implementations go wrong. The most important specifications:

  • Dimensions. The recommended size is 1200 × 630 pixels — a 1.91:1 aspect ratio. This renders cleanly across Facebook, LinkedIn, and Twitter/X without cropping or letterboxing. Images significantly smaller than this will appear blurry or display with borders on high-resolution screens.
  • File size. Keep OG images under 8MB, though in practice under 1MB is preferable for fast loading. Social platforms cache images, but a slow initial fetch can cause the image to not appear in some share contexts.
  • Format. JPG works universally. PNG works for images with transparency or text. Avoid WebP for OG images — not all social platform crawlers handle it reliably.
  • Absolute URL. The og:image value must be a full absolute URL including the protocol — https://yourdomain.com/images/share.jpg — not a relative path like /images/share.jpg. Social platform crawlers don't resolve relative URLs the way browsers do.
  • Text on images. If your OG image includes text (a headline, your brand name), keep it minimal and ensure it's legible when the image is displayed at smaller sizes on mobile. Text-heavy images that look fine on desktop become illegible in a small mobile preview card.
Social platforms cache aggressively: Once a URL has been shared, most platforms cache the OG data and won't automatically refresh it when you update the tags. Facebook provides a Sharing Debugger tool that lets you force a cache refresh. LinkedIn has a Post Inspector. If you've fixed your OG tags but the old preview is still showing up, you need to clear the platform's cache explicitly — changing the tags alone isn't enough.

Twitter/X Cards: The OG Companion

Twitter/X uses its own card system alongside Open Graph. The key tags:

<meta name="twitter:card" content="summary_large_image" />
<meta name="twitter:title" content="Your Title Here" />
<meta name="twitter:description" content="Your description here." />
<meta name="twitter:image" content="https://yourdomain.com/images/share.jpg" />

The twitter:card type determines the layout. summary_large_image displays a large image above the title and description — the format that earns the most engagement. summary shows a small thumbnail beside the text, which is less visually impactful but appropriate for content without a strong hero image.

Good news: Twitter/X falls back to Open Graph tags if its own Twitter Card tags are absent. So if you've already set your OG tags correctly, you only need to add twitter:card to specify the card type — the rest can be inherited. Adding explicit Twitter tags for title, description, and image gives you the option to customize the message for that specific platform.

OG Tags vs. SEO Meta Tags: Setting Them Independently

One of the most underused aspects of Open Graph is that your OG title and description can — and often should — be completely different from your SEO title and meta description.

Your SEO title is optimized for search results: keyword-forward, concise, fitting within pixel limits, written for someone who hasn't yet chosen to visit your page. Your OG title is optimized for social sharing: written for someone scrolling a feed who needs a reason to stop. These are different contexts with different reader psychology, and the best-performing content treats them differently.

A page about technical SEO audits might have an SEO title of "Technical SEO Audit: How to Find and Fix Hidden Ranking Problems" (keyword front-loaded, clear topic) and an OG title of "Your Website Has Hidden Problems Costing You Traffic — Here's How to Find Them" (curiosity-driven, benefit-focused, written for a social feed). Same page, same content, very different framing for a different context.

How to Check and Preview Your Open Graph Tags

The gap between what your CMS says your OG tags are and what social platforms actually read is often wider than expected. Plugin conflicts, caching layers, theme overrides, and JavaScript rendering can all affect what gets served in the <head>.

The Open Graph Preview tool fetches the live HTML of any URL and shows you exactly what OG tags are present — title, description, image, URL, type — along with a rendered preview of how the share card will appear. Check it on every important page before sharing, and run it on competitor pages to see how they're framing their content for social distribution.

For the full picture of how OG tags fit alongside your other meta tags — title tags, meta descriptions, robots directives, and canonical tags — the guide to meta tags and what Google actually uses covers the complete set. And if you're implementing schema markup alongside OG tags, the guide to schema markup and rich results explains how the two work together to control your appearance across both search and social.