HTML SEO Basics: Titles, Headings and Structured Data

What you will learn

SEO (Search Engine Optimisation) is a huge field, and most of it — content strategy, backlinks, keyword research — is beyond what HTML alone can do. But a real, meaningful slice of SEO happens purely at the HTML level, through decisions you’ve actually already been learning throughout this course. This lesson pulls those together and adds the one genuinely new topic: structured data, which lets you speak search engines’ language directly.

What search engines actually do with your HTML

A search engine’s crawler downloads your page’s HTML and tries to understand two things: what is this page about, and how good and relevant is it. Both of those judgments lean heavily on structure and clarity — exactly what semantic, well-organised HTML provides. This is the core idea behind everything in this lesson: you don’t need SEO “tricks.” You need genuinely correct, well-structured HTML — search engines are, quite literally, designed to reward it.

<title> and meta description: your search-result listing

You covered both of these properly in the head-and-meta lesson — here’s specifically why they matter for SEO:

<title>Easy Chocolate Chip Cookie Recipe | MyCodeNest</title>
<meta name="description" content="A simple chocolate chip cookie recipe with just 6 ingredients, ready in 25 minutes.">

• <title> is treated as one of the strongest single signals of what your page is about, and it’s the main clickable headline in search results — put your most important, specific words early in it.
• meta description doesn’t directly boost ranking, but it directly affects click-through rate — whether someone actually clicks your already-ranked result over the one next to it. A vague or missing description can cost you real clicks even when you rank well.

Heading hierarchy: your page’s outline, for machines too

<h1>Easy Chocolate Chip Cookie Recipe</h1>
<h2>Ingredients</h2>
<h2>Instructions</h2>

You learned in your very first HTML lessons: one clear <h1>, no skipped levels, headings chosen for outline position rather than size. Search engines read this exact structure to understand your page’s topic hierarchy — a well-organised heading outline tells a crawler precisely what your content covers and how it’s organised, the same way it helps a human skimming the page. A page with no real heading structure — everything crammed into <div>s and styled paragraphs — gives a crawler far less to work with, even if a human reader can still visually make sense of it.

Semantic HTML: structure that carries meaning

You’ve spent this whole course learning semantic elements over generic <div>s — <article>, <nav>, <header>, <footer>, and the text-level ones like <strong>, <time>, <address>. This pays off directly for SEO too:

<article>
  <h1>Easy Chocolate Chip Cookie Recipe</h1>
  <p>Published on <time datetime="2026-09-28">September 28, 2026</time></p>
  ...
</article>

<article> tells a crawler “this is one self-contained piece of content” — exactly the boundary it needs to identify what your page’s actual content is, separate from your site’s shared header, navigation and footer clutter (which repeat identically across every page and aren’t the unique substance a search engine should be ranking).

Alt text: helping image search find you

<img src="cookies.jpg" alt="A plate of golden-brown chocolate chip cookies stacked in a pile">

You learned to write good alt text for accessibility — the exact same description is also how search engines index and rank your images in image search results, a genuinely significant source of traffic for visual content like recipes, products, and tutorials.

Canonical URLs: avoiding duplicate-content penalties

You met this in the head-and-meta lesson — worth restating specifically for SEO:

<link rel="canonical" href="https://mycodenest.dev/blog/html/cookie-recipe">

If the same content is reachable at several URLs (with a tracking parameter, with/without a trailing slash), search engines may see these as separate, competing pages with duplicate content, which can dilute rather than strengthen your ranking. canonical consolidates that signal onto one authoritative URL.

Mobile-friendliness: the viewport tag, again

<meta name="viewport" content="width=device-width, initial-scale=1.0">

Search engines today generally evaluate the mobile version of your page first (a practice known as “mobile-first indexing”) — a page that isn’t properly responsive (which starts with this one meta tag from your very first lesson) is directly penalised in ranking, not just inconvenient for phone visitors.

Structured data: speaking the search engine’s own language

This is the genuinely new topic in this lesson. Everything above helps a crawler understand your content indirectly, through good structure. Structured data goes further — it explicitly labels your content using a shared, standardised vocabulary called Schema.org, so a search engine doesn’t have to infer what something is; you tell it directly.

The modern, recommended way to add structured data is a <script type="application/ld+json"> block, placed in <head> (or <body>), containing JSON that describes your page’s content:

<script type="application/ld+json">
{
  "@context": "https://schema.org",
  "@type": "Recipe",
  "name": "Easy Chocolate Chip Cookies",
  "author": {
    "@type": "Person",
    "name": "MyCodeNest"
  },
  "prepTime": "PT10M",
  "cookTime": "PT15M",
  "recipeYield": "12 cookies",
  "description": "A simple chocolate chip cookie recipe with just 6 ingredients."
}
</script>

• @context is always "https://schema.org" — it tells the search engine which vocabulary you’re using.
• @type names what kind of thing this is — Recipe, Article, Product, FAQPage, Event, and hundreds more defined types exist at schema.org.
• The rest of the object is that type’s specific, defined properties — a Recipe has prepTime and recipeYield; a Product would instead have price and sku.

Why this is worth doing

Structured data is what powers the extra-rich search results you’ve definitely seen yourself — a recipe’s star rating and cooking time shown directly in Google’s results, a product’s price and stock status, an FAQ’s questions expandable right there in the search page, before anyone even clicks through. These are called rich results, and they’re only possible when your page’s structured data explicitly declares the right type and properties.

<script type="application/ld+json">
{
  "@context": "https://schema.org",
  "@type": "FAQPage",
  "mainEntity": [
    {
      "@type": "Question",
      "name": "How long do the cookies take to bake?",
      "acceptedAnswer": {
        "@type": "Answer",
        "text": "About 12-15 minutes at 180°C."
      }
    }
  ]
}
</script>

This FAQPage example, paired with actual <details>/<summary> FAQ content on the visible page (from the previous lesson), is a genuinely common, real-world combination on professional sites.

As a beginner, you don’t need to memorise Schema.org’s hundreds of types and properties. Know that structured data exists, roughly what it looks like, and search “schema.org [type you need]” (like “schema.org Article” or “schema.org Product”) when you need the exact property names for a specific case — official examples are always right there on the schema.org site itself.

Internal linking

<p>
  New to HTML? Start with our
  <a href="/blog/html/html-introduction">HTML introduction</a>
  before trying this recipe's markup.
</p>

Linking between your own pages, using clear, descriptive link text (not “click here”), helps search engines discover and understand the relationships between your pages — and helps real visitors find more of your content, which is, after all, the actual point.

A complete example

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Easy Chocolate Chip Cookie Recipe | MyCodeNest</title>
  <meta name="description" content="A simple chocolate chip cookie recipe with just 6 ingredients, ready in 25 minutes.">
  <link rel="canonical" href="https://mycodenest.dev/recipes/chocolate-chip-cookies">
  <script type="application/ld+json">
  {
    "@context": "https://schema.org",
    "@type": "Recipe",
    "name": "Easy Chocolate Chip Cookies",
    "prepTime": "PT10M",
    "cookTime": "PT15M"
  }
  </script>
</head>
<body>
  <article>
    <h1>Easy Chocolate Chip Cookie Recipe</h1>
    <img src="cookies.jpg" alt="A plate of golden-brown chocolate chip cookies stacked in a pile">

    <h2>Ingredients</h2>
    <ul>
      <li>2 cups flour</li>
      <li>1 cup chocolate chips</li>
    </ul>

    <h2>Instructions</h2>
    <ol>
      <li>Mix dry ingredients.</li>
      <li>Fold in chocolate chips.</li>
      <li>Bake at 180&deg;C for 12 minutes.</li>
    </ol>
  </article>
</body>

Common mistakes

• Treating SEO as separate “tricks” layered on afterward, rather than a natural result of the semantic, well-structured HTML you’ve already been learning throughout this course.
• Stuffing keywords unnaturally into titles, headings or alt text. Modern search engines penalise this rather than rewarding it — write for actual readers, clearly and naturally.
• A missing or generic meta description on every page, quietly costing click-through rate even on pages that already rank well.
• Broken or skipped heading hierarchy, giving crawlers a much weaker signal of your content’s actual structure.
• Writing structured data that doesn’t match the visible page content. This isn’t just ineffective — search engines can penalise structured data that misrepresents what’s actually on the page.
• Forgetting canonical on a site with any URL variation, splitting ranking signal across duplicate URLs.

Interview-style questions

Why does a well-structured heading hierarchy matter for SEO, beyond accessibility? Search engines use the heading structure to understand a page’s topic hierarchy and organisation, similar to how a human skims an outline — a page with no real heading structure gives crawlers far less to work with.

What is structured data, and what does @type specify? Structured data is machine-readable markup (typically JSON-LD) that explicitly labels a page’s content using the shared Schema.org vocabulary. @type specifies what kind of thing the content is — like Recipe, Article or FAQPage — which determines what properties are expected.

What is a “rich result,” and what makes one possible? An enhanced search result showing extra information directly on the search page — like a recipe’s cooking time or an FAQ’s questions — made possible specifically by a page including accurate, matching structured data for that content type.

Why should alt text be written with SEO in mind, not just accessibility? The same descriptive alt text used by screen readers is also what search engines use to index and rank images in image search, a meaningful traffic source for visual content.

Practice

1. Use the Practice in Editor button. Change the recipe’s name, prepTime and recipeYield in the JSON-LD block to describe a different recipe.
2. Write a meta description for this recipe page, under 160 characters, that would make someone want to click it over a competing recipe result.
3. Search “schema.org Article” and identify three properties you’d use to mark up a blog post like the ones on MyCodeNest.
4. Explain in your own words why keyword-stuffing a title ("Cookies Recipe Best Cookies Easy Cookies Chocolate Chip Cookies") is likely to hurt rather than help ranking today.

Recap

• Search engines rely heavily on the same clear structure that makes HTML good for humans: an accurate <title>, a real heading hierarchy, and semantic elements like <article>.
• meta description doesn’t directly boost ranking but strongly affects click-through rate on results you already rank for.
• Good alt text helps both accessibility and image search ranking simultaneously.
• canonical prevents duplicate URLs from diluting your ranking signal; the viewport meta tag matters because search engines evaluate mobile-friendliness directly.
• Structured data (JSON-LD, using Schema.org’s vocabulary) explicitly labels your content’s type and properties, enabling rich search results like recipe cards and FAQ dropdowns.