OpenGraph and Twitter Card Meta
Add og: and twitter: meta tags for rich social media link previews.
OpenGraph and Twitter Card Meta is a free Sveltejs Academy lesson on CoddyKit — lesson 2 of 4. You can read the complete lesson below for free — then practise it hands-on in the browser with a built-in code editor and a 24/7 AI tutor. It is part of the Sveltejs Academy learning path, one of 4 lessons in the course, and your progress syncs across the web and the CoddyKit app.
Why OG Tags
Open Graph meta gives social platforms (Facebook, LinkedIn, Slack) rich previews when sharing links.
Required OG Tags
og:title, og:description, og:image, og:url are the most important.
<svelte:head>
<meta property="og:title" content={title} />
<meta property="og:description" content={description} />
<meta property="og:image" content={imageUrl} />
<meta property="og:url" content={url} />
</svelte:head>Image Sizing
1200x630 is the recommended OG image size for best display across platforms.
Twitter Cards
Twitter respects OG tags but also has its own twitter: meta for more control.
<meta name="twitter:card" content="summary_large_image" />
<meta name="twitter:title" content={title} />Card Types
Twitter supports summary, summary_large_image, app, and player cards.
Validate
Use Facebook's Sharing Debugger and Twitter's Card Validator to preview your tags.
Absolute URLs
OG image URLs must be absolute; relative paths fail.
Per-Page Customization
Set OG tags per article, product, or profile for context-rich previews.
Avoid Duplicate Defaults
Provide site-wide defaults in the root layout and override per page.
Caching
Social platforms cache OG data. Use their debuggers to refresh.
Real-World Impact
Rich previews dramatically increase click-through rates on social shares.
Quick Check
Why must OG image URLs be absolute?
Recap
Add OG and Twitter meta in <svelte:head> with absolute image URLs for rich social previews.
Frequently asked questions
Is the “OpenGraph and Twitter Card Meta” lesson free?
Yes — the full text of “OpenGraph and Twitter Card Meta” is free to read here on the web, and the Sveltejs Academy course includes 4 lessons in total. To practise it interactively (a built-in code editor and a 24/7 AI tutor) and unlock the rest of the Sveltejs Academy course, upgrade to CoddyKit PRO.
What will I learn in “OpenGraph and Twitter Card Meta”?
Add og: and twitter: meta tags for rich social media link previews. You practise Sveltejs Academy with hands-on code you run directly in the browser, and a 24/7 AI tutor answers your questions as you work through the lesson.
Do I need any experience to start Sveltejs Academy?
No prior experience is required. Sveltejs Academy on CoddyKit is structured for beginners through advanced learners; this is — lesson 2 of 4, so you can start here or from the beginning and move at your own pace.
How long does the “OpenGraph and Twitter Card Meta” lesson take?
Most CoddyKit lessons take about 5–10 minutes. Each one is bite-sized and interactive, so you make steady progress and pick up exactly where you left off across the web and the app.
Can I write and run code in this Sveltejs Academy lesson?
Yes. Every Sveltejs Academy lesson includes a built-in code editor, so you write and run real code right in your browser and get instant AI feedback — no local setup required.
All lessons in this course
- svelte:head for Dynamic Meta Tags
- OpenGraph and Twitter Card Meta
- JSON-LD Structured Data in SvelteKit
- Canonical URLs and Sitemap Generation