Skip to main content

HTML SEO: Helping People Find Your Pages

Most people find a website the same way: they type a question into a search box. If your page is not in the results, it may as well not exist. SEO, short for search engine optimization, is the craft of making your pages easy for search engines to find, understand, and show to the right people.

The good news for beginners: a lot of SEO is just good HTML. A clear title, honest headings, meaningful elements, descriptive links, and useful content all help people, and they help search engines too. This section teaches the HTML side of SEO, one tag at a time, and is honest about what HTML cannot do.


What You Will Learn in This Section​

  • How search engines crawl, index, and rank pages
  • Writing titles and meta descriptions that people want to click
  • Using headings and semantic HTML to show a page's structure
  • Using canonical links and robots meta to manage duplicates and indexing
  • Adding structured data (JSON-LD) so search engines understand your content
  • Controlling how links look when shared, with Open Graph and Twitter Cards
  • The basics of international SEO (language and region)
  • Which parts of SEO are not in your HTML

The Big Idea​

index.html
<!doctype html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">

  <!-- What the page is called, in search results and tabs -->
  <title>Rye Bread Recipe: Easy No-Knead Loaf | The Bread Bin</title>

  <!-- The summary that may appear under the title -->
  <meta name="description" content="Bake a crusty rye loaf at home with five simple ingredients. No kneading and no special tools.">

  <!-- The main address of this page -->
  <link rel="canonical" href="https://thebreadbin.example/recipes/rye-bread">

  <!-- How the link looks when shared -->
  <meta property="og:title" content="Rye Bread Recipe">
  <meta property="og:image" content="https://thebreadbin.example/img/rye.jpg">
</head>
<body>
  <main>
    <h1>Easy No-Knead Rye Bread</h1>
    <p>...</p>
  </main>
</body>
</html>

Edit the title and the description. Watch the preview change, and see the length hints. Notice how a clear title and an honest summary already look more inviting.

What Is SEO, Really?​

SEO is not a trick to fool a search engine. It is the work of helping a search engine understand your page, so it can match it with people who are looking for it. The goals are simple:

  1. Be findable: search engines can reach and store your pages.
  2. Be understandable: they can tell what each page is about.
  3. Be worth clicking: your result looks clear and trustworthy.
  4. Be worth staying on: the page is useful, fast, and easy to use.

The fourth one matters most. A search engine's whole job is to send people to pages they will be glad they opened.

Be careful with promises

Nobody can guarantee a number one ranking, and anyone who does should be treated with caution. SEO takes weeks or months to show results, and results depend on competition, content, and changes that you do not control.

How Search Engines Work​

Search engines work in stages. Explore each one, and see which HTML helps where.

http://127.0.0.1:5500/index.html

Choose a stage to see what happens, and which HTML helps.

1. Crawl

A program (a crawler) follows links and downloads your pages. It can only find pages that are linked, listed in a sitemap, or already known.

What helps here:

  • Real links with an href
  • robots.txt rules
  • A sitemap file
  • Fast, working pages

If a crawler cannot reach a page, nothing else matters.

A simplified model. Real search engines are more complicated, and each one works a little differently.

Where HTML Helps​

HTML is only one part of SEO, but it is the part you fully control, and the part that makes everything else work.

HTML pieceWhat it does for SEO
<title>Names the page in results, tabs, and bookmarks
<meta name="description">Offers a summary that can appear under the title
Headings (h1 to h6)Show the outline and main topics
Semantic elementsShow which parts are navigation, main content, and so on
Links with clear textHelp crawlers find pages and understand what they are about
Image alt textDescribes images, and helps image search
rel="canonical"Names the main version of a page that exists at several addresses
Robots metaAsks search engines to index or skip a page
Structured dataDescribes your content in a format machines read well
Open Graph and Twitter CardsControl how the link looks when shared
lang and hreflangSay which language and region a page is for

Where HTML Does Not Help​

Honest SEO includes what is outside the page's HTML:

  • Content quality. Helpful, original, accurate content that answers a real question is the biggest factor.
  • Page experience. Fast loading, stable layout, mobile-friendly design, and HTTPS.
  • Links from other sites. Others linking to you is a signal that your page is useful.
  • Authority and trust. Real expertise, clear authorship, and an honest site.
  • Search intent. Whether your page is the kind of page the searcher wanted.
  • Technical setup. Server speed, redirects, sitemaps, and error pages.

A perfect set of tags on a thin, copied page will not get far. And a great page with missing tags can still do well. HTML is the foundation, not the whole building.

White Hat and Black Hat​

  • White hat SEO follows the search engines' guidelines, and helps real people.
  • Black hat SEO tries to trick them: hidden keywords, fake links, copied content, misleading titles, and cloaking (showing crawlers something different).

Black hat tricks may work for a little while, but they put your site at risk of being demoted or removed. They also make a worse web for readers. In this course, we only teach the first kind.

Myth or Fact?​

Test what you already believe about SEO:

http://127.0.0.1:5500/index.html

True or false? Decide each one, then check your answers.

Filling the meta keywords tag with lots of words helps a page rank.
Every page should have its own unique title.
The meta description is a direct ranking factor.
Hiding white text full of keywords on a white background is a smart trick.
A noindex tag makes a page private.
Text in HTML is easier for search engines to understand than text baked into an image.
Paying for search ads improves your normal (organic) ranking.
Fast, mobile-friendly, accessible pages tend to be good for both visitors and search.

Search engines change their advice over time. Check the official documentation for the search engines you care about.

What Is in This Section​

Foundations​

Tools You Will Use​

  • Google Search Console (free): shows which pages are indexed, which searches find you, and any problems. Bing Webmaster Tools is the equivalent for Bing.
  • Lighthouse (in Chrome DevTools): checks basic SEO, speed, and accessibility.
  • Rich Results Test and Schema Markup Validator: test your structured data.
  • Your browser's "view source" and developer tools: see what a crawler gets in your HTML.
  • A site search for your own pages (the site: operator in many search engines) to see what is listed.

Features and names change, so check each tool's current documentation.

Five Habits to Start Today​

  1. Give every page a unique, clear title. Say what the page is.
  2. Write for people first. Answer one real question well.
  3. Use real headings and links. Describe where each link goes.
  4. Add alt text to images that carry meaning.
  5. Check what search engines see. Use Search Console and "view source."

SEO Checklist for Any Page​

  • The page has a lang attribute and a unique <title>
  • There is a helpful, honest meta description
  • There is one clear h1, and headings follow the outline
  • The content is in real text, and links have descriptive text
  • Images have useful alt text, and a sensible size
  • The page has a canonical link, when needed
  • The page can be crawled, unless it is meant to be private (and private pages have a login)
  • Structured data is valid, and matches visible content
  • Social share tags are set (Open Graph and Twitter Cards)
  • The page is fast, mobile-friendly, and served over HTTPS
  • Language and region are clear, if you serve several

Security and Privacy Notes​

  • noindex and robots.txt are not security. They are polite requests to well-behaved crawlers. Pages that must stay private need a login and proper access control.
  • Do not publish private data and hope it is not found. Search engines index what they can reach, including old test pages, staging sites, and files in public folders. Check what is public.
  • Structured data and reviews must be honest. Fake ratings, fake reviews, or markup that does not match the visible page can lead to penalties, and it can mislead people.
  • Be careful with tracking and analytics. Many places require consent for cookies and tracking. Collect the least data you need, and say what you collect. This is not legal advice, so check the rules that apply to you.
  • Beware of SEO scams. Emails promising instant first-page rankings, or tools that ask for passwords or access to your Search Console, are often scams. Give out access carefully.
  • Watch for spam on your own site. User-generated links and comments can be abused. Use rel="ugc" or rel="nofollow" where appropriate, and moderate content.

Global Audience Notes​

  • Search engines differ. Google and Bing are common in many places, but Baidu (China), Yandex (Russia and nearby), and Naver (Korea) matter in others. Each has its own guidelines and tools, so check the ones your readers use.
  • Write in your readers' language, and say so with the lang attribute. For a multilingual site, read the lesson on International SEO.
  • People search in different ways. Words, spellings, and phrases differ by language and country, so translate the meaning, not just the words.
  • Mobile and slow networks matter. In many regions, most visitors use phones on slower connections. Small, fast pages do better.
  • Right-to-left languages and non-Latin scripts need correct lang, dir, and encoding (UTF-8).
  • Laws and rules vary by country, including privacy and advertising rules.

Common Mistakes to Avoid​

  1. Writing for search engines, not people. Stuffed, awkward text hurts everyone.
  2. The same title on every page.
  3. No title, or "Untitled" or "Home" only.
  4. Keyword stuffing, including in alt text, headings, and hidden text.
  5. Relying on the meta keywords tag, which major search engines ignore.
  6. Using headings only for size or style.
  7. Links that say "click here."
  8. Using noindex or robots.txt as if it were security.
  9. Duplicate pages with no canonical.
  10. Content that only appears after heavy scripting, with no fallback.
  11. Chasing tricks, or paying for "guaranteed rankings."
  12. Never checking Search Console or what is really indexed.

Practice Time​

Try these in your browser and your editor:

  1. Use the search preview. Write a title and description for a page you built, and watch the length hints.
  2. Open the explorer, and read each stage. Which stage can you influence the most with HTML?
  3. Take the myth drill. Which answer surprised you?
  4. Use "view source" on a site you like. Find its <title>, description, and canonical link.
  5. Search for a topic you know well. Which results look the most trustworthy, and why?
  6. Open Lighthouse in Chrome DevTools, and run an SEO check on a page you built.
  7. List every page of a small site you built, and give each page a unique title.
  8. Check your page with a screen reader. Do the headings and link texts make sense out of context?
  9. Find one page that you would not want indexed, and decide how to protect it properly.
  10. Bonus: sign up for Google Search Console (free) with a site you own, and read the "Pages" report.

Quick Recap​

Click a question to check your answer.

1. What does SEO stand for, and what is it for?

Search engine optimization. It is the work of helping search engines find, understand, and show your pages to the people who are looking for them.

2. What are the main stages of how search engines work?

They crawl (find and download pages), read and render them, index (store and understand) them, rank them for a search, and show a result.

3. Which HTML helps SEO most?

A unique and clear &lt;title&gt;, an honest meta description, real headings, semantic elements, descriptive links, alt text, and, when needed, canonical, robots, and structured data.

4. What can HTML not do?

HTML cannot make poor content good, give you links from other sites, or guarantee a ranking. Content quality, page experience, and trust matter a great deal.

5. Is noindex a way to keep a page private?

No. It only asks search engines not to list the page. Anyone with the link can still open it. Use a login for private pages.

6. What is the difference between white hat and black hat SEO?

White hat follows search engine guidelines and helps people. Black hat tries to trick search engines, and risks penalties.

Key Takeaways​

  • SEO helps search engines find, understand, and show your pages. Good HTML is where it starts.
  • Search engines crawl, index, rank, and show. Different tags help at different stages.
  • Titles, descriptions, headings, and links are your core tools.
  • Canonical, robots, and structured data guide how search engines treat your pages.
  • Open Graph and Twitter Cards shape how links look when shared.
  • Content quality and page experience matter more than any tag.
  • No one can promise rankings. Beware of tricks and scams.
  • Write for people first, and tell the truth.

Start with HTML SEO Basics, and work through the lessons in order.