HTML Mastery · Chapter 12
HTML for SEO & Performance
Search engine optimization (SEO) starts with HTML. The tags in your <head> determine how search engines index your page and how it appears in search results.
The Complete SEO <head> Template
<head>
<!-- ── Essentials ─────────────────────────────────── -->
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Primary Keyword — Brand Name | Site Name</title>
<meta name="description" content="Compelling 150-160 character description with primary keyword that encourages clicks from search results.">
<link rel="canonical" href="https://example.com/page">
<!-- ── Open Graph (Facebook, LinkedIn) ───────────── -->
<meta property="og:type" content="article">
<meta property="og:title" content="Page Title">
<meta property="og:description" content="Page description for social sharing">
<meta property="og:image" content="https://example.com/og-image.jpg">
<meta property="og:image:width" content="1200">
<meta property="og:image:height" content="630">
<meta property="og:url" content="https://example.com/page">
<meta property="og:site_name" content="AICodeLab">
<meta property="og:locale" content="en_US">
<!-- ── Twitter / X Cards ─────────────────────────── -->
<meta name="twitter:card" content="summary_large_image">
<meta name="twitter:site" content="@YourHandle">
<meta name="twitter:title" content="Page Title">
<meta name="twitter:description" content="Description for Twitter card">
<meta name="twitter:image" content="https://example.com/twitter-image.jpg">
<!-- ── Indexing Control ──────────────────────────── -->
<meta name="robots" content="index, follow, max-image-preview:large">
<!-- ── Performance ──────────────────────────────── -->
<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preload" href="hero.avif" as="image">
<!-- ── Icons ─────────────────────────────────────── -->
<link rel="icon" href="favicon.ico" sizes="any">
<link rel="icon" href="icon.svg" type="image/svg+xml">
<link rel="apple-touch-icon" href="apple-touch-icon.png">
<link rel="manifest" href="manifest.json">
</head>
SERP Result Preview
This is how your page appears in Google search results:
example.com › tutorials › html-mastery
HTML Mastery — Complete Guide for Beginners | AICodeLab
Learn every HTML tag and attribute with interactive examples. Master semantic HTML, accessibility, SEO, and modern HTML5 features in 15 comprehensive chapters.
Critical On-Page SEO Rules
| Element | Rule | Impact |
|---|---|---|
| <title> | 50-60 characters. Include primary keyword near the beginning. Brand name at end. Each page must have a unique title. | 🔴 Very High — directly shown in results |
| <meta description> | 150-160 characters. Compelling summary with keyword. Each page unique. Google may override with its own snippet. | 🟡 Medium — affects click-through rate |
| <h1> | One per page. Contains the page's primary keyword. Should closely match or be the same as the title tag. | 🔴 Very High — major ranking signal |
| <h2>–<h6> | Structure content logically. Include secondary keywords naturally. Use hierarchy correctly (don't skip levels). | 🟡 Medium — content structure signal |
| <img alt> | Descriptive alt text with keywords where natural. Allows image search indexing. 125 characters max. | 🟡 Medium — image search + accessibility |
| rel="canonical" | Points to the preferred version of a page. Prevents duplicate content issues (www vs non-www, HTTP vs HTTPS). | 🔴 Very High — prevents penalties |
| Semantic HTML | Use proper semantic elements (<article>, <nav>, etc.). Helps search engines understand page structure. | 🟡 Medium — structured understanding |
| Heading hierarchy | One <h1>, multiple <h2>s for sections, <h3>s inside sections. Never use headings for styling purposes. | 🟡 Medium — content organization |
robots Meta Tag — All Values
| Value | Effect |
|---|---|
index / noindex | Allow/prevent the page from being indexed in search results. |
follow / nofollow | Allow/prevent Google from following links on this page. |
noarchive | Don't show a "Cached" version of the page. |
nosnippet | Don't show a text snippet or video preview in search results. |
max-snippet:N | Limit the snippet to N characters. Use -1 for no limit. |
max-image-preview:large | Allow Google to show a large image preview in results. none disables it. |
max-video-preview:N | Maximum number of seconds for video previews. -1 = no limit. |
notranslate | Don't show "Translate this page" in search results. |
noimageindex | Don't index images on this page. |
unavailable_after: date | Don't index this page after the given date. Used for time-limited content. |
JSON-LD Structured Data (Schema.org)
Structured data helps search engines display rich snippets — star ratings, breadcrumbs, FAQs, event dates, and more in search results.
📄 Article
Shows author, publish date, and article headline in Google News and search.
⭐ Product
Shows price, availability, star ratings in search results.
❓ FAQPage
Expands FAQ items directly in the search result — more SERP real estate.
🍞 BreadcrumbList
Shows navigation breadcrumbs in the URL line of the search result.
🎓 Course
Shows course name, provider, and description in education-related searches.
📅 Event
Shows event date, location, and availability directly in results.
<script type="application/ld+json">
{
"@context": "https://schema.org",
"@type": "Article",
"headline": "HTML Mastery — Complete Guide",
"author": {
"@type": "Person",
"name": "AICodeLab Team"
},
"datePublished": "2026-07-27",
"image": "https://example.com/og-image.jpg",
"publisher": {
"@type": "Organization",
"name": "AICodeLab",
"logo": { "@type": "ImageObject", "url": "https://example.com/logo.png" }
}
}
</script>
Chapter Summary
- Write a unique, keyword-rich
<title>(50-60 chars) and<meta description>(150-160 chars) for every page - Always add
rel="canonical"to prevent duplicate content penalties - Include all Open Graph and Twitter Card tags for social sharing previews
- Use JSON-LD structured data to unlock rich snippets in search results
- Proper heading hierarchy (
<h1>once, then<h2>–<h6>) is a major SEO signal