What Are Open Graph Tags?

Open Graph is a protocol Facebook announced in 2010 that lets any web page become a rich "object" in a social graph. The core idea was simple: add a handful of HTML meta tags to your page's <head> and Facebook would use them to build a proper link card instead of guessing.

The tags look like this:

<meta property="og:title" content="My Amazing Article">
<meta property="og:description" content="A short description of the article.">
<meta property="og:image" content="https://example.com/og-image.png">
<meta property="og:url" content="https://example.com/my-amazing-article">

Notice the property attribute, not name. That's the first thing developers get wrong. Standard meta tags use name; OG tags use property. If you use name="og:title", some platforms will still read it, but others won't.

The protocol spread fast. LinkedIn, Pinterest, Twitter, WhatsApp, iMessage, Slack, Discord — they all adopted OG tags as the standard way to read link metadata. Today, putting OG tags on your page is as fundamental as setting a <title>.

Facebook LinkedIn Twitter / X Slack

All of these read og: tags when someone pastes your URL.

ℹ️
Property vs name: OG tags always use property="og:...". Twitter Card tags use name="twitter:...". This distinction matters — mixing them up is one of the most common reasons tags are silently ignored.

The Core Four OG Tags

Every page should have at minimum these four:

<!-- Required for every page -->
<meta property="og:type"        content="website">
<meta property="og:title"       content="Your Page Title">
<meta property="og:description" content="One or two sentences about this page.">
<meta property="og:image"       content="https://example.com/og-image.png">
<meta property="og:url"         content="https://example.com/your-page">

og:type defaults to website for most pages. og:title should be your page's social-facing title — it can differ slightly from your HTML <title> tag. og:url should be the canonical URL, exactly matching your <link rel="canonical"> tag.

The og:image — The Tag That Actually Makes the Difference

Of all the OG tags, og:image has the most impact on click-through rates. A good share image can double the engagement on a post. A missing or broken one drops it off a cliff.

Image specifications by platform

PlatformIdeal sizeMin sizeAspect ratioMax file size
Facebook1200×630 px200×200 px1.91:18 MB
Twitter (large)1200×628 px300×157 px1.91:15 MB
LinkedIn1200×627 px200×200 px1.91:15 MB
WhatsApp1200×630 px300×200 pxAny—
Slack1200×630 px150×150 pxAny—

The practical answer: make one 1200×630 px image and it works everywhere. Provide explicit width and height tags alongside it so platforms don't need to download the image just to know its dimensions:

<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="Alt text for screen readers">
<meta property="og:image:type"   content="image/png">
⚠️
og:image must be an absolute URL. Relative paths like /images/og.png won't work — platforms fetch your image server-side and need the full URL including the protocol and domain. https://example.com/images/og.png is correct.

What to put in the image

Your OG image is essentially an ad for your link. Some proven approaches:

  • Article title in large text on a branded background — works for blog posts
  • Product screenshot or demo — works for tools and apps
  • Bold stat or headline — works for data-heavy pages
  • Your site logo + article category — minimal but consistent across all posts

Avoid putting important content in the corners or very bottom — Facebook and some platforms overlay UI elements there. Keep a safe zone of at least 50–60 pixels from each edge.

The og:type Property and What It Unlocks

The og:type tag tells platforms what kind of content your page represents. The default is website, but setting it to article unlocks a whole extra set of properties:

Type valueUsed forExtra properties unlocked
websiteHomepages, general pagesNone
articleBlog posts, news, documentationarticle:published_time, article:author, article:section, article:tag
productE-commerce product pagesUsed with Pinterest rich pins
profileUser / author profile pagesprofile:first_name, profile:last_name, profile:username
video.otherVideo pagesog:video, og:video:width, og:video:height, og:video:type
music.songMusic tracksMusic-specific OG properties

Article Properties — the Hidden SEO Boost

When you set og:type to article, you can add article-specific metadata that Facebook and some news aggregators actually parse. This is especially useful for content sites and blogs:

<!-- Set type to article first -->
<meta property="og:type" content="article">

<!-- Then add article-specific properties -->
<meta property="article:published_time" content="2026-06-06T10:00:00Z">
<meta property="article:modified_time"  content="2026-06-06T12:00:00Z">
<meta property="article:author"         content="Jane Smith">
<meta property="article:section"        content="Technology">
<!-- One meta element per tag -->
<meta property="article:tag"           content="SEO">
<meta property="article:tag"           content="Open Graph">
<meta property="article:tag"           content="Meta Tags">

Note that article:tag is one element per tag, not a comma-separated list. Dates should be ISO 8601 format. The article:author can be either a plain text name or a URL pointing to the author's profile.

Twitter Cards vs Open Graph

Twitter/X introduced its own tagging system called Twitter Cards, which uses name attributes instead of property. The key insight is that Twitter falls back to OG tags for title, description, and image if twitter-specific tags aren't present — but you need twitter:card at minimum to control the card layout.

Twitter Card types

Card typeLayoutBest for
summary_large_imageFull-width image above contentBlog posts, news, marketing pages
summarySmall thumbnail beside textGeneral pages, profiles, homepages
appApp download card with ratingsMobile app pages
playerEmbedded video/audio playerMedia pages (requires approval)

For most content, summary_large_image is what you want. The full set of Twitter Card tags looks like this:

<!-- Twitter Card -->
<meta name="twitter:card"        content="summary_large_image">
<meta name="twitter:site"        content="@yoursite">
<meta name="twitter:creator"     content="@authorhandle">
<!-- These are optional — Twitter falls back to og: if omitted -->
<meta name="twitter:title"       content="Override title for Twitter">
<meta name="twitter:description" content="Override description for Twitter">
<meta name="twitter:image"       content="https://example.com/twitter-image.png">
<meta name="twitter:image:alt"   content="Alt text for the image">

A Complete Production Head Section

Here's everything together in the order you should place it, for an article page:

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>How Open Graph Tags Work | My Blog</title>
  <meta name="description" content="A 160-char SEO description for search results.">
  <link rel="canonical" href="https://example.com/blog/og-tags">

  <!-- Open Graph -->
  <meta property="og:type"             content="article">
  <meta property="og:title"            content="How Open Graph Tags Work">
  <meta property="og:description"     content="150–200 char description for social cards.">
  <meta property="og:url"              content="https://example.com/blog/og-tags">
  <meta property="og:site_name"        content="My Blog">
  <meta property="og:locale"           content="en_US">
  <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="Alt text for the image">

  <!-- Article properties -->
  <meta property="article:published_time" content="2026-06-06T10:00:00Z">
  <meta property="article:author"          content="Jane Smith">
  <meta property="article:tag"             content="SEO">
  <meta property="article:tag"             content="Open Graph">

  <!-- Twitter Card -->
  <meta name="twitter:card"    content="summary_large_image">
  <meta name="twitter:site"    content="@myblog">
</head>

Generate your OG tags right now

Fill in a form, see live Facebook/Twitter/LinkedIn previews, copy the HTML in one click.

OG Tag Generator →

Debugging OG Tags — Why Your Change Isn't Showing

You've updated your tags, deployed, pasted the URL on Facebook — and the old image is still there. This is almost always a caching problem. Social platforms crawl your page and cache the result heavily. After a change, you have to force each platform to re-scrape your URL.

PlatformDebugger / InspectorHow to refresh
Facebookdevelopers.facebook.com/tools/debugPaste URL, click "Scrape Again" (may need to do it 2–3 times)
LinkedInlinkedin.com/post-inspectorPaste URL, click Inspect — it fetches fresh data immediately
Twitter/Xcards-dev.twitter.com/validatorPaste URL, click "Preview Card" to re-fetch
Pinterestdevelopers.pinterest.com/tools/url-debuggerPaste URL and submit
💡
Tip: The Facebook Sharing Debugger is the most useful — it shows you exactly what OG tags Facebook read, any warnings about your tags, and the cached data. If your tags look correct in Facebook's debugger but the wrong content is still showing in posts, click "Scrape Again" and wait a few minutes before testing a new share.

Common mistakes that break OG tags

  • Using relative URLs for og:image — platforms fetch images server-side and need absolute URLs with https://
  • Using name instead of property on OG tags — silently ignored by many platforms
  • Image behind login or IP restriction — platforms can't fetch private images
  • og:url doesn't match the canonical URL — causes deduplication issues in Facebook's object graph
  • No og:image at all — platforms fall back to the first <img> on the page, which is usually your logo or a tiny icon
  • Image too small — anything smaller than 600×315 on Facebook won't render as a large card
  • Tags in the body, not the head — some platforms stop reading meta tags once they encounter the </head> tag
  • Duplicate og:title tags — some platforms take the first one, others take the last; be explicit and have only one

Video and Audio OG Properties

If your page features embedded video or audio content, you can add og:video and og:audio tags. These are used by Facebook for native video previews and by some platforms to render inline playback.

<!-- Video OG -->
<meta property="og:video"        content="https://example.com/video.mp4">
<meta property="og:video:width"  content="1280">
<meta property="og:video:height" content="720">
<meta property="og:video:type"   content="video/mp4">

<!-- Audio OG -->
<meta property="og:audio"      content="https://example.com/podcast.mp3">
<meta property="og:audio:type" content="audio/mpeg">

In practice, native video OG rendering is only available to publishers approved by Facebook for Instant Articles or video distribution. For most sites, these tags are a nice signal but won't change the visual rendering.

Setting OG Tags in CMS Platforms

You don't always edit HTML directly. Here's how OG tags work in the most common platforms:

WordPress (Yoast SEO / Rank Math)

Yoast SEO and Rank Math both auto-generate OG tags from your post title, excerpt, and featured image. Go to the post editor → SEO plugin panel → Social tab to set custom OG title, description, and image that differ from the SEO fields. The featured image is used as og:image automatically.

Next.js App Router

// app/blog/og-tags/page.tsx
export const metadata = {
  openGraph: {
    title: 'How Open Graph Tags Work',
    description: 'Your social share description here.',
    url: 'https://example.com/blog/og-tags',
    siteName: 'My Blog',
    images: [{ url: 'https://example.com/og.png', width: 1200, height: 630, alt: 'Alt text' }],
    type: 'article',
    publishedTime: '2026-06-06T10:00:00Z',
    authors: ['Jane Smith'],
  },
  twitter: {
    card: 'summary_large_image',
    site: '@myblog',
  },
};

Shopify

Edit your theme's theme.liquid. Shopify exposes page_title, page_description, and page.featured_image objects you can use in the <head>:

<meta property="og:title"       content="{{ page_title }}">
<meta property="og:description" content="{{ page_description | escape }}">
{% if page.featured_image %}
<meta property="og:image" content="https:{{ page.featured_image | img_url: '1200x630' }}">
{% endif %}

OG Tags vs SEO Meta Tags — What's the Difference?

A common point of confusion: OG tags and standard SEO meta tags exist side by side and serve different audiences.

TagRead byAffects
<title>Google, Bing, browsersSearch result title, browser tab
meta name="description"Google, BingSearch result snippet text
meta property="og:title"Facebook, LinkedIn, WhatsApp, SlackSocial share card title
meta property="og:description"Facebook, LinkedIn, WhatsApp, SlackSocial share card description
meta name="twitter:card"Twitter/XTwitter link card layout

You need all of them. Google doesn't look at OG tags for ranking (though it may use them as signals for Knowledge Graph). Facebook doesn't look at the standard meta description. Set both sets of tags independently, even if the content is identical — it gives each platform exactly what it expects.

💡
Pro tip: OG titles can be slightly more conversational or punchy than your SEO title. The SEO title needs to fit in ~60 characters for Google. The OG title has a bit more flexibility and should be written for a social sharing context — someone scrolling a feed, not searching a query.

Quick Audit Checklist

Before shipping any page, run through this list:

  • ✅ og:title set with property attribute (not name)
  • ✅ og:description between 150–200 characters
  • ✅ og:image is an absolute URL (starts with https://)
  • ✅ og:image:width and og:image:height present
  • ✅ og:image:alt present for accessibility
  • ✅ og:url matches canonical URL
  • ✅ og:type correct — article for posts, website for general pages
  • ✅ twitter:card set (at minimum)
  • ✅ Tested in Facebook Sharing Debugger after deploy
  • ✅ Tested in LinkedIn Post Inspector
🔧
The Tool Empire Team
We build free, browser-based tools for developers and creators. No signup, no installs, no nonsense — just tools that work.