Skip to main content
← πŸ“„ HTML & the platformΒ·Module A6 Β· Lesson 5
TaskBuild a full article OG block: og:title 'Why FastAPI', og:description 'Async-native, type-safe.', og:image 'https://example.com/og.png', og:image:width '1200', og:image:height '630', og:url 'https://example.com/blog/fastapi', og:type 'article', og:site_name 'CodeMentor'.

OpenGraph deep-dive: og:image rules

100 XP8 min
Theory

The 5 OG tags (you saw 4 of these in A1; here's deep)

<meta property="og:title" content="Why FastAPI beats Flask in 2026" />
<meta property="og:description" content="Async-native, type-safe, production-grade. Here's the data." />
<meta property="og:image" content="https://example.com/og/why-fastapi.png" />
<meta property="og:image:width" content="1200" />
<meta property="og:image:height" content="630" />
<meta property="og:image:alt" content="A FastAPI logo over Python and Flask code samples" />
<meta property="og:url" content="https://example.com/blog/why-fastapi" />
<meta property="og:type" content="article" />
<meta property="og:site_name" content="CodeMentor AI" />
<meta property="article:published_time" content="2026-05-20T10:00:00Z" />
<meta property="article:author" content="Anna Kowalski" />

og:image β€” the make-or-break tag

  • 1200 Γ— 630 px β€” the universally-supported aspect ratio (1.91:1).
  • Absolute URL. Same rule as canonical. /og.png doesn't work β€” must be full https://....
  • < 5MB. Telegram caps at 5MB; some others lower.
  • PNG or JPEG. WebP works on Telegram/Slack but NOT iMessage or LinkedIn (last I checked β€” verify).
  • Critical text in central 1200Γ—500. Some platforms crop the top/bottom ~65px.
  • Include `og:image:alt`. Twitter/X reads it; some screen readers on shared cards use it.

og:type

Common values:

  • website β€” landing pages, generic.
  • article β€” blog posts. Unlocks article:published_time etc.
  • product β€” e-commerce. Unlocks product:price:amount.
  • video / music / book β€” media.

For an article, set og:type="article" and include published_time + author for richer cards.

Cache

OG cards are cached aggressively by platforms (Telegram caches 7-30 days). After publishing, paste the URL into the Telegram bot or Facebook Sharing Debugger to force a re-fetch.

πŸ”’

Sign up to start coding

Theory is open to everyone. The interactive editor, live preview, and check are unlocked with a 7-day free trial β€” card required, cancel anytime.

Sign up β€” free trial β†’

First 10 lessons in each track are free. No card needed for those.

← PreviousNext lesson β†’

Get one Python or web tip a day β€” by email

Short, hand-written, no spam. Unsubscribe in one click.