**Open Graph** is a protocol (originally created by Facebook, now widely adopted) using `<meta property="og:...">` tags instead of the usual `name` attribute. The core tags are **`og:title`**, **`og:description`**, **`og:image`** (an absolute URL to a preview image, ideally at least 1200×630px), **`og:url`** (the canonical URL for the shared content), and **`og:type`** (usually `website` or `article`). Without these tags, social platforms fall back to guessing from the page's `<title>` and first image, often producing a poor-looking preview card.
1Understanding Open Graph
Open Graph is a protocol (originally created by Facebook, now widely adopted) using <meta property="og:..."> tags instead of the usual name attribute. The core tags are `og:title`, `og:description`, `og:image` (an absolute URL to a preview image, ideally at least 1200×630px), `og:url` (the canonical URL for the shared content), and `og:type` (usually website or article). Without these tags, social platforms fall back to guessing from the page's <title> and first image, often producing a poor-looking preview card.
og:image must be an absolute URL (https://...), not a relative path — social media crawlers fetch it independently and won't resolve a relative path against your domain the way a browser would.
<head>
<meta property="og:title" content="Learn HTML for Free">
<meta property="og:description" content="Interactive HTML lessons for beginners.">
<meta property="og:image" content="https://codesyllabus.com/og-html.jpg">
<meta property="og:url" content="https://codesyllabus.com/reference/html">
<meta property="og:type" content="website">
</head>2Practical Example
Here is a real-world application of Open Graph showing how it is used in production HTML.
<!-- Article-specific Open Graph tags -->
<meta property="og:type" content="article">
<meta property="article:published_time" content="2026-07-01T00:00:00Z">
<meta property="article:author" content="Jane Doe">3Best Practices
Follow these guidelines when working with Open Graph:
1. Always set og:title, og:description, og:image, and og:url explicitly rather than relying on fallback guessing
2. Use an og:image at least 1200×630px for a crisp preview across platforms
3. Set og:type to article for blog posts/news content, website for general pages
Tip: og:image must be an absolute URL (https://...), not a relative path — social media crawlers fetch it independently and won't resolve a relative path against your domain the way a browser would.
<head>
<meta property="og:title" content="Learn HTML for Free">
<meta property="og:description" content="Interactive HTML lessons for beginners.">
<meta property="og:image" content="https://codesyllabus.com/og-html.jpg">
<meta property="og:url" content="https://codesyllabus.com/reference/html">
<meta property="og:type" content="website">
</head>