An OG link is a normal URL with Open Graph meta tags on the page. The tags tell social platforms what title, description, image, and canonical URL to show when someone shares the link.

OG Meta Tags: The Complete Guide

Q: What are OG meta tags?

OG meta tags are HTML elements in your page's that control how your link looks when shared on social media — the title, description, image, and URL shown in the preview card. Every major platform reads them: Facebook, Twitter/X, LinkedIn, Slack, Discord, WhatsApp, and more.

Q: What is the og:image tag?

The og:image tag is the Open Graph meta tag that sets the image for a social link preview. Use an absolute HTTPS image URL, then add og:image:width, og:image:height, and og:image:alt when you can.

Q: Which OG tags are required?

The Open Graph spec requires og:title, og:type, og:image, and og:url. og:description and og:site_name are optional but recommended.

Q: What is the difference between og:title and the HTML title tag?

The HTML tag shows in browser tabs and search results. og:title shows in social media preview cards. They can be different — og:title is often shorter since it's competing for attention in a social feed, not a search results page.

What Are OG Meta Tags?

Share a link on Twitter, drop it in Slack, paste it in a group chat — a card pops up with a title, description, and image. Those come from OG meta tags: a handful of <meta> elements in your page's <head>.

Facebook created the Open Graph protocol in 2010. Every major platform adopted it — Twitter/X, LinkedIn, Slack, Discord, WhatsApp, Telegram, Reddit. Without these tags, platforms guess. They scrape whatever text and images they find, and the results are usually bad.

Here's the minimum set every page should have:

<head>
  <meta property="og:title" content="Your Page Title" />
  <meta property="og:description" content="A brief summary of the page." />
  <meta property="og:image" content="https://example.com/og.png" />
  <meta property="og:url" content="https://example.com/page" />
  <meta property="og:type" content="website" />
  <meta property="og:site_name" content="Example Site" />
</head>

New to Open Graph? Our introduction to OG images covers the big picture. This guide goes tag by tag.

OG Tag Reference

Every Open Graph tag you're likely to need, on one screen. "Required" means the Open Graph spec lists it as one of the four properties every page needs. Platforms still show a card when one is missing, but they have to guess that part.

Tag	What it controls	Status
og:titleRequired	The headline in the preview card e.g. Your Page Title	Required
og:typeRequired	The kind of content, such as website or article e.g. website	Required
og:imageRequired	The preview image, as an absolute URL e.g. https://example.com/og.png	Required
og:urlRequired	The canonical URL that shares are grouped under e.g. https://example.com/page	Required
og:descriptionRecommended	The summary below the title e.g. A brief summary of the page.	Recommended
og:site_nameRecommended	Your site or brand name, shown apart from the title e.g. Example Site	Recommended
og:image:width / og:image:heightRecommended	The image size in pixels e.g. 1200 / 630	Recommended
og:image:altRecommended when og:image is set	A text description of the image e.g. Description of the image	Recommended when og:image is set
og:localeOptional (defaults to en_US)	The language and region of the tags e.g. en_US	Optional (defaults to en_US)

On X, twitter:card sets the card layout. See Twitter/X Cards below.

What Is an OG Link?

An OG link is just a normal URL with Open Graph tags on the page. The link itself does not change. The page behind it tells Facebook, LinkedIn, Slack, Discord, WhatsApp, and other apps what preview card to show.

If someone says "fix the OG link", they usually mean one of these is wrong: og:title, og:description, og:image, or og:url. Check the page source first, then test the URL in an Open Graph debugger.

og:title

The headline in the preview card. This is different from your HTML <title> tag — that one shows in browser tabs and search results. og:title shows in social cards. They can be different, and often should be. Search titles tend to include the brand name ("OG Guide — MyOG.social"). Social titles work better short and direct ("OG Meta Tags: The Complete Guide").

Keep it under 60-70 characters. Facebook truncates around 65, X around 70.
Front-load the important words. The end gets cut off on mobile.
Skip the brand name here — og:site_name handles that separately.

og:description

The body text beneath the title in the preview card. Aim for 100-200 characters — enough to be useful, short enough that platforms don't truncate it.

This can differ from your HTML <meta name="description">. That one targets search snippets. og:description targets social feeds — different context, different expectations. Not a direct ranking factor, but better previews mean more clicks.

If it's missing, platforms fall back to the meta description or scrape the first paragraph of your page. Rarely ideal.

og:image

The most impactful tag. Social feeds are visual — the image is what makes someone stop scrolling. A link without an image is practically invisible.

The og:image tag is the image URL for your social preview card. Use a full HTTPS URL crawlers can fetch directly. No relative paths, no logged-in pages, no localhost.

<meta property="og:image" content="https://example.com/og.png" />
<meta property="og:image:width" content="1200" />
<meta property="og:image:height" content="630" />
<meta property="og:image:alt" content="Description of the image" />

1200 × 630 pixels is the standard (see the OG image size guide for platform-specific details). Include og:image:width and og:image:height so platforms can render the card without downloading the image first. og:image:alt is for accessibility — not all platforms display it, but it's the right thing to do.

The URL must be absolute: https://example.com/og.png, not /og.png.

Need an image? Our free OG Image Generator creates one from a template, or MyOG.social generates them automatically for every page.

og:url

The canonical URL for the content. Same page accessible with a trailing slash, without one, with UTM parameters, through a redirect? og:url tells platforms which one is the real URL.

Must be absolute (https://example.com/page, not /page). Use the clean URL, without session IDs, tracking parameters, or counters, and match your <link rel="canonical"> tag. Facebook groups likes and shares under the og:url value, so every variation counts toward one URL.

og:type

Tells platforms what kind of content this is. Default is website, which works for homepages, landing pages, product pages, tools. For blog posts and dated content, use article — it unlocks a few extra properties:

<meta property="og:type" content="article" />
<meta property="article:published_time" content="2026-01-15T00:00:00Z" />
<meta property="article:author" content="https://example.com/author" />

The spec also defines book, profile, and the music.* and video.* types. Most sites only need website and article. If you leave og:type out, Facebook treats the page as website. If in doubt, website.

og:site_name

Your brand name. Shows separately from og:title — usually above or below the title in smaller text. It's what lets platforms separate "who" from "what."

Use your brand name ("MyOG.social"), not the page title. Keep it the same across every page on your site.

Twitter/X Cards

X has its own card system alongside Open Graph. It reads OG tags as a fallback, but dedicated twitter: tags take priority when present.

<meta name="twitter:card" content="summary_large_image" />
<meta name="twitter:title" content="Your Page Title" />
<meta name="twitter:description" content="A brief summary." />
<meta name="twitter:image" content="https://example.com/og.png" />

twitter:card controls the layout — summary_large_image gives the full-width image card you want, summary gives a small square thumbnail. twitter:title, twitter:description, and twitter:image override their OG counterparts on X. If omitted, X falls back to OG tags.

In practice, most sites set both to the same values. The main reason to differ: a different image crop or shorter description for X's feed.

Common Mistakes

Relative image URLs

The most common one. Platforms fetch your OG image from their servers — /images/og.png means nothing to them. Full absolute URLs only.

<!-- Wrong: relative URL -->
<meta property="og:image" content="/images/og.png" />

<!-- Right: absolute URL -->
<meta property="og:image" content="https://example.com/images/og.png" />

Missing og:image entirely

No image means a plain text card, which is easy to scroll past in a visual feed. Some platforms grab whatever image they find on the page instead, which is often worse.

Image too small

Under 600 × 315 and Facebook gives you the small thumbnail treatment — a tiny square instead of a full-width card. Use at least 1200 × 630.

og:description too long

Facebook truncates around 120-200 characters, X around 200. If you need two paragraphs, it's too long.

Not testing after publishing

Platforms cache aggressively. After updating tags, check with our OG Preview Tool, then clear each platform's cache. The OG Image Testing Guide walks through the full debug workflow.

Quick Answers

What are OG meta tags?

HTML <meta> elements in your page's <head> that control how your link looks when shared on social media — the title, description, image, and URL in the preview card.

What is an OG link?

A regular URL with Open Graph tags on the page. The tags control the preview card that appears when the link is shared.

What is the og:image tag?

The og:image tag sets the image for the shared link preview. Use an absolute HTTPS URL and include width, height, and alt tags when possible.

Which OG tags are required?

The Open Graph spec requires og:title, og:type, og:image, and og:url. og:description and og:site_name are optional but recommended.

What is og:description?

A short summary (1-2 sentences, under 200 characters) that appears below the title in social preview cards. Can differ from your HTML meta description — different context, different copy.

What's the difference between og:title and the HTML title tag?

<title> shows in browser tabs and search results. og:title shows in social cards. They can be different — og:title is often shorter since it's competing for attention in a feed.

What happens if OG tags are missing?

Platforms scrape whatever text and images they find on the page. You get the wrong image, a truncated title, no description, or just a bare URL. Not a good look.

What are OG Images? — the pillar guide to Open Graph images
OG Image Size Guide — exact dimensions for every platform
OG Image Testing Guide — debug previews that aren't showing correctly
OG Preview Tool — see how your tags render on each platform
OG Image Generator — create a properly sized OG image for free
Bulk OG Checker — scan your whole site for missing tags
How to Add OG Images to WordPress — platform-specific setup guide
MyOG.social vs @vercel/og — compare OG image generation approaches

Skip the manual work

One meta tag and MyOG.social generates og:image for every page. Correctly sized, fast, no maintenance.

Already have an account?