The Open Graph protocol enables web pages to become rich graph objects on social networks like Facebook, LinkedIn, Discord, and Slack using semantic meta tags.
The Open Graph protocol (OGP) is a web metadata standard originally created by Facebook in 2010 and now maintained by the open-source community. It allows web developers to turn standard web pages into rich, interactive graph objects within social media feeds, instant messaging platforms, and collaboration tools like LinkedIn, X (Twitter), Slack, Discord, Apple Messages, and WhatsApp.
By placing <meta property="og:..."> tags inside the document <head>, websites control precisely how headlines, summary descriptions, canonical URLs, and hero preview images appear when links are shared.
Generate and validate complete Open Graph, Twitter Card, and JSON-LD metadata in real time using our client-side Meta Tag Generator, or format your page structure with the HTML Formatter.
| Specification | Details |
|---|---|
| Standard Origin | Open Graph Protocol (originally Facebook Developer Network) |
| Official URI | https://ogp.me/ |
| HTML Tag Syntax | <meta property="og:title" content="..."> |
| MIME Namespace | prefix="og: https://ogp.me/ns#" |
| Standard Image Dimensions | 1200 × 630 px (Aspect Ratio 1.91:1) |
| Minimum Image Size | 600 × 315 px (Absolute minimum: 200 × 200 px) |
| Primary Consumer Platforms | Facebook, LinkedIn, Slack, Discord, WhatsApp, Telegram, Apple Messages |
The Open Graph protocol defines four required baseline properties for every web page, supplemented by optional metadata and media descriptors:
<head>
<!-- Required Open Graph Properties -->
<meta property="og:title" content="DevFlow: High-Performance Developer Utilities" />
<meta property="og:type" content="website" />
<meta property="og:image" content="https://wtool.dev/og-banner.png" />
<meta property="og:url" content="https://wtool.dev/tools" />
<!-- Recommended Optional Properties -->
<meta property="og:description" content="Streamline development with 80+ in-browser converters, formatters, and analyzers." />
<meta property="og:site_name" content="DevFlow" />
<meta property="og:locale" content="en_US" />
<!-- Explicit Image Dimensions & MIME Type -->
<meta property="og:image:width" content="1200" />
<meta property="og:image:height" content="630" />
<meta property="og:image:type" content="image/png" />
<meta property="og:image:alt" content="DevFlow developer tooling interface preview" />
</head>
While Open Graph is the universal standard across most chat and social applications, Twitter/X maintains its own proprietary card metadata format (twitter:card, twitter:site, twitter:creator, twitter:image).
┌────────────────────────────────────────────────────────┐
│ Twitterbot Metadata Resolution │
│ │
│ 1. Check for twitter:title │
│ └─► If missing, fallback to og:title │
│ │
│ 2. Check for twitter:description │
│ └─► If missing, fallback to og:description │
│ │
│ 3. Check for twitter:image │
│ └─► If missing, fallback to og:image │
│ │
│ 4. Check for twitter:card (NO FALLBACK) │
│ └─► Defaults to 'summary' if omitted │
└────────────────────────────────────────────────────────┘
Because twitter:card has no Open Graph equivalent, websites targeting full-width banner cards in X timelines must explicitly specify <meta name="twitter:card" content="summary_large_image">.
og:type)The og:type tag determines the semantic entity category of the page and unlocks specialized contextual metadata:
og:type |
Typical Use Case | Specialized Child Properties |
|---|---|---|
website |
Homepages, category hubs, multi-purpose apps | og:site_name, og:locale |
article |
Blog posts, technical tutorials, news stories | article:published_time, article:author, article:section, article:tag |
product |
E-commerce product landing pages | product:price:amount, product:price:currency, product:availability |
profile |
User profiles, author bios, contributor pages | profile:first_name, profile:last_name, profile:username |
video.movie |
Video streaming, webinars, recordings | video:director, video:duration, video:release_date |
<meta property="og:image" content="/images/og.png"> will cause link previews to fail. Always supply absolute URLs starting with https://.og:image:width and og:image:height forces scrapers (like facebookexternalhit and LinkedInBot) to asynchronously download and measure the image on the first share, resulting in empty previews for early visitors.?v=2) to the shared link.", &) to avoid tag truncation.Free, browser-based utilities to test, generate, and inspect Open Graph Protocol (OGP, Social Meta Tags & Link Unfurling) payloads directly.
Generate SEO meta tags, Open Graph, Twitter Cards, and JSON-LD structured data.
Generate multi-size ICO, SVG, Apple Touch, and PWA favicons from images, text, or emojis.
Preview web pages across multiple device viewports instantly.
Encode and decode HTML entities with named, numeric, and hex modes.