# Open Graph protocol: every og: tag, with examples

> What Open Graph is, every og: and twitter: tag with an example, object types, arrays and structured properties, and how to check what a crawler reads.

Published 2026-11-04 · https://shareglint.com/en/open-graph

**Open Graph** is the set of `og:` meta tags in a page's `<head>` that tells social networks and messaging apps what the page is: its title, type, canonical URL and image. Facebook published it in 2010 at [ogp.me](https://ogp.me/); today almost every link-preview crawler reads it — LinkedIn, Slack, Discord, WhatsApp, iMessage, Telegram, Mastodon — to draw the card you see when a link is shared. Four tags are required: `og:title`, `og:type`, `og:image` and `og:url`. This page lists every tag the protocol defines, with an example of each, plus the `twitter:` tags X reads on top.

## A complete example

The set that works on every major platform, for a blog post:

```html
<head prefix="og: https://ogp.me/ns# article: https://ogp.me/ns/article#">
  <meta property="og:title" content="How we cut our image pipeline to 900 ms">
  <meta property="og:type" content="article">
  <meta property="og:url" content="https://example.com/blog/image-pipeline">
  <meta property="og:image" content="https://example.com/og/image-pipeline.png">
  <meta property="og:image:width" content="1200">
  <meta property="og:image:height" content="630">
  <meta property="og:image:alt" content="Title card: How we cut our image pipeline to 900 ms">
  <meta property="og:description" content="Moving rendering off the request path and caching by content hash.">
  <meta property="og:site_name" content="Example Engineering">
  <meta property="og:locale" content="en_US">
  <meta property="article:published_time" content="2026-11-04T09:00:00Z">
  <meta property="article:author" content="https://example.com/team/anna">
  <meta name="twitter:card" content="summary_large_image">
</head>
```

The `prefix` attribute declares the namespaces (RDFa). Crawlers read the tags without it, but it is what the specification shows, and it does no harm.

## The four required properties

| Tag | What it holds | Example |
|---|---|---|
| `og:title` | The title "as it should appear within the graph" — usually the page title without the site name | `How we cut our image pipeline to 900 ms` |
| `og:type` | The object type; `website` for most pages, `article` for posts (see types below) | `article` |
| `og:image` | An absolute URL of the image that represents the page | `https://example.com/og/post.png` |
| `og:url` | The canonical URL, used as the object's permanent ID | `https://example.com/blog/image-pipeline` |

`og:url` matters more than it looks: platforms key their cache and their like/share counts on it. Point it at the canonical address, not the one with tracking parameters, or the same page collects several previews.

For `og:image`, the size that satisfies Facebook, LinkedIn, X and WhatsApp at once is **1200×630** pixels, JPEG or PNG under 600 KB — the [per-platform size table](https://shareglint.com/en/og-image-size) has each platform's documented minimum, maximum and crop. Use an absolute `https://` URL: relative paths are the most common reason an image does not show.

## Optional properties

| Tag | What it holds | Example |
|---|---|---|
| `og:description` | A one- or two-sentence summary | `Moving rendering off the request path…` |
| `og:site_name` | The name of the whole site | `Example Engineering` |
| `og:locale` | The page language as `language_TERRITORY`; default `en_US` | `pl_PL` |
| `og:locale:alternate` | Other languages the page exists in (an array) | `de_DE` |
| `og:determiner` | The word before the title in a sentence: `a`, `an`, `the`, `""` or `auto` | `the` |
| `og:video` | A video file URL that complements the page | `https://example.com/clip.mp4` |
| `og:audio` | An audio file URL | `https://example.com/episode.mp3` |

`og:description` is optional in the protocol, but [LinkedIn](https://www.linkedin.com/help/linkedin/answer/a521928) and [WhatsApp](https://developers.facebook.com/docs/whatsapp/link-previews/) both list it among the tags a full preview needs. Treat it as required.

`og:determiner` is rarely used. It was meant for sentences like "Anna read *the* Hobbit" in activity feeds that no longer exist; nothing you share today shows it.

## Structured properties of og:image, og:video and og:audio

A structured property adds detail to the tag above it:

| Tag | Meaning |
|---|---|
| `og:image:url` | Same as `og:image` |
| `og:image:secure_url` | An HTTPS URL, for pages that also serve the image over HTTP |
| `og:image:type` | MIME type, e.g. `image/png` |
| `og:image:width`, `og:image:height` | Size in pixels |
| `og:image:alt` | "A description of what is in the image (not a caption)" |
| `og:video:url`, `:secure_url`, `:type`, `:width`, `:height` | The same, for video |
| `og:audio:url`, `:secure_url`, `:type` | The same for audio (no size) |

Width and height are worth setting. Meta says they let Facebook "render the image immediately without having to asynchronously download and process it" ([Meta image guide](https://developers.facebook.com/docs/sharing/webmasters/images)); without them the first share of a new link can come out with no image. `og:image:alt` is what screen readers announce on platforms that support it, and ogp.me says a page with `og:image` should set it.

## Arrays: more than one value

Repeat a tag to give several values. The protocol's rule: "The first tag (from top to bottom) is given preference during conflicts", and structured properties belong to the root tag above them until the next root tag starts:

```html
<meta property="og:image" content="https://example.com/og/wide.png">
<meta property="og:image:width" content="1200">
<meta property="og:image:height" content="630">
<meta property="og:image" content="https://example.com/og/square.png">
<meta property="og:image:width" content="1080">
<meta property="og:image:height" content="1080">
```

Here a platform that takes one image takes `wide.png`. Discord is the main reader that uses more: up to four `og:image` tags become a gallery ([Discord link previews](https://docs.discord.com/developers/link-previews/overview)). Put the image you want everywhere first.

## Object types (og:type)

Every page has a type. The global ones, each with its own namespace and extra properties:

| `og:type` | Extra properties |
|---|---|
| `website` | None. Any page without markup is treated as `website`. |
| `article` | `article:published_time`, `article:modified_time`, `article:expiration_time` (ISO 8601), `article:author` (profile URLs, array), `article:section`, `article:tag` (array) |
| `profile` | `profile:first_name`, `profile:last_name`, `profile:username`, `profile:gender` |
| `book` | `book:author`, `book:isbn`, `book:release_date`, `book:tag` |
| `music.song` | `music:duration` (seconds), `music:album`, `music:album:disc`, `music:album:track`, `music:musician` |
| `music.album` | `music:song`, `music:song:disc`, `music:song:track`, `music:musician`, `music:release_date` |
| `music.playlist`, `music.radio_station` | `music:song…`, `music:creator` |
| `video.movie` | `video:actor`, `video:actor:role`, `video:director`, `video:writer`, `video:duration`, `video:release_date`, `video:tag` |
| `video.episode` | as `video.movie`, plus `video:series` |
| `video.tv_show`, `video.other` | as `video.movie` |

ogp.me also lists `payment.link`, marked beta. In practice: `website` for home and product pages, `article` for anything with a publish date. Previews look the same either way; the type matters for parsers that read the extra properties.

Values have types too: Boolean (`true`, `false`, `1`, `0`), DateTime (ISO 8601), Enum, Float, Integer (32-bit), String and URL (http or https only).

## The twitter: tags X reads

X has its own tags, Twitter Cards, and falls back to Open Graph for most of them ([X cards markup, archived](https://web.archive.org/web/20260116124848/https://developer.x.com/en/docs/x-for-websites/cards/overview/markup)):

| Tag | Falls back to | Notes |
|---|---|---|
| `twitter:card` | — | `summary`, `summary_large_image`, `app` or `player`. Without it "a summary card may be rendered" — the small one |
| `twitter:title` | `og:title` | Max 70 characters |
| `twitter:description` | `og:description` | Max 200 characters |
| `twitter:image` | `og:image` | Under 5 MB; JPG, PNG, WEBP, GIF (first frame); no SVG |
| `twitter:image:alt` | `og:image:alt` | Max 420 characters |
| `twitter:site`, `twitter:creator` | — | `@username` of the site and of the author |

So the minimal addition to a page with Open Graph is one line, `<meta name="twitter:card" content="summary_large_image">`. Sizes, card types and the reasons a card does not show are on the [Twitter card page](https://shareglint.com/en/twitter-card).

## Other tags crawlers read

- `fb:app_id` — ties the page to a Facebook app for Insights. Optional; the Sharing Debugger warns when it is missing, which is not an error.
- `theme-color` — Discord uses it for the coloured bar beside the embed.
- `<link rel="canonical">`, `<title>`, `<meta name="description">` — fallbacks when `og:` tags are missing.
- oEmbed links — Slack and Discord prefer an oEmbed endpoint when the page advertises one.

## Three rules crawlers enforce

1. **Tags must be in the HTML the server sends.** Crawlers such as `facebookexternalhit`, `LinkedInBot`, `Twitterbot` and `Slackbot` do not wait for JavaScript. Tags injected by a single-page app after load are invisible to them; render them on the server or at build time.
2. **URLs are absolute and fetchable.** The image must answer `200` to a bot without cookies, logins or bot protection, with an image `Content-Type`.
3. **Caches are keyed by URL.** A changed image under the same URL keeps the old preview until the platform re-scrapes. Give a new image a new URL (`/og/post.png?v=2`). The [debugging guide](https://shareglint.com/en/guides/og-image-not-showing) lists each platform's refresh tool.

## Check what a crawler reads

Read the tags the way a crawler does, without running JavaScript:

```bash
curl -sL -A "facebookexternalhit/1.1" https://example.com/blog/post \
  | grep -Eio '<meta[^>]+(og:|twitter:)[^>]+>'
```

Or paste the URL into the [OG checker](https://shareglint.com/en/tools/og-checker), which shows the card on X, LinkedIn, Facebook, Slack and Discord and flags missing tags; the [meta tag generator](https://shareglint.com/en/tools/meta-tag-generator) writes the whole set for you.

## Making the og:image itself

The tags are the easy part; every page needs its own image. You can design one per page by hand, render them at build time, or have them rendered on request. With Shareglint one HTTP request turns an HTML template and the page's title into a 1200×630 PNG — 153 built-in templates, or your own HTML and CSS — and the free plan covers 100 images a month. [What an OG image is and how each platform shows it](https://shareglint.com/en/guides/what-is-an-open-graph-image) covers the image side in detail.

## FAQ

### What is Open Graph?

Open Graph is a set of meta tags, published at ogp.me, that describes a web page as an object: its title, type, canonical URL and image. Facebook created it in 2010; today LinkedIn, Slack, Discord, WhatsApp, iMessage, Telegram and most other link-preview crawlers read it to build the card shown when a link is shared.

### Which Open Graph tags are required?

The protocol requires four: og:title, og:type, og:image and og:url. og:description is optional in the protocol, but LinkedIn and WhatsApp list it as needed for a full preview, so in practice set five.

### Should Open Graph tags use property or name?

The protocol's examples use the property attribute (RDFa), for example <meta property="og:title" content="…">. Twitter Card tags use name. Most parsers accept either, but following each spec avoids surprises with stricter ones.

### What happens when a page has no Open Graph tags?

The protocol says any page without markup should be treated as og:type website. Each platform then guesses: from the <title>, the meta description and an image found in the page. The result varies by platform and is often a card without an image.

### Can a page have more than one og:image?

Yes. Repeat the tag; structured properties such as og:image:width belong to the og:image above them. When a platform wants one value, the first tag wins. Discord shows up to four images as a gallery; most others use the first.

### How do I test Open Graph tags?

Fetch the page as a crawler would (no JavaScript) and read the meta tags, or use a checker that previews each platform. Facebook's Sharing Debugger and LinkedIn's Post Inspector show what those two read and refresh their caches; for X, paste the link into the post composer.