Frontend is a free bonus on CodeMentor AI — the main product is Python. Register to save your progress and unlock all 299 Frontend lessons + 1,100+ Python lessons.Sign up — free
TaskAdd five OpenGraph meta tags: og:title='My App', og:description='What my app does', og:image='https://example.com/og.png', og:url='https://example.com', og:type='website'.
OpenGraph: how your link looks when shared
100 XP8 minFREE
Theory
When someone shares your URL
…in Telegram / Slack / Twitter / LinkedIn / iMessage / Discord, the platform fetches your URL, looks for OpenGraph tags, and renders a "card" with the title + description + image + site name.
Without OG tags, you get a bare blue link. With OG tags, you get something that looks like a real product.
The five tags you actually need
<meta property="og:title" content="Learn Python — interactive lessons" /> <meta property="og:description" content="1,350+ lessons. AI mentor. Browser-native Python." /> <meta property="og:image" content="https://learnpython.academy/opengraph-image" /> <meta property="og:url" content="https://learnpython.academy" /> <meta property="og:type" content="website" />
Image rules
- 1200 × 630 pixels is the universally-supported aspect ratio (1.91:1).
- PNG or JPEG, under 5MB. WebP works on Telegram/Slack but NOT on iMessage/LinkedIn.
- Keep critical text in the central 1200×500 — some platforms crop the top/bottom 65px.
Twitter has its own tags
<meta name="twitter:card" content="summary_large_image" /> <meta name="twitter:image" content="https://learnpython.academy/opengraph-image" />
Twitter falls back to OG if these are missing, so they're optional — but twitter:card="summary_large_image" is what makes the image render *large* instead of as a thumbnail.
Test before shipping
Paste your URL into opengraph.xyz or Telegram's bot to preview the card. Cache lives 7-30 days — fix typos *before* you publish.
Live preview