Open Graph Tags — What They Do and How to Set Them Correctly

Open Graph tags are <meta> elements that describe a page for previews when it is shared: title, description, image. This guide shows how to set them correctly and separates what is documented from what is not known.

What are Open Graph tags?

Open Graph (OG) tags are <meta> elements in your HTML <head>, documented at ogp.me. They let you define the title, description, image, and type of a page explicitly. Services that support the protocol — social networks and messaging apps, for example — can use these values for the preview instead of guessing from the page content.

Which tags does the protocol define?

ogp.me describes the core properties as follows:

• og:title — the title of the page as it should appear in the preview.
• og:description — “a one to two sentence description”.
• og:image — the URL of an image that represents the page.
• og:type — the type of the page, e.g. article or website. According to ogp.me, a page without a type “should be treated as og:type website”.
• og:url — the canonical URL, which ogp.me says is used as the page’s “permanent ID”.
• og:site_name (optional) — the name of the overall site the page belongs to.

Why set Open Graph tags — and what do they do for AI?

For sharing: this is what the protocol is for. Platforms that read OG tags show your title, description and image instead of making their own choice.

For Google: Google lists “content in og:title meta tags” among the sources it uses to determine title links in search results, alongside the <title> element, headings and other text. For site names, Google’s documentation says its system “will also consider content in og:site_name”. In both cases OG is one source among several, not a guarantee.

For ChatGPT, Claude and Perplexity: we do not know. There is no study on whether these assistants read OG tags, display them, or use them when citing a page. The only available study on metadata concerns JSON-LD: there, ChatGPT and Claude did not see anything that was not also in the visible text. Whether meta tags behave the same way is open.

The practical consequence: treat OG tags as a preview for sharing. What a reader — or an AI assistant — should learn about the page belongs in the visible text: a clear <h1>, a first paragraph that summarises the page, the author and the date.

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

1. Add the five core OG tags inside the <head> of every page — not just the homepage.
2. Write a unique og:title per page; do not use your site name as the title on every page. ogp.me sets no length limit — each platform decides how much it shows.
3. Write a unique og:description per page — according to ogp.me, one to two sentences that summarise the page.
4. Upload the image to a permanent, publicly accessible URL and state its size with og:image:width and og:image:height. ogp.me sets no minimum size; check the requirements of the platforms that matter to you.
5. Set og:type to article for blog posts and guides and to website for the homepage and category pages.
6. Set og:url to the canonical URL — the same value as your <link rel="canonical"> tag.
7. Make sure title and description say the same as the visible <h1> and the first paragraph.
8. Check the result with the Facebook Sharing Debugger, which shows which OG values a platform reads from your page.

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

• Information only in meta tags, not visible on the page: author, date or a summary that appears only in OG tags is invisible to readers. For JSON-LD it is documented that ChatGPT and Claude do not see such information; for meta tags it has not been tested. Put it in the visible text.
• Meta tags differ from the visible text: if og:title or og:description says something different from the <h1> and the first paragraph, the page tells two stories. In the study above, Gemini Pro picked an outdated answer from FAQ markup when markup and text contradicted each other — that was JSON-LD, not OG, but the lesson is the same: keep one version.
• Missing og:image: you leave the choice of preview image to the platform — or get no image at all.
• Same OG title on every page: shared links to different pages look identical in the preview.
• Image hosted behind authentication: any service that builds a preview must be able to load the image without a login. Use a public URL.
• og:url differs from canonical: ogp.me defines og:url as the canonical URL and permanent ID of the page. Two different values contradict each other.
• No og:type: according to ogp.me, the page is then treated as website; the article:* properties (publication date, author) belong to the article type.

Official sources

• Open Graph Protocol — ogp.me (official specification)
• Rick Ramos — Schema markup gives AI assistants nothing plain text doesn’t (October 14, 2026)
• Google Search Central — Title links
• Google Search Central — Site names