Stop 02 · HTML5Topics · 11/12

SEO basics

In short

A great site that nobody finds is a diary. SEO (Search Engine Optimisation) is how you help Google understand your page, so it shows up when people search.

The on-page fundamentals — semantic structure, heading hierarchy, descriptive links, fast load times — that help search engines understand and rank your pages. SEO also depends on crawlability, indexability, useful content, internal linking, page experience, and technically sound rendering—not just adding keywords or headings.

The jaadu mascot as a librarian slides colourful books onto the right shelves of a tall bookcase.

Think of it like this

The college library catalogue

A librarian files a book using its title, subject and summary. If the cover is blank, it ends up in the wrong shelf and nobody borrows it. Search engines file your page the same way, from its title, headings and content.

Watch it happen

How a page reaches search results

Discover

Crawl

Index

Rank

Results

1/5Google finds your URL through a link from another page or your sitemap.xml.

The big ideas

What you need to know

Crawl, index, rank

Google's bot visits (crawls) your page, stores what it's about (indexes), then decides where to show it (ranks).

Title and headings matter

A clear <title> and one <h1> that match what people search for tell Google what the page is about.

Links tell a story

Descriptive link text like 'DSA roadmap' beats 'click here'. Good sites linking to you also builds trust.

Speed and mobile count

Google mostly looks at the mobile version of your page. Slow, broken mobile pages rank worse.

See it in code

Walk through the code

html

1<head>2  <title>Frontend Roadmap 2026 for College Students | InsideEdge</title>3  <meta name="description"4    content="A step by step frontend roadmap with projects, from HTML to React." />5  <link rel="canonical" href="https://example.com/roadmaps/frontend" />6</head>7<body>8  <h1>Frontend Developer Roadmap</h1>9  <img src="roadmap.webp" alt="Frontend roadmap from HTML to React" />10  <a href="/roadmaps/dsa">See the DSA roadmap</a>11</body>

1/4The title is often the clickable headline in search results.

canonical tells Google which URL is the main one if the same page is reachable at several addresses.

Save yourself the pain

Common mistakes

Oops

Stuffing the same keyword ten times in every paragraph.

Do this instead

Write naturally for humans. Google is good at spotting keyword stuffing and it can hurt you.

Oops

Giving every page the same <title>.

Do this instead

Each page needs its own clear, specific title.

Your mission

SEO check your portfolio

~25 min

Quick check

Which link text helps SEO and accessibility the most?

Go deeper

1Audit a page you've built with Google's Lighthouse SEO check. Validate your understanding by applying it in a small practical example.
2Learn proper heading hierarchy (one `<h1>`, logical `<h2>`/`<h3>` nesting). Focus on understanding the underlying reason it works, not only memorizing the definition.
3Understand how descriptive alt text and link text help both SEO and accessibility.