Build a card from the page's own tags
This is roughly what a chat app does on its server: read the og: tags and lay them out. The image here is a placeholder box, because previews can't load outside files.
Open Graph and Twitter card meta tags tell WhatsApp, LinkedIn, Facebook, X, Slack and Discord what title, description and image to show when someone shares your link.
Change the code and press Run (Ctrl+Enter). Predict what will happen first, then break it on purpose and read what changes. Your edits are saved and match the lesson page.
Ready for more? This phase has 6 hands-on exercises with automatic checks.
Practice questions
Write the code in the editor, run it, then open the model answer to compare.
Write the full set of social tags for a blog post How I learned to code at 40 on https://ravi.example/blog/code-at-40, with an image https://ravi.example/og/code-at-40.png and the large X card.
Write a function checkCard() that logs the names of any of the four required OG tags that are missing from the page, or All required OG tags present.
Explain it without notes
How does a chat app build a link preview, and why don't tags added by JavaScript work?
Which Open Graph tags are required, and which X card tag do you need?
What size should a sharing image be, and what else should you check about it?
Why must og:image and og:url be absolute URLs?
Preview
Console
Nothing logged yet.Expected console output
Required OG tags missing: []
Image is absolute: true