HTML and SEO: Essential On-Page Techniques to Improve Search Rankings

This guide is for site owners, writers and developers who want to know which bits of HTML actually change how a page is crawled, indexed and shown in Google, and which are folklore. You will get the exact markup for each element, a table of what Google does with it, the mistakes I find most often on audits, and a checklist you can run against any page in about ten minutes.

How Google uses your HTML

Google does three things with a page: it crawls it (fetches the HTML and finds links), renders it (runs JavaScript, much like a browser), and indexes it (stores what the page is about). HTML feeds all three. Links tell the crawler where to go next, the head section carries instructions such as canonical and robots directives, and the body text and headings tell Google what the page covers. Then a few elements, mainly the title and meta description, influence how the result looks to searchers.

That gives a useful way to sort HTML into four jobs:

• Discovery: crawlable links and sitemaps help Google find URLs.
• Control: canonical, robots meta, hreflang and redirects tell Google which URL to index and how.
• Understanding: headings, semantic elements, alt text and structured data explain the content.
• Presentation: the title element and meta description shape the search result people see and click.

If you remember those four jobs, most HTML and SEO decisions become easier. A tag that does none of them, like the old keywords meta tag, is not worth your time.

The HTML elements that matter most

Title element

Every page needs its own <title>. Google’s title link documentation asks for descriptive, concise titles, and confirms there is no hard length limit: results are truncated to fit the device. It also lists the other sources Google may use to build the title link, including the H1, og:title, anchor text and other prominent text. So if Google rewrites your title, the usual cause is a title that is vague, stuffed or out of step with the visible heading.

<title>Leather Office Chairs | Free Delivery in Karachi | Example Store</title>

I aim for roughly 50 to 60 characters so the important words show on most screens, put the page topic first and the brand last. My guide to writing title tags that get clicks goes deeper.

Meta description

The description does not affect rankings, but it can affect clicks. Google says snippets are mainly built from page content and it uses the meta description only when that gives a more accurate summary; there is no length limit, and identical descriptions across a site are not helpful (Google Search Central). The same page documents nosnippet, max-snippet and the data-nosnippet attribute if you need to keep text out of snippets.

<meta name="description" content="Ergonomic leather office chairs with lumbar support, 2-year warranty and next-day delivery across Karachi. Compare 14 models by price and size.">

Before publishing, preview how both lines will look in a SERP snippet preview tool, and see how to write meta descriptions for templates.

Headings

Use one H1 that matches the page topic, H2s for the main sections and H3s inside them. Headings are for structure, not styling: if a designer wants big text, that is a CSS class, not an H2. On WordPress sites I regularly find the site name in an H1 on every page plus the post title in a second H1, or sidebar widget titles marked up as H2s that interrupt the outline. Neither breaks a site, but both blur what the page is about. My guide to using header tags has examples. If you use coloured heading text, check it with the WCAG contrast checker.

Links and anchor text

This is where I find the most damaging HTML problems, because they stop Google discovering pages at all. Google generally crawls only <a> elements with an href; links written as <span href>, <a routerLink> or <a onclick="goto(...)"> may not be followed (Google Search Central). The same page asks for descriptive anchor text rather than “click here”, and notes that for linked images the alt text acts as the anchor.

<!-- Crawlable -->
<a href="/office-chairs/leather/">leather office chairs</a>
<!-- Not reliably crawlable -->
<span onclick="location.href='/office-chairs/leather/'">Leather</span>

For how to plan which pages link where, read internal linking.

Images and alt text

Write alt text that describes what is in the image for someone who cannot see it. Decorative images can use an empty alt="" on purpose, but product photos, charts and diagrams need real descriptions. Add width and height attributes so the browser reserves space and the layout does not jump, and use loading="lazy" only on images below the fold, never on the main hero image.

<img src="/img/brown-leather-chair.webp" alt="Brown leather office chair with high back and chrome base" width="800" height="800" loading="lazy">

Canonical, robots and hreflang

These control tags are small but powerful, so a mistake in a template spreads to thousands of URLs. A canonical tag points duplicates (filter URLs, tracking parameters, print versions) to the version you want indexed. A robots meta tag keeps thin pages such as internal search results out of the index. Google notes that when robots tags conflict, the more restrictive one applies, and that the head section must be valid HTML to be machine readable (Google).

<link rel="canonical" href="https://www.example.com/office-chairs/leather/">
<meta name="robots" content="noindex, follow">

Note the straight quotes in both lines. Code copied from word processors often arrives with curly quotes, which silently breaks the tag.

Structured data

JSON-LD in a <script type="application/ld+json"> block tells Google exactly what a page describes: an article, a product with a price, a local business with opening hours. It does not raise rankings directly, but it can make a page eligible for rich results. The rule I hold to is that the markup must match what a visitor can see. My schema markup guide covers the types worth using.

Semantic HTML: does it help rankings?

Semantic elements such as <main>, <article>, <nav>, <header> and <footer> describe the role of each part of the page. I have not seen Google say these elements are a ranking factor, and I would not promise a ranking change from swapping a <div> for a <section>. What they do is make the page easier for screen readers, easier to maintain, and less ambiguous about which part is the main content. Real lists in <ul>, real tables in <table> and real buttons in <button> also make it easier for any system, including AI answer engines, to lift a clean passage or a table from your page.

The practical takeaway: use semantic HTML because it is correct and accessible, not as a ranking trick, and spend your SEO time on the elements in the table above first.

HTML problems I find most often on audits

These are the issues that come up again and again when I run crawls for clients, especially on WordPress, Shopify and custom-built sites in Pakistan and the Gulf:

1. Theme-level duplicates. One template outputs the same title and description for every product or blog page.
2. Plugin conflicts. Two SEO plugins, or a theme plus a plugin, both print a title, canonical or robots tag. Google then gets two instructions.
3. noindex left on after launch. The staging site setting “Discourage search engines” is carried over to the live site.
4. Body elements in the head. A tracking script or chat widget injects an <iframe> or <img> into the head. Browsers close the head early when they hit an element that does not belong there, so canonical and hreflang tags printed after it may be read as part of the body.
5. JavaScript-only navigation. Category menus or “load more” buttons that never output an href, so deep pages are orphaned. See JavaScript SEO for fixes.
6. Mixed-language pages without a lang attribute. English and Urdu content on one site with <html lang="en"> everywhere, and no hreflang tags linking the versions.

HTML SEO checklist

Run this against a page template, not just one URL, because templates are where HTML problems multiply. My free on-page SEO checker pulls most of these values for you.

Do you need to know HTML to do SEO?

You do not need to write a site from scratch, but you do need to read HTML. The skill that pays off is opening View Source (or the rendered HTML in URL Inspection), finding the title, canonical and robots tags, and spotting when something is duplicated or missing. Most CMS platforms, including WordPress with Yoast or Rank Math, let you edit titles, descriptions and canonicals without touching code, and a meta tag generator will write the snippets for you. Template-level fixes, such as heading structure or JavaScript links, usually need a developer, and that is where a technical SEO review earns its keep.

Frequently asked questions

Sources

• HTTP Archive, “Web Almanac 2024: SEO chapter” (2024).
• Google Search Central, “Influencing your title links in search results” (accessed 2026).
• Google Search Central, “Control your snippets in search results” (accessed 2026).
• Google Search Central, “Make your links crawlable” (accessed 2026).
• Google Search Central, “Meta tags and attributes that Google supports” (accessed 2026).

If you would like the HTML on your templates checked line by line, my on-page optimisation service starts with exactly that, or you can send me a question about a specific page.