Topic 11 · 11 of 43

SEO Fundamentals

All in one: every SEO signal, side by side

What this example compares

The pipeline: crawl vs index vs rank vs click, and the orphan page nothing links to
The search result: the URL vs <title> vs <meta name="description">; a vague title (“Home”) vs a unique, descriptive one
Which one is the headline? <title> vs <h1> vs the description vs <header>
The outline: exactly one <h1> with <h2>/<h3> vs many <h1>s vs bold text with no heading tags
Landmarks: <header>, <nav>, <main>, <article>, <footer> vs only <div>s
alt text: a description vs alt="image" vs stuffed alt vs alt="", and what an engine gets when the picture is missing
Link text: “click here” vs words that name the destination
URLs: /courses/web-development vs /page?id=257, and what a good URL does not do
Guiding the crawler: robots.txt vs sitemap.xml vs <meta name="robots"> (and not index.html or manifest.json)
meta robots values: noindex vs nofollow vs the fake name="index" and name="crawl"; a request is not security
What no longer works: meta keywords vs keyword stuffing vs hidden text vs bought links, against real, useful content
Speed: compressed images, width/height, loading="lazy", defer, and the changes that do nothing
Phones and HTTPS: no viewport tag vs the viewport tag, mobile-first indexing, http:// vs https://
One checklist, two wins: the ten-item checklist, and why SEO and accessibility are the same work

Point at any word in the code to see what it means (tap on a phone); click a word to keep its meaning on screen. Read the comment above each numbered panel, press Run, then Edit & experiment to try the TRY lines yourself.

The complete code

Loading the example…

What you should see

You should see fourteen panels of labelled boxes. Panel 2 shows a search result drawn by hand, with its three parts marked, beside a vague “Home” result and a unique, descriptive one. Panel 4 shows one big heading with smaller ones under it, then three big headings in a row, then bold text that only looks like headings. In panel 5 the orange dashed lines and tag names appear only around the semantic tags, not around the divs. Panel 6 shows the campus picture four times and then, where drive.jpg is missing, only its alt words. Card 3 of panel 11 looks empty: its words are white on white. Panel 13 shows a phone with tiny, shrunken text beside one that can be read. Panel 14 lists the checklist with the items that also help accessibility in green. There is no Console panel: the page has no script and prints nothing.

Quick check: to keep one thank-you page out of search results, which do you use, and why not robots.txt?

<meta name="robots" content="noindex"> in the head of that page: it asks engines not to list it. robots.txt is a public file at the site root that asks crawlers to skip whole paths, so a line in it advertises the path to anyone who reads it. Neither is security; a private page needs a login.