Frontend is a free bonus on CodeMentor AI β the main product is Python. Register to save your progress and unlock all 290 Frontend lessons + 1,000+ 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