Meta, Link and SEO Essentials
Fill the head with the tags search engines and browsers actually depend on.
The <head> is invisible, but it's where a professional page earns its keep. Here are the tags worth memorizing.
The non-negotiables
<meta charset="UTF-8">— put it first so the browser decodes text correctly.<meta name="viewport" content="width=device-width, initial-scale=1">— without this, mobile layouts are broken.<title>— your single most important SEO tag; it's the clickable headline in search results.<meta name="description">— the snippet under that headline. Write it for humans.
The link tags that matter
<link rel="canonical">— tells search engines the preferred URL when the same page is reachable several ways, preventing duplicate-content penalties.<link rel="icon">— the favicon.<link rel="alternate" hreflang="...">— points to translated versions.
Note that <meta name="keywords"> is dead — search engines ignored it decades ago. Don't waste bytes on it.
Example
Loading editor…
Press Run to see the result.
When to use it
- An SEO team adds unique <meta name="description"> tags to every page to control the snippet shown in Google results.
- A site performance engineer adds <link rel="preconnect"> to warm up DNS and TCP for third-party font origins.
- A developer adds <link rel="canonical"> to paginated list pages to tell search engines which URL is the preferred version.
More examples
Core SEO meta tags
description controls the search snippet; canonical tells crawlers the definitive URL for this content.
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>HTML Tutorial — SoundsCode</title>
<meta name="description"
content="Master HTML with hands-on lessons, interactive examples, and quizzes on SoundsCode.">
<meta name="robots" content="index, follow">
<link rel="canonical" href="https://soundscode.io/html/">
</head>Performance hints in head
preconnect warms the connection, dns-prefetch resolves DNS early, and preload fetches critical assets sooner.
<head>
<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="dns-prefetch" href="https://cdn.soundscode.io">
<link rel="preload" as="image" href="/hero.webp">
<link rel="preload" as="font" href="/fonts/inter.woff2" crossorigin>
</head>Language and alternate links for i18n
hreflang alternate links signal to search engines which URL serves each locale, enabling correct regional indexing.
<head>
<link rel="canonical" href="https://soundscode.io/html/">
<link rel="alternate" hreflang="en" href="https://soundscode.io/html/">
<link rel="alternate" hreflang="de" href="https://soundscode.de/html/">
<link rel="alternate" hreflang="fr" href="https://soundscode.fr/html/">
<link rel="alternate" hreflang="x-default" href="https://soundscode.io/html/">
</head>
Discussion