Open Graph Tags for AI — Titles, Descriptions & Images

Open Graph tags were designed for social media previews, but AI systems have adopted them as a primary source for page metadata. When ChatGPT, Claude or Perplexity summarises a shared link, OG tags are often the first data they read.

TL;DR: Add og:title, og:description, og:image, og:type, and og:url to every page. Keep titles under 70 characters, descriptions under 200. Always include an image sized at least 1200 × 630 pixels.

What are Open Graph tags?

Open Graph (OG) tags are <meta> elements in your HTML <head>, introduced by Facebook in 2010 and standardised at ogp.me. They let you explicitly define the title, description, image, and type of a page so that any system fetching the URL — social networks, messaging apps, and AI assistants — shows a consistent, curated preview rather than guessing from the page content.

Which OG tags do AI systems read?

The five tags most commonly used by AI systems when summarising or citing a URL are listed below, in order of importance.

og:title — The primary label AI systems attach to your content. Used verbatim in citations by Perplexity and ChatGPT.
og:description — A one- to two-sentence summary. Shown as the excerpt when AI displays source cards.
og:image — The preview image. Claude and ChatGPT display this in link cards; Perplexity uses it in the sources panel.
og:type — Signals the content type (article, website, product). AI systems use this to contextualise how to present the page.
og:url — The canonical URL. Used to deduplicate references when the same content appears at multiple URLs.

How does ChatGPT use OG data?

When a user shares a URL in ChatGPT or uses the browsing feature, the system fetches the page and extracts OG metadata as the first parsing step, before reading the body text. og:title becomes the document label; og:description is used as the introductory summary; og:image appears in the link card preview. If these tags are absent, ChatGPT falls back to the HTML <title> tag and the first paragraph of body text, which is often less accurate.

How does Claude use OG data?

Claude reads OG tags when a URL is supplied in a conversation. The og:title and og:description values are used to populate the source reference in Claude's answer, making them the primary attribution labels a user sees when Claude cites your page.

Step-by-step — how to implement OG tags correctly

Add all five core OG tags inside the <head> of every page — not just the homepage.
Write a unique og:title per page (max 70 characters); do not reuse your site name on every page.
Write a unique og:description per page (max 200 characters); make it a complete sentence that summarises the page.
Upload an image to a permanent, publicly accessible URL. Minimum size: 1200 × 630 px; preferred format: JPEG or PNG.
Set og:type to article for blog posts and guides; product for product pages; website for the homepage and category pages.
Set og:url to the canonical URL — the same value as your <link rel="canonical"> tag.
Validate with the Facebook Sharing Debugger or the Twitter Card Validator to verify AI crawlers will see clean data.

Code example — complete OG tag set in <head>

<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">

  <title>Your Page Title — Site Name</title>
  <meta name="description" content="A concise summary of what this page covers (up to 160 characters).">
  <link rel="canonical" href="https://example.com/your-page">

  <!-- Open Graph core tags -->
  <meta property="og:title" content="Your Page Title — Site Name">
  <meta property="og:description" content="A concise summary of what this page covers, written as a complete sentence.">
  <meta property="og:image" content="https://example.com/images/your-page-og.jpg">
  <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">
  <meta property="og:type" content="article">
  <meta property="og:url" content="https://example.com/your-page">
  <meta property="og:site_name" content="Site Name">

  <!-- Article-specific OG tags (for blog posts and guides) -->
  <meta property="article:published_time" content="2026-04-16T00:00:00Z">
  <meta property="article:modified_time" content="2026-04-16T00:00:00Z">
  <meta property="article:author" content="https://example.com/author/your-name">
</head>

Common mistakes to avoid

Missing og:image: Without an image, AI link cards are blank or show a placeholder — reducing click-through and citation visibility.
Same OG title on every page: Using your site name as the title for every page makes individual pages unidentifiable in AI citation lists.
Image too small: Images below 600 × 315 pixels are often rejected by AI preview renderers; always use 1200 × 630 or larger.
Image hosted on a CDN with auth: AI crawlers cannot fetch images behind authentication. Use a public, no-auth URL.
og:url differs from canonical: If og:url and rel="canonical" point to different URLs, AI systems may create duplicate entries for the same page.
No og:type: Without a type, AI systems default to website for all pages, losing article-specific context.

Official sources

Test your website now — free AI Visibility Score Up to 19 checks in under 30 seconds