Open Graph Tags: How to Control How Your Links Look on Social Media

What is the Open Graph protocol?

Open Graph is a protocol originally created by Facebook in 2010 that lets you define structured metadata about a webpage — its title, description, image, type, and more. When a platform (LinkedIn, Twitter, Telegram, Slack, iMessage) unfurls a URL into a rich preview card, it reads these tags.

Without Open Graph tags, platforms fall back to guessing: they scrape your page title, pick an image at random from the page, and generate a description from the first paragraph of text. The result is almost always wrong.

The 4 essential Open Graph tags

Every page that could be shared needs at minimum these four:

<meta property="og:title" content="Your Page Title Here" />
<meta property="og:description" content="A compelling 1–2 sentence description." />
<meta property="og:image" content="https://yourdomain.com/og/page-image.jpg" />
<meta property="og:url" content="https://yourdomain.com/page" />

Additional Open Graph tags worth adding

<meta property="og:type" content="website" />           <!-- or "article" for blog posts -->
<meta property="og:site_name" content="Your Brand Name" />
<meta property="og:locale" content="en_US" />
<meta property="og:image:width" content="1200" />
<meta property="og:image:height" content="630" />
<meta property="og:image:alt" content="Descriptive alt text for the image" />

The og:type tag matters for structured treatment. Use article for blog posts and news content — it unlocks additional tags like article:published_time and article:author.

Image dimensions help platforms render the card without waiting to fetch and measure the image — reducing the chance of a broken or incorrectly cropped preview.

Twitter / X Cards

Twitter (now X) has its own card spec that supplements Open Graph. If you include Open Graph tags, Twitter will use them as a fallback — but adding Twitter-specific tags gives you more control:

<meta name="twitter:card" content="summary_large_image" />
<meta name="twitter:site" content="@yourusername" />
<meta name="twitter:title" content="Your Page Title" />
<meta name="twitter:description" content="A compelling description." />
<meta name="twitter:image" content="https://yourdomain.com/og/image.jpg" />
<meta name="twitter:image:alt" content="What's in the image" />

Platform-specific image requirements

Use 1200×630px as your standard size — it satisfies all platforms. Keep images under 1 MB for fast loading (most social platforms cache and re-serve the image, but the initial fetch from your server matters).

Dynamic OG images

For sites with many pages (blogs, documentation, product listings), generating a unique OG image per page manually doesn't scale. There are two practical approaches:

• Build-time generation — tools like @vercel/og (Next.js) or Astro's image integration let you render a React/HTML template to a PNG at build time with the page title, category, and date baked in.
• On-demand API — a screenshot API captures a rendered HTML page as an image on request. Pass the page title as a URL parameter, render it through a designed template, return the PNG. This works for any framework and any hosting setup.

Common Open Graph mistakes

• Relative image URLs — og:image must be an absolute URL including the protocol and domain. /images/hero.jpg will not work — it must be https://yourdomain.com/images/hero.jpg.
• Wrong image dimensions — images that are too small (under 200×200px) or the wrong aspect ratio will either get rejected or display awkwardly cropped.
• Stale cached previews — once a platform fetches your OG tags, it caches the result for hours or days. After updating tags, use platform debug tools to force a re-fetch: LinkedIn Post Inspector, Facebook Sharing Debugger, Twitter Card Validator.
• Missing og:type — without it, platforms default to "website" which may not be ideal for articles or products.
• Duplicate OG tags — having two og:image tags confuses parsers. If you're using a CMS or template system, check for double-injected meta tags.

How to audit your OG tags

Check any page's meta tags — including Open Graph and Twitter Card output — using our Meta Tag Analyzer. It fetches the live page, extracts all meta tags, grades them, and shows exactly what each social platform will see when previewing your URL.