Open Graph: Protocol, Meta Tags and Example

Open Graph is a protocol that defines how a web page is displayed when it is shared on social networks or in messaging apps. It was originally created at Facebook and uses meta tags with the property attribute in the page’s <head>.

How does Open Graph work?

The specification at ogp.me lists four required properties. og:title is the title of the object, og:type its type, such as website or article, og:image the URL of an image, and og:url the canonical URL that serves as its permanent ID. Optional properties include og:description, og:site_name, og:locale, og:audio and og:video. Images can carry extra properties such as og:image:width, og:image:height and og:image:alt. If a property has several values, for example several images, the tag is simply repeated.

Platforms read these tags and build the link preview with image, title and description. Meta’s sharing guide lists og:url, og:title, og:description and og:image as basic tags and recommends that og:url be the plain canonical URL without session or tracking parameters. Without Open Graph tags, Facebook’s crawler guesses title, description and preview image with its own heuristics.

Open Graph is not a documented Google ranking signal. Google mentions it in its video documentation as one possible source of video metadata. A better preview can raise clicks on shared links (opinion).

Example

HTML

<head>
  <meta property="og:title" content="Canonical tag explained">
  <meta property="og:type" content="article">
  <meta property="og:image" content="https://www.example.com/images/canonical.png">
  <meta property="og:url" content="https://www.example.com/glossary/canonical-tag/">
  <meta property="og:description" content="How the canonical tag works.">
</head>

Common mistakes

og:url differs from the canonical URL or carries tracking parameters.
The image is too small or sits behind a login and cannot be fetched.
An old preview stays in the platform’s cache. Meta caches images by URL and updates them only when the URL changes. The Sharing Debugger shows how Facebook’s crawler reads the page.

FAQ

Is Open Graph free? Yes. The specification is published under the Open Web Foundation Agreement 0.9, and anyone can add the tags to a page.

What is an OG title? The value of og:title. It appears as the headline of the link preview and can differ from the page’s title element.

What is an OG image? The image from og:image that shows in the preview.

Sources

The Open Graph protocologp.me
Sharing webmasters guide – Meta for Developersdevelopers.facebook.com
Video SEO best practices (Open Graph as video metadata) – Google Search Centraldevelopers.google.com

Last updated: October 7, 2026