Bannerify
Start free
All posts

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.

· Duc An

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.

The four required tags

The spec asks for four tags on every page:

<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 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:

<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:

<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:

<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. It shows the X, Facebook, and LinkedIn previews at once, lists the missing tags, and checks the image size. The 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, 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 shows the code, and the free plan includes 100 generations a month.

Your first 100 images are on us.

Make a template, grab an API key, and render your first image in a few minutes.

Start for freeTalk to the founder