# Open Graph tags: og:type, og:title, og:url, and the rest

> What Open Graph is, every og tag with an example (og:title, og:type, og:url, og:image, og:site_name), the og:type values, and how to test them.

Canonical: https://bannerify.co/blog/open-graph-tags
Last updated: 2026-10-28

By Duc An, 2026-10-28.

Open Graph is a set of meta tags that tells Facebook, LinkedIn, X, Slack, Discord, and iMessage how to show your page as a link card: its title, its description, its image, and its URL. Facebook made the protocol in 2010, and the spec lives at ogp.me. Every tag starts with `og:`, so people call them OG tags, OG meta tags, or OG data.

Without these tags, each network guesses. It takes the HTML `title`, some text from the page, and maybe a random image, or no image at all. With them, you choose what people see before they click.

This page lists every tag with an example. For the image itself, its size, and how to make one per page, read the [OG image guide](https://bannerify.co/blog/og-image).

## The four required tags

The spec asks for four tags on every page:

```html
<meta property="og:title" content="We shipped dark mode" />
<meta property="og:type" content="article" />
<meta property="og:url" content="https://example.com/blog/dark-mode" />
<meta property="og:image" content="https://example.com/og/dark-mode.png" />
```

### og:title

The title of the card. Write it for the card, not for search: short, with no site name at the end, because `og:site_name` carries that. Facebook and LinkedIn cut long titles after about 60 to 90 characters, depending on the screen.

### og:type

What kind of object the page is. Most pages use `website` or `article`. A page without `og:type` counts as `website`. The full list is in the next section.

### og:url

The canonical URL of the page. Use the same URL as your `link rel="canonical"`, with `https://`, and without tracking parameters. Networks use it to count shares and likes, so two versions of a URL (with and without `?utm_source=`, for example) split the count.

### og:image

The URL of the image on the card. It must be an absolute URL. Use 1200 × 630 pixels, and keep the file under 5 MB. The [OG image guide](https://bannerify.co/blog/og-image) has the size of each network.

## og:type values

The spec defines these types:

- **website**: the default. Use it for the home page, product pages, and tool pages.
- **article**: a blog post, a news story, or a guide. It adds `article:published_time`, `article:modified_time`, `article:author`, `article:section`, and `article:tag`.
- **profile**: a person. It adds `profile:first_name`, `profile:last_name`, `profile:username`, and `profile:gender`.
- **book**: a book, with `book:author`, `book:isbn`, `book:release_date`, and `book:tag`.
- **music.song**, **music.album**, **music.playlist**, **music.radio_station**: music pages.
- **video.movie**, **video.episode**, **video.tv_show**, **video.other**: video pages.

An article page looks like this:

```html
<meta property="og:type" content="article" />
<meta property="article:published_time" content="2026-10-28T09:00:00Z" />
<meta property="article:author" content="https://example.com/authors/duc-an" />
<meta property="article:section" content="Engineering" />
<meta property="article:tag" content="dark mode" />
```

Most networks show a `website` card and an `article` card the same way. The type matters most for Facebook and for tools that read the dates, such as some feed readers and chat apps.

## Optional tags

- **og:description**: one or two sentences under the title. Keep it under about 160 characters. It can be the same as your meta description.
- **og:site_name**: the name of the site, such as "Bannerify". Facebook and Slack show it above or below the title.
- **og:locale**: the language of the page, such as `en_US`. The default is `en_US`. Add `og:locale:alternate` for each other language that you have.
- **og:determiner**: the word before the title in a sentence, such as "a" or "the". Few networks use it.
- **og:video** and **og:audio**: the URL of a video or an audio file for the card.

## Image tags

`og:image` takes extra tags that describe the image:

```html
<meta property="og:image" content="https://example.com/og/dark-mode.png" />
<meta property="og:image:type" content="image/png" />
<meta property="og:image:width" content="1200" />
<meta property="og:image:height" content="630" />
<meta property="og:image:alt" content="Dark mode launch card with the app logo" />
```

- **og:image:width** and **og:image:height** let Facebook show the image on the first share, before it downloads the file.
- **og:image:alt** describes the image for screen readers.
- **og:image:secure_url** is the `https://` URL when `og:image` is `http://`. If your `og:image` already uses `https://`, you do not need it.

You can add more than one `og:image`. Most networks use the first one.

## A full example

All the tags for a blog post, plus the one X tag that you need:

```html
<head>
  <title>We shipped dark mode | Example</title>
  <meta name="description" content="Every screen, both themes, no flash on load." />
  <link rel="canonical" href="https://example.com/blog/dark-mode" />

  <meta property="og:site_name" content="Example" />
  <meta property="og:type" content="article" />
  <meta property="og:url" content="https://example.com/blog/dark-mode" />
  <meta property="og:title" content="We shipped dark mode" />
  <meta property="og:description" content="Every screen, both themes, no flash on load." />
  <meta property="og:locale" content="en_US" />
  <meta property="og:image" content="https://example.com/og/dark-mode.png" />
  <meta property="og:image:width" content="1200" />
  <meta property="og:image:height" content="630" />
  <meta property="og:image:alt" content="Dark mode launch card with the app logo" />
  <meta property="article:published_time" content="2026-10-28T09:00:00Z" />

  <meta name="twitter:card" content="summary_large_image" />
</head>
```

## Open Graph and X (Twitter) cards

X has its own tags that start with `twitter:`. When a `twitter:` tag is missing, X reads the Open Graph tag: `og:title` for `twitter:title`, `og:description` for `twitter:description`, and `og:image` for `twitter:image`. So the only X tag that you must add is `twitter:card`. Use `summary_large_image` for a big image, or `summary` for a small square one.

## Mistakes that break the card

- **`name` in place of `property`.** The spec uses `property="og:title"`. Most networks also read `name="og:title"`, but not all of them do.
- **Tags added by JavaScript.** The crawlers of social networks do not run your scripts. Send the tags in the HTML from the server, or prerender the page.
- **A relative image URL.** `/og/dark-mode.png` does not work. Use the full `https://` URL.
- **An image that needs a login,** or that `robots.txt` blocks for the network's crawler.
- **Old cards.** Networks cache what they scrape, often for days. After a change, scrape the page again in the Facebook Sharing Debugger or the LinkedIn Post Inspector.

## Is Open Graph good for SEO?

Not directly. Google ranks pages from their content and links, and it does not use `og:` tags as a ranking signal. But a clear card gets more clicks when people share the link, and those visits and shares help a page get found. Search engines and AI tools also read `og:title` and `og:description` when a page has no better title or description.

## Test your tags

Paste a URL into the free [Open Graph checker](https://bannerify.co/tools/open-graph-checker). It shows the X, Facebook, and LinkedIn previews at once, lists the missing tags, and checks the image size. The [Twitter card validator](https://bannerify.co/tools/twitter-card-validator) does the same with the X card first.

## Make the image for every page

The tags are the easy part. The hard part is a good image for each of your pages. Make one by hand with the free [OG image generator](https://bannerify.co/tools/og-image-generator), or make one per page from a template: design it once in Bannerify, and sign one URL per page with the title and the author. The [OG image guide](https://bannerify.co/blog/og-image) shows the code, and the free plan includes 100 generations a month.

## Related

- [What is an AVIF file? How to open and convert it](https://bannerify.co/blog/avif-file)
- [Canva Bulk Create: how to use it, limits, and fixes](https://bannerify.co/blog/canva-bulk-create)
- [OG image size, meta tags, and examples](https://bannerify.co/blog/og-image)
- [All posts](https://bannerify.co/blog)