Open Graph Meta Tags: Complete Reference
Open Graph meta tags control how your pages appear when shared on Facebook, LinkedIn, Discord, Slack, and dozens of other platforms. This reference covers every standard OG property with code examples.
Required Tags
The Open Graph protocol defines four required properties. Without these, most platforms will fall back to guessing from your page content, often with poor results.
og:title — The title of your content. Not the same as your HTML <title> tag — this should be optimized for social sharing. Keep it under 60 characters. Facebook truncates around 88 characters, but LinkedIn and other platforms cut earlier.
og:type — The type of content. Defaults to website if omitted, but include it explicitly. Common values: website, article, profile, book, music.song, music.album, video.movie, video.episode. Each type unlocks additional properties (see Type-Specific Properties).
og:image — The image displayed in the social preview card. This single tag has the most impact on click-through rates. Always use an absolute URL. Relative paths will fail on most platforms. See og:image structured properties for dimensions and format options.
og:url — The canonical URL of your page. Platforms use this to consolidate share counts across URL variations (with/without trailing slash, query parameters, etc.).
og:title
<meta property="og:title" content="How to Build a REST API with Node.js" />og:type
<meta property="og:type" content="article" />og:image
<meta property="og:image" content="https://example.com/images/api-guide.jpg" />og:url
<meta property="og:url" content="https://example.com/blog/rest-api-guide/" />Optional Tags
og:description — A brief summary of the content. Appears below the title in most preview cards. Keep it between 100-200 characters. Facebook shows approximately 300 characters, but other platforms show less.
og:site_name — The name of the overall website, not the individual page. Facebook displays this above the title in small text.
og:locale — The language and territory of the content in the format language_TERRITORY. Defaults to en_US if omitted.
og:locale:alternate — Other available locales for the same content.
og:determiner — The word that appears before the title in a sentence. Values: a, an, the, "" (blank), auto. Rarely used. Most implementations omit this entirely.
og:audio — A URL to an audio file associated with the content.
og:video — A URL to a video file that complements the content.
og:description
<meta property="og:description" content="Step-by-step guide to building a production-ready REST API using Node.js, Express, and PostgreSQL." />og:site_name
<meta property="og:site_name" content="Dev Tutorials" />og:locale
<meta property="og:locale" content="en_US" />og:locale:alternate
<meta property="og:locale:alternate" content="es_ES" />
<meta property="og:locale:alternate" content="fr_FR" />og:determiner
<meta property="og:determiner" content="the" />og:audio
<meta property="og:audio" content="https://example.com/audio/podcast-ep42.mp3" />og:video
<meta property="og:video" content="https://example.com/videos/demo.mp4" />Structured Properties
Some OG properties have sub-properties that provide additional detail. Declare the root property first, then its structured properties.
og:image Properties
<meta property="og:image" content="https://example.com/images/api-guide.jpg" />
<meta property="og:image:secure_url" content="https://example.com/images/api-guide.jpg" />
<meta property="og:image:type" content="image/jpeg" />
<meta property="og:image:width" content="1200" />
<meta property="og:image:height" content="630" />
<meta property="og:image:alt" content="Diagram showing REST API request flow" />og:image:secure_url — HTTPS version of the image. Required only if the root og:image uses HTTP.
og:image:type — MIME type: image/jpeg, image/png, image/gif, image/webp.
og:image:width / og:image:height — Dimensions in pixels. Specifying these lets platforms render the card without waiting to download the image.
og:image:alt — Accessibility description. Required for WCAG compliance.
og:video Properties
<meta property="og:video" content="https://example.com/videos/demo.mp4" />
<meta property="og:video:secure_url" content="https://example.com/videos/demo.mp4" />
<meta property="og:video:type" content="video/mp4" />
<meta property="og:video:width" content="1280" />
<meta property="og:video:height" content="720" />og:audio Properties
<meta property="og:audio" content="https://example.com/audio/episode.mp3" />
<meta property="og:audio:secure_url" content="https://example.com/audio/episode.mp3" />
<meta property="og:audio:type" content="audio/mpeg" />Type-Specific Properties
Setting og:type unlocks additional properties specific to that content type.
article
<meta property="og:type" content="article" />
<meta property="article:published_time" content="2025-03-15T08:00:00Z" />
<meta property="article:modified_time" content="2025-04-01T12:30:00Z" />
<meta property="article:expiration_time" content="2026-03-15T08:00:00Z" />
<meta property="article:author" content="https://example.com/authors/jane-doe" />
<meta property="article:section" content="Technology" />
<meta property="article:tag" content="Node.js" />
<meta property="article:tag" content="REST API" />All datetime values use ISO 8601 format. article:author should be a URL (profile page or Facebook profile). Multiple article:tag entries are supported.
profile
<meta property="og:type" content="profile" />
<meta property="profile:first_name" content="Jane" />
<meta property="profile:last_name" content="Doe" />
<meta property="profile:username" content="janedoe" />
<meta property="profile:gender" content="female" />book
<meta property="og:type" content="book" />
<meta property="book:author" content="https://example.com/authors/jane-doe" />
<meta property="book:isbn" content="978-3-16-148410-0" />
<meta property="book:release_date" content="2025-01-15" />
<meta property="book:tag" content="programming" />music.song
<meta property="og:type" content="music.song" />
<meta property="music:duration" content="240" />
<meta property="music:album" content="https://example.com/albums/best-of" />
<meta property="music:album:disc" content="1" />
<meta property="music:album:track" content="3" />
<meta property="music:musician" content="https://example.com/artists/artist-name" />music.album
<meta property="og:type" content="music.album" />
<meta property="music:song" content="https://example.com/songs/track-one" />
<meta property="music:song:disc" content="1" />
<meta property="music:song:track" content="1" />
<meta property="music:musician" content="https://example.com/artists/artist-name" />
<meta property="music:release_date" content="2025-06-01" />video.movie / video.episode
<meta property="og:type" content="video.movie" />
<meta property="video:actor" content="https://example.com/actors/actor-name" />
<meta property="video:actor:role" content="Lead" />
<meta property="video:director" content="https://example.com/directors/director-name" />
<meta property="video:writer" content="https://example.com/writers/writer-name" />
<meta property="video:duration" content="5400" />
<meta property="video:release_date" content="2025-12-01" />
<meta property="video:tag" content="sci-fi" />video.episode adds video:series to link to the parent show.
Minimal Code Example
Copy-paste this into your <head> and replace the values:
<meta property="og:title" content="Your Page Title" />
<meta property="og:description" content="A concise description of your page content." />
<meta property="og:type" content="website" />
<meta property="og:url" content="https://yoursite.com/page/" />
<meta property="og:image" content="https://yoursite.com/images/og-image.jpg" />
<meta property="og:image:width" content="1200" />
<meta property="og:image:height" content="630" />
<meta property="og:image:alt" content="Description of the image" />Full Code Example
A production-ready blog post with all recommended tags:
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1" />
<title>How to Build a REST API with Node.js | Dev Tutorials</title>
<meta name="description" content="Step-by-step guide to building a production-ready REST API." />
<!-- Open Graph -->
<meta property="og:title" content="How to Build a REST API with Node.js" />
<meta property="og:description" content="Step-by-step guide to building a production-ready REST API using Node.js, Express, and PostgreSQL." />
<meta property="og:type" content="article" />
<meta property="og:url" content="https://devtutorials.com/blog/rest-api-guide/" />
<meta property="og:site_name" content="Dev Tutorials" />
<meta property="og:locale" content="en_US" />
<!-- OG Image -->
<meta property="og:image" content="https://devtutorials.com/images/rest-api-og.jpg" />
<meta property="og:image:width" content="1200" />
<meta property="og:image:height" content="630" />
<meta property="og:image:type" content="image/jpeg" />
<meta property="og:image:alt" content="REST API architecture diagram" />
<!-- Article Properties -->
<meta property="article:published_time" content="2025-03-15T08:00:00Z" />
<meta property="article:modified_time" content="2025-04-01T12:30:00Z" />
<meta property="article:author" content="https://devtutorials.com/authors/jane-doe/" />
<meta property="article:section" content="Backend Development" />
<meta property="article:tag" content="Node.js" />
<meta property="article:tag" content="REST API" />
<meta property="article:tag" content="Express" />
<!-- Twitter Card -->
<meta name="twitter:card" content="summary_large_image" />
<meta name="twitter:title" content="How to Build a REST API with Node.js" />
<meta name="twitter:description" content="Step-by-step guide to building a production-ready REST API." />
<meta name="twitter:image" content="https://devtutorials.com/images/rest-api-og.jpg" />
<meta name="twitter:image:alt" content="REST API architecture diagram" />
</head>Quick Reference
| Property | Required | Type | Example |
|---|---|---|---|
og:title | Yes | string | "How to Build a REST API" |
og:type | Yes | enum | "website", "article", "profile" |
og:image | Yes | URL | "https://example.com/img.jpg" |
og:url | Yes | URL | "https://example.com/page/" |
og:description | No | string | "A short summary." |
og:site_name | No | string | "My Website" |
og:locale | No | string | "en_US" |
og:locale:alternate | No | string | "es_ES" |
og:determiner | No | enum | "a", "an", "the", "", "auto" |
og:audio | No | URL | "https://example.com/audio.mp3" |
og:video | No | URL | "https://example.com/video.mp4" |
og:image:secure_url | No | URL | "https://example.com/img.jpg" |
og:image:type | No | MIME | "image/jpeg" |
og:image:width | No | integer | "1200" |
og:image:height | No | integer | "630" |
og:image:alt | No | string | "Description of image" |
og:video:secure_url | No | URL | HTTPS video URL |
og:video:type | No | MIME | "video/mp4" |
og:video:width | No | integer | "1280" |
og:video:height | No | integer | "720" |
og:audio:secure_url | No | URL | HTTPS audio URL |
og:audio:type | No | MIME | "audio/mpeg" |
article:published_time | No | datetime | "2025-03-15T08:00:00Z" |
article:modified_time | No | datetime | "2025-04-01T12:30:00Z" |
article:expiration_time | No | datetime | ISO 8601 |
article:author | No | URL | Profile URL |
article:section | No | string | "Technology" |
article:tag | No | string | "Node.js" |
profile:first_name | No | string | "Jane" |
profile:last_name | No | string | "Doe" |
profile:username | No | string | "janedoe" |
profile:gender | No | enum | "male", "female" |
book:author | No | URL | Profile URL |
book:isbn | No | string | "978-3-16-148410-0" |
book:release_date | No | datetime | "2025-01-15" |
book:tag | No | string | "programming" |
music:duration | No | integer | "240" (seconds) |
music:album | No | URL | Album URL |
music:musician | No | URL | Musician URL |
video:actor | No | URL | Actor profile URL |
video:director | No | URL | Director profile URL |
video:duration | No | integer | "5400" (seconds) |
video:release_date | No | datetime | "2025-12-01" |
video:tag | No | string | "sci-fi" |
FAQ
Yes. The HTML <title> tag is for browsers and search engines. The og:title property is specifically for social platforms. They can (and often should) differ — your HTML title might include your brand name for SEO, while your OG title should be shorter and more engaging for social feeds.
Platforms will attempt to guess from your page content. Facebook extracts the first <h1> or <title> for the title and grabs a large image from the page body. The results are unreliable and often look broken. Always set at minimum og:title, og:image, and og:url.
Yes. The OG protocol allows multiple images. The first og:image tag is used as the primary preview image. Additional images may be used by platforms that support image galleries, though most platforms only display the first one.
og:url should be your canonical URL. If your page is accessible at both https://example.com/page and https://example.com/page/, pick one and use it consistently. This consolidates share counts across URL variations.
OG tags have no direct impact on search engine rankings. However, they indirectly affect SEO by improving click-through rates on social media, driving more traffic, and increasing the likelihood of backlinks.