Meta Tags

Course 2 · Ch 5
Meta Tags
SEO basics, the viewport tag every responsive site needs, and the Open Graph/Twitter Card tags that control how links look when shared

Everything in this chapter lives inside <head> (Fundamentals Chapter 1) and is invisible on the page itself — but each tag here has real, visible consequences in search results, social media previews, and mobile rendering.

The Essential SEO Meta Tags

<title>Linux Performance Tuning — Free Course</title> <meta name="description" content="Learn to diagnose CPU, memory, disk, and network bottlenecks on Linux, scenario by scenario.">
Linux Performance Tuning — Free Course
osztromok.com › linux › performance
Learn to diagnose CPU, memory, disk, and network bottlenecks on Linux, scenario by scenario.

<title> (already covered in Fundamentals Chapter 1) is what search engines typically show as the clickable headline; the description meta tag is typically shown as the snippet text beneath it — though search engines sometimes substitute their own extracted text if they judge it more relevant to a specific search.

A unique title and description per page matters more than people expect
Using the exact same title and description across every page of a site (a common mistake on small sites) makes search results indistinguishable from each other, and search engines themselves weigh page-specific, unique titles more favourably than identical, generic ones repeated site-wide.

The viewport Tag — Required for Any Responsive Site

<meta name="viewport" content="width=device-width, initial-scale=1">

Without this tag, mobile browsers render the page at a fixed desktop-sized virtual width and zoom out to fit it on screen — every bit of CSS responsive design relies on this tag being present to actually work as intended on a real phone. width=device-width matches the page's width to the actual device; initial-scale=1 sets the starting zoom level to 100%.

A missing viewport tag is one of the most common reasons a "responsive" site doesn't actually look responsive on a phone
The CSS media queries (covered in the CSS courses) that make a layout adapt to screen size depend entirely on the browser knowing the real device width — without this single meta tag, all of that responsive CSS effectively does nothing on mobile.

Open Graph — Controlling Facebook/LinkedIn Link Previews

<meta property="og:title" content="Linux Performance Tuning — Free Course"> <meta property="og:description" content="Learn to diagnose CPU, memory, disk, and network bottlenecks on Linux."> <meta property="og:image" content="https://osztromok.com/images/linux-course-card.jpg"> <meta property="og:url" content="https://osztromok.com/linux/performance">

Without these tags, a link shared on Facebook, LinkedIn, or Discord often shows a generic, unhelpful preview — or guesses at an image/description from the raw page content, sometimes incorrectly. Open Graph tags give explicit control over exactly what appears.

Twitter Cards — A Parallel System for X/Twitter

<meta name="twitter:card" content="summary_large_image"> <meta name="twitter:title" content="Linux Performance Tuning — Free Course"> <meta name="twitter:description" content="Learn to diagnose CPU, memory, disk, and network bottlenecks on Linux."> <meta name="twitter:image" content="https://osztromok.com/images/linux-course-card.jpg">
X/Twitter falls back to Open Graph tags if Twitter-specific ones are missing
Adding both sets of tags is the most thorough approach, but in practice many sites get away with just Open Graph tags plus a single twitter:card value, since X's crawler checks for Open Graph equivalents when its own specific tags aren't present.

Quick Reference of Common Meta Tags

TagPurpose
meta charset="UTF-8"Character encoding — should be the very first thing inside <head>
meta name="description"Search engine snippet text
meta name="viewport"Required for any responsive layout to work on mobile
meta name="robots" content="noindex"Tells search engines NOT to index this specific page
link rel="canonical"Declares the "official" URL when the same content is reachable via multiple URLs

Chapter 5 Quick Reference

  • title + meta description — what typically shows in search results; keep both unique per page
  • meta viewport — required for responsive CSS to actually function on mobile devices
  • Open Graph (og:title/description/image/url) — controls Facebook/LinkedIn/Discord link previews
  • Twitter Cards (twitter:card/title/description/image) — parallel system for X/Twitter, falls back to Open Graph if missing
  • meta charset — should be the very first tag inside <head>
  • meta robots / link canonical — fine-grained control over search engine indexing behaviour
  • Next chapter: accessibility (a11y) fundamentals — ARIA roles, landmarks, alt text best practices