HTML for SEO, from the title tag to structured data

The title element does the most work

If you only fix one thing, fix the <title> in the <head>. Google uses it as the main source for the clickable headline in results, which it calls the title link (opens in a new tab), and the same text shows in browser tabs and bookmarks.

<head>
  <meta charset="utf-8">
  <title>Sourdough Bread for Beginners: Step-by-Step Recipe | Bake School</title>
</head>

Each page needs its own title, since ten pages all called "Home" or "Untitled" tell Google nothing. Lead with what the page is about. Google publishes no character limit; it trims long titles to the width of the results page, and about 50 to 60 characters usually fits. Stuffing does not help: "Bread, Bread Recipe, Best Bread, Cheap Bread" reads as spam and Google may rewrite it. If you want your brand in there, put it at the end after a dash or a pipe.

When a title is missing, vague or repeated across the site, Google often swaps in your <h1>. A clear title that agrees with the main heading usually avoids the swap. Practise in Title and Charset.

Meta descriptions earn clicks, not rankings

The meta description is a one- or two-sentence summary of the page. Google sometimes shows it as the snippet under the title link, and often writes its own from the page text when that fits the search better.

<meta name="description" content="Make your first sourdough loaf with this beginner recipe: what flour to buy, how to feed a starter, and a simple timeline for one weekend.">

It is not a ranking factor. Its whole job is to persuade someone to click, so be specific and accurate, and write a different one for each important page. Around 150 characters is a sensible length, with no hard limit.

Three other meta tags come up a lot:

• <meta name="keywords"> is ignored by Google. Delete it.
• <meta name="viewport" content="width=device-width, initial-scale=1"> is not optional. Google indexes the mobile version of your pages, so the page has to work on a phone.
• <meta name="robots" content="noindex"> keeps a page out of the results. It suits thank-you pages and internal search results. Every so often a site ships it on every page by accident and vanishes from Google, so check before launch.

Viewport and Description has hands-on practice.

Headings, and the one-h1 argument

Headings label the topics on a page. Give it one clear <h1> that names the subject, then <h2> and <h3> for the parts underneath.

<main>
  <h1>Sourdough Bread for Beginners</h1>
  <h2>What you need</h2>
  <h2>Making the starter</h2>
  <h3>Day 1: Mix flour and water</h3>
  <h2>Baking the loaf</h2>
</main>

People argue about this endlessly, so here is where it stands. Google has said that more than one <h1> causes no ranking problem, and that the exact order of heading levels is not a ranking signal. Heading structure still counts for something. Screen reader users navigate by headings, so one <h1> and a logical order are the accessible choice, and headings that say what each section covers help human readers and search engines alike.

Put the main content in <main> and the navigation in <nav>. That alone will not move your ranking, but it makes the page's layout obvious to any machine reading it; the semantic HTML guide covers these elements in detail. See also the Headings lesson and the lesson on page layout elements.

Links Google can follow, with useful anchor text

Google finds new pages mostly by following links, and the only link it reliably follows is an <a> element with an href attribute.

<!-- Crawlable -->
<a href="/recipes/rye-bread/">rye bread recipe</a>
<!-- Not reliably crawlable -->
<span onclick="location='/recipes/rye-bread/'">rye bread recipe</span>
<a onclick="goTo('rye')">rye bread recipe</a>

The clickable words are the anchor text, and they tell both people and Google what is on the other end. "Rye bread recipe" says something. "Click here" says nothing. Write link text the way you would say it out loud, and do not cram keywords into every link.

Link related pages to each other so nothing important sits more than three or four clicks from the home page. When you link somewhere you do not want to vouch for, add a rel value: rel="sponsored" for paid or affiliate links, rel="ugc" for links in user comments and rel="nofollow" for anything else. The Links lesson covers the basics.

Images, alt text and file names

Images bring visitors from Google Images, and they are usually the heaviest part of a page. Use a real <img> element for any image that means something, because Google does not index CSS background images as images.

<img src="/img/sourdough-crumb.jpg"
  alt="Sliced sourdough loaf showing an open, airy crumb"
  width="800" height="600">

The alt text describes the picture for screen reader users and gives Google context at the same time. Say what the image shows and why it is there, and leave the keyword list out of it. Decorative images get alt="". A file name like sourdough-crumb.jpg is a small extra hint and beats IMG_4031.jpg; BadHTML (opens in a new tab) collects naming and image mistakes like that one. The width and height attributes let the browser reserve space before the image loads, so nothing shifts around. Keep images close to the text they illustrate, and use <figure> with <figcaption> when a caption would help.

More in Images and Good Alt Text.

Canonical URLs and Open Graph tags

Canonical

One recipe can be reachable at five URLs: with and without a trailing slash, with a tracking parameter, sorted by rating, sorted by date. A canonical link tells Google which of them you want shown in results:

<link rel="canonical" href="https://example.com/recipes/sourdough/">

Use an absolute URL, put the tag in the <head> and point it at a page that loads and can be indexed. Google treats it as a strong hint and not an order. It also looks at redirects, internal links and sitemaps, so keep those pointing at the same URL.

Open Graph

Open Graph protocol (opens in a new tab) tags decide what a link looks like when someone pastes it into a social network or a chat app. Google rankings ignore them. People sharing your page do not, and a good preview card gets more clicks than a bare URL.

<meta property="og:title" content="Sourdough Bread for Beginners">
<meta property="og:description" content="A simple first loaf in one weekend.">
<meta property="og:image" content="https://example.com/img/sourdough-og.jpg">
<meta property="og:url" content="https://example.com/recipes/sourdough/">
<meta property="og:type" content="article">

An image of 1200 by 630 pixels looks right on most platforms. You can build one in Favicon and Social Previews.

Structured data with JSON-LD

Structured data describes your content in a shared vocabulary, schema.org, which defines types such as Recipe (opens in a new tab). With it, a search engine knows for certain that this is a recipe, that it takes 24 hours and who wrote it. Google prefers the JSON-LD format, a <script> block that visitors never see:

<script type="application/ld+json">
{
  "@context": "https://schema.org",
  "@type": "Recipe",
  "name": "Sourdough Bread for Beginners",
  "image": "https://example.com/img/sourdough.jpg",
  "author": {"@type": "Person", "name": "Ana Lopez"},
  "totalTime": "PT24H",
  "recipeIngredient": ["500 g bread flour", "350 g water", "10 g salt"]
}
</script>

Keep your expectations realistic. Structured data makes a page eligible for rich results such as recipe cards, breadcrumbs or product details. It does not guarantee them and does not lift rankings in general. The data has to match what is visible on the page; marking up reviews or prices that are not there breaks Google's guidelines.

The list of rich result types also changes. FAQ rich results are now limited to well-known government and health sites, and How-to results have been retired altogether, so check Google's current list of supported types before spending a day on markup. Test what you write with Google's Rich Results Test and the Schema Markup Validator.

Page speed and Core Web Vitals

Google's ranking systems do use page experience signals, Core Web Vitals among them, but relevance and content quality outweigh them by a wide margin. Speed is still worth the effort for a simpler reason: people leave slow pages. The three Core Web Vitals and their "good" thresholds:

Four HTML habits help:

• Give images width and height so the layout does not shift.
• Add loading="lazy" to images below the fold. Never lazy-load the main hero image; mark that one with fetchpriority="high" instead.
• Load scripts with defer so they do not hold up rendering.
• Serve modern formats (WebP, AVIF) at sensible sizes with srcset or <picture>.

Measure with PageSpeed Insights or with Lighthouse in Chrome DevTools. Linking CSS and JavaScript explains defer.