SEO-Friendly HTML: A Tag-by-Tag Guide (With a Validated Example)

Search engines read your HTML before anything else. The right elements in the right places tell Google what a page is called, what it is about, which URL is the real one, what the images show and how the content is organized. The wrong ones, or the right ones stuffed with keywords, either do nothing or work against you. This is a tag-by-tag reference to SEO-friendly HTML, with a complete example page at the end that I checked with an HTML validator and Lighthouse.

It focuses on markup. For rendering, status codes, redirects, sitemaps and frameworks, see technical SEO for front-end developers, and for a site-wide audit, the technical SEO checklist. If you want an HTML refresher first, read HTML5, the backbone of a website.

Quick Reference

The Head

Title

The <title> element is one of the main sources Google uses for the clickable title link in results, along with the main visible heading, og:title and anchor text pointing to the page (title link documentation). Google’s guidance: give every page a title, make it descriptive and concise, avoid vague labels such as “Home”, do not stuff keywords, avoid boilerplate repeated across pages, and brand it briefly at the start or end with a separator.

There is no length limit, but Google truncates long titles to fit the screen, so put the important words first. Make the title consistent with the visible <h1>, which helps Google trust it.

<title>How to Brew Pour-Over Coffee | Example Coffee Co.</title>

Meta description

Google usually builds the snippet from the page content that best matches the query, and uses the meta description when it describes the page better (snippet documentation). It is not a ranking factor, but a good one can earn the click. Write a unique, human summary with concrete details; avoid keyword lists and copy reused across pages.

<meta name="description" content="A step-by-step pour-over guide: grind size, water temperature, ratios and timing, with a printable brew chart.">

Meta keywords: skip it

The old version of this post called meta keywords one of the three most important tags. Google’s SEO Starter Guide says Google Search does not use the keywords meta tag. It does no harm, but it does nothing, and it shows competitors your target terms.

Robots meta tag

The default is to index the page and follow its links, so <meta name="robots" content="index, follow"> has no effect; you only need the tag to restrict something. Useful values include noindex (keep the page out of results), nofollow (do not follow links on this page), nosnippet, max-snippet:[n] and max-image-preview:large. A noindex only works if the page is not blocked in robots.txt, because Google has to fetch the page to see it.

<!-- Keep a thank-you page out of search results -->
<meta name="robots" content="noindex">

Canonical link

When the same content is reachable at several URLs (tracking parameters, sort orders, print versions, http vs https), the canonical link tells Google which one you prefer. Google treats it as a strong hint, not a command (canonicalization guide).

• Use an absolute URL, including https://.
• Put a self-referencing canonical on the canonical page itself.
• Point duplicates to the main version. The old version of this post said each duplicate should point “to the other page”, which creates a loop; every version should point to the same preferred URL.
• For www vs non-www and http vs https, use a 301 redirect as well; it is a stronger signal than a tag.

<link rel="canonical" href="https://example.com/guides/pour-over-coffee/">

Charset, viewport and language

Declare <meta charset="utf-8"> first in the head so text decodes correctly, add the viewport tag so the page lays out at device width (Google indexes the mobile version of pages), and set lang on the <html> element.

Open Graph and social tags

Tags such as og:title, og:description and og:image control link previews on social and chat apps. They are not ranking signals for Google, although Google may use og:title as one input for a title link. Add them if your pages get shared.

The Body

Headings

Use one <h1> that states the page topic, then <h2> and <h3> for sections and subsections. Google’s starter guide says heading order does not matter for Search, but a logical outline helps readers, screen-reader users and Google’s understanding of sections. Do not use headings just to make text big; use CSS for that.

Images and alt text

Google’s image SEO guidelines ask for descriptive alt text that fits the context and warn against keyword stuffing. The old advice here, “use up to five keywords” in alt text, is exactly what not to do.

Also from Google’s guidance: use real <img> elements, because Google does not index CSS background images; give files descriptive names like pour-over-kettle.jpg; and when using srcset or <picture>, keep a normal src fallback. Set width and height to prevent layout shift.

Links and anchor text

Google follows <a> elements with an href; it does not follow onclick handlers on other elements (link guidance). Anchor text should describe where the link goes. “See our coffee ratio chart” beats “click here”. Write naturally rather than forcing exact-match keywords into every link; internal links do not need to be “varied” for its own sake, they need to be clear.

For external links, use rel="nofollow" when you do not want to vouch for a site, rel="sponsored" for paid or affiliate links, and rel="ugc" for links in comments and forum posts. The old claim that generic anchors “avoid giving away link juice” is folklore; use the rel values for what they mean.

Semantic elements

Elements such as <header>, <nav>, <main>, <article>, <section>, <aside> and <footer> describe the role of each part of the page. They are not a ranking shortcut, but they make it easier for browsers, assistive technology and crawlers to tell the main content from navigation and boilerplate.

Two corrections to the old version: <header> is not for “the document’s keywords and description” (those are meta tags in the head), and <main> should not contain the site header, navigation and footer.

Structured data

Structured data in JSON-LD describes the page in schema.org terms and can make it eligible for rich results. Google recommends JSON-LD, requires that markup match visible content, and does not guarantee rich results. Test with the Rich Results Test; the old Structured Data Testing Tool that many guides mention has been retired. Some rich result types have also been withdrawn, so do not add markup only for appearance in Google.

CSS and JavaScript

CSS and JavaScript have no SEO tags of their own, but they affect what Google can see and how fast the page loads:

• Do not block CSS or JavaScript in robots.txt; Google needs them to render the page.
• Keep critical content in the HTML rather than injecting it only with JavaScript.
• Load non-critical scripts with defer or async so they do not block rendering.
• Ship less: remove unused CSS and JavaScript and let your build tool minify. I measured how much minification saves in this minification test.
• Inline vs external CSS is not an SEO question. Inline small critical CSS if it speeds up the first render, and keep the rest in cached external files.

If your pages are built with a JavaScript framework (see popular JavaScript frameworks), prefer server-side rendering or prerendering for pages that should rank. The old advice about “keyword density” and forum posting for links does not apply; React SEO covers the framework side in detail.

A Complete Example Page

This page brings the pieces together: language, charset, viewport, a unique title and description, a canonical, Open Graph tags, Article JSON-LD, a header with real navigation links, one <h1>, sections with <h2>s, a responsive image with descriptive alt text and dimensions, descriptive internal links, an aside and a footer.

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <title>How to Brew Pour-Over Coffee | Example Coffee Co.</title>
  <meta name="description" content="A step-by-step pour-over guide: grind size, water temperature, ratios and timing, with a printable brew chart.">
  <link rel="canonical" href="https://example.com/guides/pour-over-coffee/">
  <meta property="og:title" content="How to Brew Pour-Over Coffee">
  <meta property="og:description" content="Grind size, water temperature, ratios and timing for a better cup.">
  <meta property="og:image" content="https://example.com/images/pour-over-kettle.jpg">
  <style>nav a, aside a { display: inline-block; padding: 12px 0; }</style>
  <script type="application/ld+json">
  {
    "@context": "https://schema.org",
    "@type": "Article",
    "headline": "How to Brew Pour-Over Coffee",
    "datePublished": "2026-10-01",
    "dateModified": "2026-10-15",
    "author": { "@type": "Person", "name": "Jane Doe", "url": "https://example.com/about/jane-doe/" },
    "image": "https://example.com/images/pour-over-kettle.jpg"
  }
  </script>
</head>
<body>
  <header>
    <a href="/">Example Coffee Co.</a>
    <nav aria-label="Main">
      <ul>
        <li><a href="/guides/">Brewing guides</a></li>
        <li><a href="/shop/">Shop</a></li>
      </ul>
    </nav>
  </header>
  <main>
    <article>
      <h1>How to Brew Pour-Over Coffee</h1>
      <p>By <a href="/about/jane-doe/">Jane Doe</a> · Updated <time datetime="2026-10-15">15 October 2026</time></p>
      <img src="/images/pour-over-kettle.jpg"
           srcset="/images/pour-over-kettle-800.jpg 800w, /images/pour-over-kettle-1600.jpg 1600w"
           sizes="(max-width: 800px) 100vw, 800px"
           alt="Gooseneck kettle pouring water over coffee grounds in a glass dripper"
           width="1600" height="900" fetchpriority="high">
      <section>
        <h2>What you need</h2>
        <ul>
          <li>Freshly roasted beans and a burr grinder</li>
          <li>A dripper, filter and gooseneck kettle</li>
        </ul>
      </section>
      <section>
        <h2>Water temperature and ratio</h2>
        <p>Start with a 1:16 coffee-to-water ratio. See our <a href="/guides/coffee-ratios/">coffee ratio chart</a> for other strengths.</p>
      </section>
    </article>
    <aside aria-label="Related guides">
      <h2>Related guides</h2>
      <a href="/guides/french-press/">French press brewing guide</a>
    </aside>
  </main>
  <footer>
    <p>© 2026 Example Coffee Co.</p>
  </footer>
</body>
</html>

How I checked it: the JSON-LD parses as valid JSON, html-validate 11.16 reported no problems, and Lighthouse 13.5 scored it 100 for SEO and 100 for accessibility. My first draft scored 95 for accessibility because the related-guide link was too small a tap target, which a line of CSS fixed. A perfect Lighthouse score only means its basic checks pass; it does not predict rankings.

Conclusion

SEO-friendly HTML is mostly honest, standard HTML: a clear title, a useful description, a correct canonical, real links with descriptive text, descriptive alt text, one main heading, semantic structure and structured data that matches the page. Leave out meta keywords and keyword stuffing, add robots rules only when you need to restrict something, and validate what you ship.

FAQs