What are OG Images?

Article

OG Meta Tags: The Complete Guide

What's actually inside your <head> that controls how links look when shared — tag by tag, with code you can copy.

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: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. 

<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). Should match your <link rel="canonical"> tag. Platforms use this to consolidate share counts — all variations point to 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" />

There's also product for e-commerce, but it's rarely used. Most sites only need website and article. 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. In a visual feed, that's invisible. Links with images get 2-3x more engagement.

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 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.

Related Resources

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?

53a7a56d5f9ef9ae2c3ecf0fc570cac05f7f04d9