← Back to Course Index

Module 0.1: HTML for SEO

Phase 0: Foundations Refresher

Document Structure & Parse Order

An intermediate technical SEO understands that the raw document structure dictates how search engine parsers build their internal representation of a page. Crucial components include:

  • <!DOCTYPE html>: Ensures the browser (and crawler's Web Rendering Service) renders the page in standards mode, preventing quirks mode which can break layout and rendering.
  • <html lang="en">: While Google uses hreflang and content detection for targeting, Bing and screen readers heavily rely on the lang attribute.
  • <head> vs <body>: The <head> contains metadata and directives, while the <body> contains indexable content. A critical SEO failure is a prematurely closed <head> (often caused by an invalid tag like an iframe or image injected into the head), which pushes all subsequent meta tags into the body where Googlebot ignores them.

Semantic HTML5

Semantic HTML5 elements like <header>, <nav>, <main>, <article>, <section>, <aside>, and <footer> provide meaningful context to content blocks.

Crawlers use these tags to segment the page and determine the primary content vs. boilerplate. For example, links inside a <nav> or <footer> are treated differently than links within an <article> or <main> container. The <main> tag is a strong signal for the primary topic of the page.

Heading Hierarchy (Document Outline)

Headings (<h1> to <h6>) should form a logical, nested document outline, similar to a table of contents. They should never be used purely for visual styling.

  • A page should ideally have one primary <h1> that aligns closely with the Title tag.
  • Headings must not skip levels (e.g., jumping from H2 to H4 without an H3).
  • Search engines use the heading hierarchy to understand the relationships between different subtopics on the page and to generate featured snippets.

SEO-Critical <head> Elements

The <head> contains the most vital directives for search engines:

  • Title: The strongest on-page ranking signal. Must be unique and concise.
  • Meta Description: Doesn't directly impact rankings, but heavily influences CTR from the SERPs.
  • Meta Robots: Controls indexing (noindex) and link following (nofollow).
  • Canonical: <link rel="canonical" href="..."> resolves duplicate content issues by pointing to the master version of a URL.
  • Hreflang: <link rel="alternate" hreflang="x" href="..."> maps international versions of a page.

Links and Crawl Signals

For Googlebot to crawl effectively, it requires standard <a href="..."> HTML tags. JavaScript onclick events without a valid href are generally ignored during the crawl phase.

Link attributes help engines contextualize the link's purpose: rel="nofollow" (don't pass equity), rel="sponsored" (paid links), and rel="ugc" (user-generated content). Anchor text provides semantic context about the destination page's topic.

Images & Core Web Vitals

Images play a massive role in both ranking (Google Images) and performance (LCP).

  • Alt text: Essential for accessibility and acts as anchor text for image links.
  • Responsive Images: Using srcset and sizes allows browsers to download the correctly sized image based on the viewport, saving bandwidth.
  • Lazy Loading: Native loading="lazy" defers off-screen images. However, applying lazy loading to above-the-fold hero images will severely harm the Largest Contentful Paint (LCP) metric.

Open Graph & Twitter Cards

While not direct ranking factors for Google Search, the Open Graph protocol (og:title, og:image, etc.) and Twitter Cards are critical technical surfaces. They control how content appears when shared on social media, Slack, or iMessage. A technically sound SEO strategy ensures these tags are dynamically generated and synchronized with standard SEO meta tags.

HTML Validation & Crawlers

Browsers are highly forgiving of invalid HTML, attempting to fix unclosed tags or illegal nesting. Search engines, however, process HTML differently. Severe HTML invalidation—such as a missing closing quote on an attribute or injecting a <div> into the <head>—can cause crawlers to drop entire chunks of content, ignore canonicals, or misinterpret the entire document structure.