On-Page SEO: Titles, Meta Descriptions & Headings

SEO Fundamentals

Chapter 2 · On-Page SEO: Titles, Meta Descriptions & Headings

html2-5's own "Meta Tags" chapter named SEO basics as one of its topics without ever teaching how to actually write a good title or description. This chapter delivers on that preview in full — the highest-leverage on-page work a page can have, and genuinely quick to get right once the reasoning behind it is clear.

The Title Tag — Doing Two Jobs at Once

<title>Hiragana Stroke Order Guide — Philip's Learning Blog</title>

The <title> is both a real ranking signal (seo1-1's own ranking stage reads it directly) and the clickable blue link shown in a results page. A title stuffed with repeated keywords can work against both jobs at once — it reads as manipulative to a ranking algorithm built to detect exactly that pattern, and it looks unappealing enough to a real person that it lowers the click-through rate even for a page that did rank well.

Weak title	Why it's weak
"Hiragana Hiragana Learn Hiragana Guide Hiragana"	Repetition reads as manipulation, not relevance
"Home"	Says nothing about the page's own actual content
A 200-character title	Search results truncate around ~60 characters — the rest is wasted

Meta Descriptions — Not a Ranking Signal, but a Real Lever

<meta name="description" content="A clear, illustrated guide to hiragana stroke order, with example words for each character.">

An honest distinction worth getting right

Google has stated directly that the meta description text itself doesn't factor into ranking. What it does is shape the snippet shown under a result — and a well-written one measurably improves click-through rate for a given rank, which is a real, indirect benefit worth the two minutes it takes to write. Skip it and the search engine will auto-generate a snippet from the page's own text, which is often an awkward, out-of-context fragment.

Headings — Structure a Crawler Can Actually Use

web-accessibility1-2 already covered heading hierarchy in depth for screen-reader users navigating by landmark. The exact same structure a screen reader relies on to understand a page's own outline is what a crawler uses to understand which content is the main subject versus a subsection — one clean <h1>, logically nested <h2>/<h3> underneath, no skipped levels.

The same structure, two different beneficiaries

web-accessibility1-2 taught this pattern for a screen reader's own navigation model. Nothing about the markup changes here — the accessibility win and the SEO win come from the identical heading structure, built once.

Hands-On Exercises

Exercise 1

Explain why a keyword-stuffed title tag can hurt a page in two separate ways — not just one — using this chapter's own reasoning.

📄 View solution

Exercise 2

Explain why a meta description can be worth writing carefully even though it isn't a ranking signal, and what happens if a page skips it entirely.

📄 View solution

Exercise 3

Explain why the exact same heading structure serves both an accessibility purpose (web-accessibility1-2) and an SEO purpose, rather than needing two separate markup approaches.

📄 View solution

Chapter 2 Quick Reference

Delivers in full on html2-5's own preview — titles and descriptions taught as a real skill, not a mention
<title> is both a real ranking signal and the clickable result text — keyword-stuffing hurts both at once
Meta descriptions don't affect ranking directly, but shape click-through rate — worth writing, honestly framed
Heading hierarchy is the exact same structure web-accessibility1-2 taught — one build, two beneficiaries
Next chapter: Content Strategy, Search Intent & E-E-A-T