Open Graph Tags Cheat Sheet: Every Tag with Code
Every Open Graph tag in one place: basic, optional, image, video, audio, article, profile, and book tags, plus Twitter card tags, with copy-paste code.
By Abid Ali, maintainer of OG Scope
Updated · First published
This cheat sheet lists every Open Graph tag defined by the Open Graph protocol, grouped by purpose, with a copy-paste code block for each group. It also covers the Twitter card tags that usually sit beside them. Most pages need only the first two groups. The rest apply to images with extra detail, media files, and specific page types.
All og tags go in the HTML head as meta elements with a property attribute. Twitter card tags use name instead. Every URL in the examples is absolute and uses HTTPS, because relative paths often fail in a link preview.
Basic Open Graph tags
The protocol names four basic properties. Every page should set them:
<meta property="og:title" content="Field notes from a wet week" />
<meta property="og:type" content="article" />
<meta property="og:image" content="https://example.com/covers/wet-week.webp" />
<meta property="og:url" content="https://example.com/blog/wet-week" />| Tag | Holds | Notes |
|---|---|---|
| og:title | The card headline | Name the page; leave the brand to og:site_name |
| og:type | The kind of object | website by default; article for dated posts |
| og:image | The card image URL | Absolute HTTPS; about 1200 x 630 for a large card |
| og:url | The canonical page URL | Match the canonical link; no tracking parameters |
The og:title guide and the og:type guide go deeper on the two values that most often go wrong.
Optional Open Graph meta tags
<meta property="og:description" content="What the rain did to the beds, and what was replanted." />
<meta property="og:site_name" content="Field Notes" />
<meta property="og:locale" content="en_US" />
<meta property="og:locale:alternate" content="fr_FR" />
<meta property="og:determiner" content="the" />og:description: one or two sentences under the title. Not a basic property, but most cards use it. The og:description guide covers length and writing.og:site_name: the name of the overall website. The og:site_name guide covers choosing the value.og:locale: the language and region of the page, in the form language_TERRITORY. The protocol default is en_US. The og:locale guide compares en_US and en_GB.og:locale:alternate: other locales the page is available in. Repeat the tag once per locale.og:determiner: the word before the title in a sentence, such as a, an, the, or auto. Rarely needed.
Paste a page URL into the OG tag checker to see which of these Open Graph meta tags the page already prints and which are missing.
Image tags
og:image can carry structured properties that describe the file. They are optional, but width and height let a platform lay out the card before the image finishes downloading:
<meta property="og:image" content="https://example.com/covers/wet-week.webp" />
<meta property="og:image:secure_url" content="https://example.com/covers/wet-week.webp" />
<meta property="og:image:type" content="image/webp" />
<meta property="og:image:width" content="1200" />
<meta property="og:image:height" content="630" />
<meta property="og:image:alt" content="Rain-soaked raised beds with new seedlings." />og:image:secure_url: an HTTPS address, for sites that also serve the image over HTTP.og:image:type: the MIME type, such as image/webp, image/png, or image/jpeg.og:image:widthandog:image:height: the pixel size.og:image:alt: a text description of the image.
Structured properties must follow the og:image they describe. To offer several images, repeat the whole block. The protocol gives the first tag preference when values conflict. The OG image checker shows whether the published image loads and reads its pixel size.
Video and audio tags
<meta property="og:video" content="https://example.com/video/tour.mp4" />
<meta property="og:video:secure_url" content="https://example.com/video/tour.mp4" />
<meta property="og:video:type" content="video/mp4" />
<meta property="og:video:width" content="1280" />
<meta property="og:video:height" content="720" />
<meta property="og:audio" content="https://example.com/audio/episode-12.mp3" />
<meta property="og:audio:secure_url" content="https://example.com/audio/episode-12.mp3" />
<meta property="og:audio:type" content="audio/mpeg" />og:video and og:audio point to a media file related to the page, with the same secure_url and type properties as images. Video also takes width and height. How a platform uses these files varies, and many cards still show only the og:image, so set an image even on a video page.
Article tags
When og:type is article, the protocol defines these extra properties:
<meta property="og:type" content="article" />
<meta property="article:published_time" content="2026-01-15T09:00:00Z" />
<meta property="article:modified_time" content="2026-01-16T14:30:00Z" />
<meta property="article:expiration_time" content="2027-11-25T00:00:00Z" />
<meta property="article:author" content="https://example.com/authors/sam" />
<meta property="article:section" content="Garden" />
<meta property="article:tag" content="Drainage" />
<meta property="article:tag" content="Raised beds" />| Tag | Holds |
|---|---|
| article:published_time | When the article was first published (ISO 8601) |
| article:modified_time | When it last changed |
| article:expiration_time | When it goes out of date, if ever |
| article:author | Profile URL of the author; repeat for several authors |
| article:section | A high-level section, such as Garden |
| article:tag | A tag word; repeat once per tag |
Profile and book tags
<meta property="og:type" content="profile" />
<meta property="profile:first_name" content="Sam" />
<meta property="profile:last_name" content="Rivera" />
<meta property="profile:username" content="samrivera" />
<meta property="og:type" content="book" />
<meta property="book:author" content="https://example.com/authors/sam" />
<meta property="book:isbn" content="978-3-16-148410-0" />
<meta property="book:release_date" content="2026-04-01" />
<meta property="book:tag" content="Gardening" />A profile page can add profile:first_name, profile:last_name, profile:username, and profile:gender. A book page can add book:author, book:isbn, book:release_date, and book:tag. The protocol also defines music and video types, such as music.song and video.movie, each with its own properties.
Twitter card tags
Twitter card tags are a separate set, read by X. They use the name attribute:
<meta name="twitter:card" content="summary_large_image" />
<meta name="twitter:site" content="@fieldnotes" />
<meta name="twitter:creator" content="@samrivera" />
<meta name="twitter:title" content="Field notes from a wet week" />
<meta name="twitter:description" content="What the rain did to the beds." />
<meta name="twitter:image" content="https://example.com/covers/wet-week.webp" />
<meta name="twitter:image:alt" content="Rain-soaked raised beds with new seedlings." />X falls back to og:title, og:description, and og:image when the matching Twitter tags are missing, so most pages need only twitter:card to pick the layout. The Twitter card checker guide covers the fallbacks and the two card layouts.
Which tags each page type needs
| Page type | og:type | Tags to add beyond the basics |
|---|---|---|
| Homepage or landing page | website | og:description, og:site_name, twitter:card |
| Blog post or news story | article | article:published_time, article:author, og:image:alt |
| Product page | website | og:description, og:image:width, og:image:height |
| Author page | profile | profile:first_name, profile:last_name |
| Video page | website or video.other | og:video, og:video:type, plus an og:image |
| Translated page | Same as the original | og:locale, og:locale:alternate |
Tags that are often confused
- og:url and the canonical link. Both name the preferred address. They should hold the same URL, as the og:url guide explains.
- og:title and the title element. The title element is for the browser tab and search results. og:title is for the card and usually drops the brand suffix.
- og:description and the meta description. Many platforms fall back to the meta description when og:description is missing, but the two can hold different text.
- og:image and twitter:image. X reads twitter:image first. Most other platforms read og:image, and LinkedIn does not treat twitter:image as a substitute.
Writing HTML og tags that work
- Print the tags in the HTML the server returns. Many preview crawlers do not run JavaScript.
- Use one og tag per property, except where the protocol allows repeats, such as og:image and article:tag.
- Use absolute HTTPS URLs for og:image, og:url, and media files.
- Encode quotes and ampersands inside content values.
- Write values per page. Site-wide defaults make every card the same.
Many guides call these meta og tags or simply open graph metadata. The terms mean the same thing: the og metadata a page publishes in its head for other apps to read.
Check every open graph tag on a live page
- Open the page source and search for og: and twitter:.
- Confirm each basic tag appears once with a real value.
- Open the og:image URL directly and confirm it loads.
- Run the live URL through a checker that reads the server HTML.
New to the topic? The beginner guide to Open Graph explains how a card is built from these tags. Set the basic and optional groups first, add the rest only where they fit the page, then check your OG tags on the published URL before sharing it.