The Only 5 HTML Tags You Actually Need for Great SEO
Post 2: The Code
When Google skims your page, it relies heavily on semantic markup to determine what is important. Here is the technical breakdown of the HTML elements that control your search appearance and how to structure them cleanly.
1. The <title> Element (The Big Blue Link)
The title tag lives inside the
of your HTML document. It is arguably the most critical piece of SEO metadata because Google uses it to generate the main clickable headline in search results.HTML
<head>
<title>Minimalist Leather Wallets | Handmade in London – BrandName</title>
</head>
Best Practices:
- Unique per page: Every single page on your site must have a completely unique
<title>. Never duplicate them. - Be concise but descriptive: Avoid vague text like
<Home>or<Product Page>. - Avoid keyword stuffing: Writing
<title>Wallets, Cheap Wallets, Buy Wallets Online</title>looks spammy to bots and users alike. Write naturally.
2. The Meta Description Tag (The Snippet text)
The meta description also lives in the <head> block. It doesn't affect your rankings directly, but it acts like ad copy. A compelling description convinces users clicking through search results to choose your link.
HTML
<head>
<meta name="description" content="Discover our collection of slim, vegetable-tanned leather wallets. Handcrafted in London with a lifetime warranty. Free UK shipping.">
</head>
Best Practices:
- Summarise the page accurately: If the description doesn't match the page content, Google will ignore it and scrape random text from your body instead.
- Keep it around 150-160 characters: If it's too long, Google will truncate it with an ellipsis (...).
3. Semantic Heading Structure (<h1> to <h6>)
Once a user clicks through to your site, Google uses your heading hierarchy to build a structural outline of your content. Think of it like a book's table of contents.
HTML
<main>
<h1>How to Care for Full-Grain Leather</h1>
<p>Introduction text goes here...</p>
<h2>1. Cleaning the Surface</h2>
<p>Step-by-step cleaning instructions...</p>
<h3>Choosing the Right Soap</h3>
<p>Details about gentle cleansers...</p>
<h2>2. Conditioning and Hydration</h2>
<p>Information about leather oils...</p>
</main>
Best Practices:
- Maintain chronological order: Never skip heading levels for visual styling (e.g., jumping from an
<h1>straight to an<h3>just because you prefer the font size). Use CSS to handle the typography layout, and keep the HTML perfectly sequential. - Reserve
<h1>for the main title: Treat your<h1>as the page's primary headline.
4. Semantic Links (<a>)
Google crawls the web by following links. To do this efficiently, it requires standard, valid HTML anchor tags with actual destination URLs.
Best Practices:
- Good (Semantic & Crawlable):
HTML
Semantic
<a href="/shop/leather-cleaner">Browse our leather cleaning kits</a>
- Bad (Uncrawlable or Poor Context):
HTML
Non-semantic
<span> onclick="goToPage()">Click here</span>
<a href="/shop/leather-cleaner">Click here</a>
Best Practices:
- Descriptive Anchor Text: The text inside the
<a>tag should clearly describe what the user will find when they click it. Avoid generic phrases like "Read More" or "Link".
5. Semantic Images (<img> and <figure>)
To make sure your visual assets appear nicely in Google Images, wrap them cleanly and always provide accessible context.
HTML
<figure>
<img src="/images/wallet-stitching.jpg"
alt="Close-up of a person hand-stitching a tan leather wallet using a saddle stitch technique"
loading="lazy">
<figcaption>Every wallet is hand-stitched using durable waxed linen thread.</figcaption>
</figure>
Best Practices:
- The
<alt>attribute is mandatory: Write it for a visually impaired user using a screen reader. If it perfectly describes the image to a human who can't see it, it's perfect for Google's bot too. - Native Lazy Loading: Adding
<loading="lazy">tells modern browsers (and modern crawlers) to wait to load the image until it's close to scrolling into view, keeping your initial page weight incredibly light and fast.
If you stumbled across this code guide first and want to zoom out to see how the whole system works, check out my full breakdown: SEO Without the Hype: A Beginner’s Guide to the Google Starter Guide.
The Search Evolution Trilogy
Post 1: SEO Without the Hype (The Foundation)
Focus: Stripping away the noise and mastering the absolute core principles of how search engines look at a website.
Post 2: The Only 5 HTML Tags You Actually Need for Great SEO (The Code)
Focus: Practical, lean implementation. Using semantic markup (<h1>, <title>, <meta>, etc.) to build a clean machine-readable structure.
Post 3: E-E-A-T in the Age of GEO (The Strategy)
Focus: The human element. How that clean HTML structure now serves to prove real-world trust, experience, and authority to both Google and AI engines.
