Meta Tags
ELI5 — The Vibe Check
Meta tags are invisible HTML tags that sit in your page's head and tell search engines and social media platforms about your page. They're like the label on a tin can — you can't see them when you eat the soup, but they tell you what's inside before you open it.
Real Talk
Meta tags are HTML elements placed in the document that provide metadata about the page to browsers, search engines, and social platforms. Key meta tags include description (for SEO snippets), viewport (for responsive design), Open Graph tags (for social sharing), and Twitter Card tags.
Show Me The Code
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1" />
<meta name="description" content="ELI5 explanations of dev terms for vibecoders." />
<meta property="og:title" content="Vibecoder Dictionary" />
<meta property="og:image" content="https://example.com/og.png" />
</head>
When You'll Hear This
The meta description shows up in Google search results.,Without og:image, link previews on Slack look terrible.,Always set the viewport meta tag for mobile users.
Related Terms
Favicon
The favicon is that tiny little icon in your browser tab next to the page title.
Open Graph
Open Graph is the reason your link previews look nice when you paste them in iMessage, Slack, or Twitter. Without it, you just get a bare URL.
SEO
SEO is the art of convincing Google to rank your website higher than your competitors.