Open Graph Protocol — HTML

The Open Graph Protocol

Open Graph (OG) is a set of meta tags, originally created by Facebook, that describes a page so it can be turned into a rich preview card when shared on social platforms. Without it, a shared link often shows an ugly, unpredictable summary the platform guesses at.

The core tags

HTML

<meta property="og:title" content="HTML Tutorials for Every Level | Let Codes" />
<meta property="og:description" content="Learn HTML from fundamentals to advanced SEO and accessibility, with hands-on examples." />
<meta property="og:image" content="https://letcodes.example/og/html.png" />
<meta property="og:type" content="website" />
<meta property="og:url" content="https://letcodes.example/html/introduction" />

Tag	Purpose
og:title	Headline shown in the shared preview card
og:description	Short summary text beneath the title
og:image	Preview thumbnail — should be an absolute URL, ideally 1200×630px
og:type	Content type: website, article, video.movie, profile, and more
og:url	The canonical URL for this content, so shares always point back to one address
og:site_name	The name of your overall site or publication

How social platforms use it

When someone pastes your URL into a post on Facebook, LinkedIn, Slack, Discord, or many other platforms, that platform's crawler fetches the page, reads its Open Graph tags, and builds a preview card — a headline, description, and image — instead of showing a bare link.

og:image is the single highest-impact tag — a strong preview image dramatically increases click-through when a link is shared.
If og:title or og:description are missing, most platforms fall back to the page's title and meta description.
og:type of "article" unlocks additional article-specific tags like article:author and article:published_time on some platforms.

Testing tools

Because Open Graph tags are invisible on the page itself, you need a dedicated tool to preview how a share card will actually look, and these tools also flag missing or malformed tags. Common ones include Facebook's Sharing Debugger, LinkedIn's Post Inspector, and general-purpose OG preview validators.

Tip

Platforms cache the scraped Open Graph data. If you change og:image or og:title after a URL has already been shared, use the platform's debugger tool to force a re-scrape — otherwise it may keep showing the old preview for a long time.

Note

Twitter/X uses its own, separate twitter:* tag family for cards, though it falls back to Open Graph tags when its own are missing — covered on the next page.