Open Graph protocol

Last updated 17 June 2026 4 min

Open Graph protocol (OG) tags control how a page is presented when shared on social media — Facebook, LinkedIn, WhatsApp, etc. When a URL is posted on a social platform, the preview that appears with a title, image, and description is Open Graph at work.

Originally developed by Facebook in 2010, it has become the de facto standard for social sharing metadata.

Implementing OG tags

Open Graph metadata sits in the <head> of an HTML document, with the property attribute prefixed by og::

<meta property="og:title" content="The Title of the Page">
<meta property="og:description" content="A short summary.">
<meta property="og:image" content="https://example.com/share-image.jpg">
<meta property="og:url" content="https://example.com/this-page">
<meta property="og:type" content="article">
<meta property="og:site_name" content="Brand Name">
<meta property="og:locale" content="en_AU">

Essential tags

`og:title`

The headline that appears on the share card. Often similar to the <title> tag but may be optimised for social context, and be more punchy.

`og:description`

The summary that appears beneath the title. This is around 150-200 characters, depending on the particular social platform.

`og:image`

The image displayed on the share card. Arguably, the most important tag for click-through rate.

`og:url`

The canonical URL for the page being shared. When users share variants of the URL (with tracking parameters, etc.), platforms use this to consolidate them.

`og:type`

Categorises the content. Common values:

website — generic pages.
article — blog posts, news articles.
product — e-commerce product pages.
video.movie, book, music.song — specific content types with their own extended properties.

`og:site_name`

The brand or publication name.

`og:locale`

Language and region of the content (e.g., en_AU, en_GB, fr_FR). Defaults to en_US if not set.

Twitter Card tags

Twitter has its own metadata, but falls back to OG tags when its own are absent. The minimum useful set:

<meta name="twitter:card" content="summary_large_image">
<meta name="twitter:site" content="@yourbrand">
<meta name="twitter:creator" content="@authorhandle">

Card types:

summary — small square thumbnail with text.
summary_large_image — full-width image card. Best for most content.
app, player — specialised cards for apps and embedded media.

If twitter:title, twitter:description, and twitter:image aren't set, Twitter uses the OG equivalents.

Why Open Graph matters

Click-through rate

A well-designed share card with a strong image and compelling copy will dramatically outperform a plain link. On most platforms, many users decide whether to click based entirely on the preview.

Consistency and quality

Without OG tags, platforms guess what to show — often pulling the wrong image or no image at all. Setting them explicitly puts the brand in control.

Indirect SEO impact

Open Graph is not a direct ranking signal, but the social signals it enables (shares, clicks, brand mentions) feed into broader signals that correlate with rankings.

Per-page customisation

The most common mistake is setting one OG image site-wide (usually the logo) and applying it to every page. The result: every share looks identical, regardless of content. Instead:

Articles: a unique image per post, ideally featuring the article topic.
Products: the primary product image, sized correctly.
Categories and landing pages: a curated representative image.
Default fallback: a branded image used only when no specific image is available.

Common mistakes

Relative image URLs — must be absolute (https://example.com/image.jpg).
Wrong image dimensions — too small (looks pixelated) or wrong aspect ratio (gets cropped).
A sitewide image — every share looks identical.
HTTP image URLs on HTTPS pages — mixed content; some platforms refuse to load.
Missing og:url — share cards may end up using URLs with tracking parameters instead of the canonical URL.
Setting them in JavaScript — this is becoming less of an issue, but some crawlers don't execute JavaScript; OG tags should be in the server-rendered HTML.

Disclaimer: All information contained herein is for informational purposes only. It is not advice or instructional.