Skip to main content

HTML SEO Basics

Before you learn any single tag, it helps to see the whole picture. What does a search engine actually receive when it visits your page, and what in that HTML helps it make sense of it?

This lesson is your map. It covers the basics that every page needs, with a quick look at each. The next lessons zoom in on the big ones: titles, descriptions, headings, semantics, canonical links, robots, structured data, and sharing.


What You Will Learn​

  • What a search engine receives when it visits your page
  • The head essentials every page needs
  • Writing real text, headings, and links that crawlers can use
  • How to treat images and URLs
  • Mobile and speed basics that live in your HTML
  • How JavaScript can hide content from crawlers
  • Why status codes, sitemaps, and robots.txt matter
  • How to check a page

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">
  <title>Rye Bread Recipe: Easy No-Knead Loaf | The Bread Bin</title>
  <meta name="description" content="Bake a crusty rye loaf at home with five simple ingredients.">
  <link rel="canonical" href="https://thebreadbin.example/recipes/rye-bread">
</head>
<body>
  <header>
    <nav aria-label="Main">
      <a href="/recipes">Recipes</a>
      <a href="/about">About</a>
    </nav>
  </header>
  <main>
    <h1>Easy No-Knead Rye Bread</h1>
    <p>Bake a crusty rye loaf with five simple ingredients.</p>
    <img src="/img/rye-bread.jpg" alt="A rye loaf cooling on a wooden board" width="800" height="600">
    <h2>Ingredients</h2>
    <ul>
      <li>500 g rye flour</li>
      <li>350 ml warm water</li>
    </ul>
    <p><a href="/recipes/rye-bread/steps">Read the step-by-step method</a></p>
  </main>
  <footer>...</footer>
</body>
</html>

Switch each part from the risky choice to plain HTML, and watch what the crawler can suddenly find. Nothing here is clever. It is just meaningful HTML.

What a Search Engine Receives​

When a crawler visits your page, it first downloads the raw HTML from your server. It looks for:

  • The head: title, description, canonical, robots, language.
  • The text in the body, and how it is organised into headings and sections.
  • The links, to find more pages.
  • The images, with their alt text.
  • Any structured data.

Many search engines can then also run your JavaScript to see the final page, but that step can be slower, can be limited, and does not happen with every crawler. So the safest rule is: put the important things in the HTML itself.

See what a crawler sees

Right-click your page and choose View page source. This shows the raw HTML the server sent, before any scripts ran. If your key text, headings, and links are missing there, they may be missing for crawlers too. (The browser's Elements panel in developer tools shows the page after scripts have run, which is different.)

The Head Essentials​

TagWhy it matters
<!doctype html>Tells browsers to use standards mode
<html lang="en">Says what language the page is in
<meta charset="utf-8">Makes sure characters display correctly
<meta name="viewport" ...>Makes the page scale properly on phones
<title>Names the page in results and tabs
<meta name="description">Offers a summary for the result snippet
<link rel="canonical">Names the main address of the page

You can read the basics of the first few in Title, Viewport, and Charset. The next lessons cover title, description, and canonical in an SEO light.

The Body: Real Text, Real Structure​

Search engines are built to read text. Help them:

  • Put your content in real text, not in images. If you must use an image of text, add alt text that repeats the words.
  • Use one h1 that says what the page is about, and h2 to h6 for sections. See Headings and SEO.
  • Use semantic elements such as main, nav, article, section, and footer. See Semantic HTML and SEO.
  • Use lists and tables for lists and data. They carry meaning.
  • Write one clear topic per page, answering a real question. If you cover two different topics, make two pages.
  • Write for people. Repeating a keyword over and over helps no one.

Crawlers discover your site by following links. A link is only a link if it is a real a element with an href.

<!-- Good: a crawler can follow it, and so can a keyboard -->
<a href="/recipes/rye-bread">Rye bread recipe</a>

<!-- Poor: no href, so no link -->
<a onclick="go('/recipes/rye-bread')">Rye bread recipe</a>
<span onclick="go('/recipes/rye-bread')">Rye bread recipe</span>
  • Write descriptive link text. "Rye bread recipe" says far more than "click here." It helps people, screen readers, and crawlers. See also Accessible Links.
  • Link between your own pages, so no page is an "orphan" with nothing pointing at it. See Internal Links.
  • Choose rel values for outside links when it matters: rel="nofollow" for links you do not want to vouch for, rel="sponsored" for paid links, and rel="ugc" for links in user comments. See External Links.

Images​

  • Add useful alt text that describes what the image shows. It helps accessibility and image search. See Alt Text.
  • Give images clear file names, such as rye-bread-loaf.jpg rather than IMG_0042.jpg.
  • Set width and height, so the page does not jump while images load.
  • Use the right size and format. Huge images slow the page. See Responsive Images.
  • Lazy-load images below the fold with loading="lazy", but not your main image at the top. See Lazy Loading.

Clean URLs​

An address is part of the experience. People see it, share it, and sometimes read it aloud. Try the checker:

http://127.0.0.1:5500/index.html


6 things to improve.

  • Improve: Uses http. Prefer https.
  • Improve: Has capital letters. Paths can be case sensitive, so lowercase is safer.
  • Improve: Contains spaces. Use hyphens.
  • Improve: Has underscores. Hyphens are easier to read as word breaks.
  • Improve: 3 query parameters. Many parameters can create endless duplicate pages.
  • OK: A reasonable length (25 characters).
  • OK: Has readable words.
  • Improve: Contains a session id. This is private data and creates duplicate pages.

These are friendly guidelines, not laws. Search engines can handle many kinds of addresses. Clear, stable, readable ones are simply easier for people, and less likely to cause problems.

Some friendly habits:

  • Use words that describe the page: /recipes/rye-bread.
  • Use lowercase and hyphens, not spaces or underscores.
  • Keep them short and stable. If an address must change, redirect the old one to the new one with a permanent redirect (301).
  • Avoid long strings of parameters and anything private, such as session ids or emails.
  • Use https everywhere.

Mobile and Speed Basics​

Most searches today happen on phones, and search engines largely look at the mobile version of your page. A page that is slow or hard to use on a phone is hard to love. Several basics live in your HTML:

  • The viewport meta tag, so the page scales to the device.
  • Responsive layouts, which are covered in your CSS lessons.
  • width and height on images, to avoid layout jumps.
  • defer or async on scripts, so they do not block the page. See Script.
  • Small, compressed images and few heavy third-party scripts.
  • Large tap targets and readable text.

Speed and page experience are only part of ranking, but slow pages also lose visitors, whatever the ranking.

JavaScript and SEO​

Many modern sites build pages in the browser with JavaScript. That can work, but it adds risk:

  • The crawler may see an empty page at first, and fill in the content later.
  • Some search engines, social apps, and other bots do not run scripts.
  • Content that only loads after a click or scroll may never be seen.
  • Links created without href are not followed.

How to stay safe:

  1. Send the important content in the first HTML (server-side rendering or static generation). Docusaurus, which powers this site, builds static HTML pages for exactly this reason.
  2. Use real links for navigation, even in a single-page app.
  3. Give each page its own address, title, and description.
  4. Test with "view source" and with Search Console's URL inspection tool.

Status Codes, Sitemaps, and robots.txt​

A few things sit outside your HTML, but they affect everything:

  • Status codes. A working page returns 200. A moved page returns a redirect (301 for permanent). A missing page should return 404. A page that says "not found" but returns 200 is called a soft 404, and confuses search engines.
  • A sitemap (usually sitemap.xml) lists the pages you want found. It helps, but it does not guarantee they are indexed.
  • robots.txt is a file at the top of your site that asks crawlers which paths to avoid. It controls crawling, not whether a page can appear in results. The robots meta tag is covered in Robots Meta.

Check Your Page​

Run the checker on the messy page. Fix every problem in the box, and then try the fixed page.

check.html
<!-- Things the checker looks for -->
<title>Home</title>                   <!-- too generic -->
<h1>Welcome</h1>                      <!-- vague, and there are two -->
<a>Recipes</a>                        <!-- no href -->
<a href="/more">click here</a>        <!-- vague link text -->
<img src="IMG_0042.jpg">              <!-- no alt, no size, bad file name -->
<meta name="robots" content="noindex"> <!-- is this on purpose? -->

Check it by hand​

  1. View the page source. Is your content in there?
  2. Search for your own page with site:yourdomain.com in a search engine, to see what is listed.
  3. Use Google Search Console (or Bing Webmaster Tools) and its URL inspection tool, to see how a search engine saw your page.
  4. Run Lighthouse in Chrome DevTools for a basic SEO, speed, and accessibility check.
  5. Try your page on a phone, on a slow connection if you can.

Good Habits​

  • Put the important content in the HTML.
  • Give each page one purpose, a unique title, and a description.
  • Use real links with descriptive text.
  • Describe images, and give them sizes.
  • Keep addresses clean and stable, with redirects when they change.
  • Test on mobile, and on slow connections.
  • Check with "view source" and Search Console.
  • Be patient. SEO takes time.

SEO Basics Checklist​

  • doctype, lang, charset, and viewport are set
  • The title is unique and descriptive
  • There is a meta description
  • There is one h1, and headings follow an outline
  • Main content is real text inside main
  • Links are real a elements with href, and descriptive text
  • Images have alt text, clear names, and width and height
  • Addresses are clean, lowercase, and stable, and use https
  • Old addresses redirect with 301
  • Missing pages return 404
  • Important content appears in "view source"
  • A sitemap exists, and robots.txt does not block what you want found

Security and Privacy Notes​

  • Do not put private information in URLs. Emails, tokens, and session ids in an address end up in browser history, logs, and shared links, and can be indexed.
  • Check what is public. Staging sites, test pages, backups, and admin screens can be found by crawlers if they are reachable. Protect them with a login, and not only with noindex or robots.txt.
  • robots.txt is public. Anyone can read it, so do not list secret paths in it.
  • Use https. It protects visitors, and search engines prefer it.
  • Watch out for hidden text and cloaking, showing crawlers something different from what people see. It is against search guidelines, and it can look like a security problem.
  • Use rel="ugc" or rel="nofollow" on links added by visitors, and moderate comments, to limit spam.
  • Respect privacy laws if you add analytics or tracking. This is not legal advice, so check the rules that apply to you.

Global Audience Notes​

  • Set lang correctly, and write each page in one main language. See International SEO.
  • Use UTF-8 so names and scripts from any language display correctly.
  • Addresses can contain non-English words. Many sites keep addresses in a simple form (transliterated or English) for easier sharing. Whatever you choose, be consistent.
  • Mobile and slow networks matter most in many regions. Test on modest phones.
  • Search engines differ by country. Check the guidelines of the ones your readers use.
  • Date, currency, and units should match your readers' region.

Common Mistakes to Avoid​

  1. Hiding content in scripts, so "view source" shows an empty page.
  2. Links with no href, or buttons used as links.
  3. Text inside images with no alt text.
  4. Generic titles such as "Home" on every page.
  5. No h1, or several of them, or headings used only for style.
  6. Link text like "click here."
  7. Messy, long, changing addresses, with no redirects.
  8. Missing viewport tag, so phones show a tiny page.
  9. Large, unsized images.
  10. Using noindex by accident, often left over from testing.
  11. Soft 404 pages that say "not found" but return 200.
  12. Never checking what search engines actually see.

Practice Time​

Try these in your browser and your editor:

  1. Use the crawler's view lab. Which risky choice would you be most likely to make by accident?
  2. Use the URL checker on three addresses from your own projects.
  3. Run the basics checker on the messy page, fix every problem, and run it again.
  4. Open a page you built, and choose View page source. Is your main content there?
  5. Search for site: and your domain. How many of your pages are listed?
  6. Find a "click here" link in one of your pages, and rewrite it.
  7. Add width and height to every image in a page.
  8. Add a meta description and a canonical link to a page.
  9. Run Lighthouse on a page, and fix one SEO item it reports.
  10. Bonus: build a three-page site where every page is linked from at least one other page, and has a unique title and description.

Quick Recap​

Click a question to check your answer.

1. What does a crawler first receive from your page?

The raw HTML from the server. It reads the head, the text and structure, the links, the images, and any structured data. Running JavaScript is a later, less certain step.

2. What are the head essentials?

The doctype, the lang attribute, the charset, the viewport meta tag, a title, a meta description, and, when needed, a canonical link.

3. What makes a link something a crawler can follow?

It must be an &lt;a&gt; element with an href. Click handlers on other elements are not links.

4. Why set width and height on images?

So the browser can reserve space for them, and the page does not jump around while images load.

5. How can JavaScript hurt SEO?

Content that only appears after scripts run can be missed or delayed, and some crawlers do not run scripts. Send important content in the HTML, and use real links.

6. What is a soft 404?

A page that tells people "not found" but returns a 200 (success) status code. Return a real 404 for missing pages.

Key Takeaways​

  • Put the important content in the HTML. "View source" shows what a crawler gets first.
  • Every page needs the head essentials, a unique title, and a description.
  • Use real text, headings, and semantic elements so the structure is clear.
  • Real links with descriptive text help crawlers, people, and screen readers.
  • Describe images, give them sizes, and name them clearly.
  • Keep addresses clean and stable, and redirect when they change.
  • Mobile, speed, and JavaScript choices can help or hurt.
  • Check your pages, and be patient.

Next, learn how to write a title that people and search engines both understand, in Title (SEO).