META tags & social SNIPPETS with Svelte 🌄 LIVE Coding & Chill
Let’s figure out how to make our sites STAND OUT when sharing on social, by adding the appropriate meta tags to our HTML!
The implementation will be in SvelteKit, but we’ll go over general knowledge about OpenGraph tags and more, you can apply to any framework!
Future Johnny: We worked live on Techy Cat https://techy.cat, even deployed live, so any link you share should now look… enhanced 💅
Agenda
✅ What’s the point of these meta tags again?
✅ Using `svelte:head` in individual routes https://svelte.dev/docs#template-synt...
✅ Using `svelte:head` in a Layout component: https://kit.svelte.dev/docs/routing#l...
✅ SvelteKit load methods and meta fallbacks
Click around: https://techy.cat
See the code: https://github.com/jmagrippis/techy-cat
— Highlighted software —
SvelteKit: https://kit.svelte.dev/
Meta Tag Previewer: https://metatags.io/
No affiliations whatsoever: if I show something, you know you're hearing my unfiltered thoughts 😄
My own website: https://magrippis.com/
Search for `@jmagrippis` to find me on socials like Discord, Instagram & Twitter!
Between the comment section and the socials, let me know *somewhere* what you’d like me to cover next 🙌