What Is Open Graph? A Practical Guide to OG Meta Tags

When someone shares a webpage in a chat or social feed, the receiving app may fetch that URL and create a preview containing a title, description, image and site identity. Open Graph provides a common set of properties that publishers can place in the page's HTML head to describe that content.

The four basic properties

• og:title: the title that should represent the shared object.
• og:type: the kind of object, such as website or article.
• og:image: the image URL that represents the content.
• og:url: the canonical URL used as the object's permanent identifier.

Useful additional properties

Publishers commonly add og:description and og:site_name. Image metadata can include width, height, MIME type and alt text. The protocol also supports locale and media properties for richer content types.

<meta property="og:title" content="A clear page title" />
<meta property="og:type" content="website" />
<meta property="og:url" content="https://example.com/page" />
<meta property="og:image" content="https://example.com/share.jpg" />
<meta property="og:description" content="A concise summary of the page." />
<meta property="og:site_name" content="Example" />

Open Graph and search SEO are related, but not interchangeable

Open Graph primarily describes content for sharing and rich link previews. Search engines use many other signals and page elements to understand and present a result. Adding OG tags does not guarantee indexing, rich results or higher rankings. A useful page still needs accessible content, relevant titles, internal links and a good user experience.

Open Graph and Twitter Cards

X supports its own twitter: metadata, including twitter:card. Some values can fall back to equivalent Open Graph fields, but explicit Twitter Card metadata makes the intended card type clear. Other services can interpret Open Graph values differently.

When should you test your tags?

• After launching a new page or route.
• After changing the social image or page title.
• When links show missing or outdated previews.
• When moving a site, changing canonical URLs or changing a CDN.