SEO-Friendly HTML: How to Help Google Understand Your Page

SEO-friendly HTML helps search engines like Google understand what your page is about. In this lesson you will learn how to write good titles, meta descriptions, headings, links and other HTML that improves SEO.

What is SEO and how does HTML help?

SEO (Search Engine Optimization) means making your pages easy for search engines to find, understand and show to the right people. Google uses a program called a crawler (or bot) that visits pages and reads their HTML. It cannot look at your page like a human. It reads the code. Clear, semantic HTML is like a well-labelled shop: the crawler quickly finds what is on each shelf.

Great content is still the most important part of SEO. HTML cannot make a bad page rank well. But bad HTML can hide a great page.

How to write a good title and meta description

The <title> is the blue clickable line in Google results, and the text in the browser tab. The meta description is the short grey text under it. Google does not always use your description, but a good one often gets used and makes people click.

<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <title>Easy Banana Bread Recipe (One Bowl, 10 Minutes Prep) | Bake Club</title>
  <meta name="description" content="Make soft, moist banana bread with one bowl and 7 simple ingredients. Ready in an hour, with tips for nuts, chocolate chips and vegan swaps.">
  <link rel="canonical" href="https://bakeclub.example/recipes/banana-bread">
</head>

This page shows up in Google with a clear title that matches what people type ("easy banana bread recipe") and a description that explains why it is worth clicking.

Rules for titles and descriptions:

• Every page needs its own unique title and description. Never copy the same one to all pages.
• Put the most important words first. Keep titles to about 50–60 characters, and descriptions to about 150–160, or Google may cut them.
• Write for humans, not robots. No lists of keywords.

Headings, semantic tags, links and images

Google uses your page structure to understand which ideas are most important.

• Use one <h1> per page that says what the page is about, usually similar to the title.
• Use <h2> for main sections and <h3> for sub-sections, in order.
• Use semantic tags like <main>, <article>, <nav> and <footer>, so the crawler knows which part is the real content.
• Write descriptive link text. "Read our banana bread recipe" tells Google what the linked page is about. "Click here" tells it nothing.
• Give images helpful alt text. Google Images uses it, and it helps your page too.

<main>
  <article>
    <h1>Easy Banana Bread Recipe</h1>
    <p>This one-bowl banana bread is soft, sweet and perfect for using old bananas.</p>
    <img src="/images/banana-bread-sliced.webp" alt="Sliced banana bread on a wooden board" width="1200" height="800">
    <h2>Ingredients</h2>
    <ul>
      <li>3 ripe bananas</li>
      <li>80 g melted butter</li>
    </ul>
    <h2>Method</h2>
    <p>Mash the bananas, then stir in the butter.</p>
    <h2>Variations</h2>
    <p>Want more? Try our <a href="/recipes/chocolate-banana-muffins">chocolate banana muffins</a>.</p>
  </article>
</main>

The crawler sees one clear main topic in the <h1>, three sections, a described image and a link whose text explains the next page. Nice clean URLs like /recipes/banana-bread also help. They are easier to read than /page.php?id=8812&cat=3.

Canonical, robots meta and hreflang

Sometimes the same page can be reached at several URLs, for example with tracking codes like ?utm_source=newsletter. The canonical link, <link rel="canonical" href="...">, tells Google which URL is the "real" one. Use the full address, including https://.

The robots meta tag tells search engines what they may do with a page:

<!-- Do not show this page in search results, and don't follow its links -->
<meta name="robots" content="noindex, nofollow">

<!-- Website in English and Spanish -->
<html lang="en">
<head>
  <link rel="alternate" hreflang="en" href="https://bakeclub.example/recipes/banana-bread">
  <link rel="alternate" hreflang="es" href="https://bakeclub.example/es/recetas/pan-de-platano">
  <link rel="alternate" hreflang="x-default" href="https://bakeclub.example/recipes/banana-bread">
</head>

Use noindex for pages like "thank you for signing up" or internal search results, which don't help searchers. You don't need a robots tag on normal pages, because "index, follow" is the default. The hreflang links tell Google which language version to show to which users. x-default is the fallback for everyone else. The lang attribute on <html> still states the language of the current page.

Common mistake: Leaving <meta name="robots" content="noindex"> on a live site after copying it from a test version. Google will remove the whole site from search. Always check this before launch.

Practice exercise

Write the <head> and main content for a page called "How to Care for a Snake Plant". Include a unique title, a meta description, a canonical link, one <h1>, three <h2> sections, an image with alt text and one descriptive link.

Hint: Imagine what someone would type into Google to find this page, and make sure those words appear naturally in the title, description and <h1>.

Frequently asked questions

Does the meta keywords tag help SEO?

No. Google has ignored <meta name="keywords"> for many years. You can leave it out.

Can I use more than one h1?

HTML allows it, and Google says it won't hurt you. But one clear <h1> per page is simpler for both users and screen readers, so it is still the best habit.

How long until Google shows my changes?

It can take from a few days to a few weeks. You can ask Google to re-crawl a page in Google Search Console, a free tool for site owners.

Key takeaways

• SEO starts with good content, and clear HTML helps Google understand it.
• Write a unique, specific <title> and meta description for every page.
• Use one <h1>, headings in order, semantic tags, descriptive links and image alt text.
• Use a canonical link to pick the main URL and noindex to hide pages from search.
• Use lang and hreflang for sites in more than one language.