HTML for search engines

What search engines see

A search engine crawler downloads your HTML, reads it, and tries to work out what the page is about, how it relates to other pages and who might want it. It does not look at the page the way a person does. It reads text, structure, links and attributes. That is why the HTML lessons so far, with real headings, lists, labelled images and semantic elements, double as good search engine practice.

One honest note before the details: no HTML trick can make a mediocre page rank. Search engines reward pages that are useful, original and easy to use. HTML's job is to make sure that a good page is understood.

Titles and descriptions

The title is the headline in search results and the strongest short signal of a page's topic. Make it unique per page, specific and under about 60 characters. The meta description is the likely snippet; write it for a person deciding whether to click. Both were covered in the lesson on the head.

Headings tell the outline

Use one h1 that names the page's main topic, then h2 for sections and h3 for subsections, without skipping levels. Headings should read like a table of contents. Search engines use them to understand what a page covers, and so do people skimming and screen reader users jumping between sections.

<h1>How to choose a laptop for college</h1>
<h2>Set a budget</h2>
<h2>Screen and battery</h2>
<h3>Battery life tests</h3>

Do not stuff headings with repeated keywords. Write them for people.

Links carry meaning

<!-- Weak -->
<a href="/guides/laptops/">Click here</a>

<!-- Strong -->
<a href="/guides/laptops/">our guide to choosing a laptop</a>

The text of a link describes its target, both to readers scanning the page and to search engines. Link between your own pages generously, using natural wording. A page that nothing links to is hard to discover.

Add rel="nofollow" or rel="sponsored" to paid or untrusted links; use rel="noopener" on links that open a new tab (modern browsers do this by default).

Images

Search engines cannot see pictures; they rely on text:

• alt text describing the image (write for the sighted-impaired reader first; search benefits follow).
• A meaningful file name: masala-chai-recipe.jpg, not IMG_4021.jpg.
• Modern formats and correct sizes, so the page is fast.
• width and height attributes, to avoid layout jumps.

Text inside an image is invisible to crawlers, so keep important words as real text.

Semantic structure

Use main, article, nav, header and footer so crawlers can tell your content apart from repeated menus. Make sure content you want found is in the HTML itself and not only added later by scripts, because while search engines do run scripts, it is slower and less reliable.

Structured data with JSON-LD

Structured data states facts about the page in a standard vocabulary from schema.org. The recommended format is JSON-LD in a script tag:

<script type="application/ld+json">
{
  "@context": "https://schema.org",
  "@type": "Article",
  "headline": "How to choose a laptop for college",
  "datePublished": "2026-03-08",
  "author": { "@type": "Person", "name": "Asha Verma" }
}
</script>

It does not appear on the page, but search engines can use it to better understand the page and, for some types (recipes, products, events, FAQs), to show richer results. It must describe content that is actually visible on the page, and you can test it with Google's Rich Results Test.

A few more basics

• Canonical: <link rel="canonical" href="…"> names the preferred address when similar pages exist.
• Language: <html lang="…">.
• Speed and mobile: a page that loads quickly and works on a phone is a better experience, and search engines factor that in.
• robots: <meta name="robots" content="noindex"> asks search engines not to list a page, such as a thank-you or admin page. It does not protect private content; use a login for that.
• HTTPS: secure sites are the norm.

Things not to bother with

• The keywords meta tag.
• Repeating a phrase in hidden text. This is spam and can get a site penalised.
• Dozens of tiny pages that say almost the same thing.
• Buying links or "SEO packages" promising instant results.

Common mistakes

• Every page with the same title or no title.
• Missing or multiple h1 with no logical order.
• "Click here" links.
• No alt on images that carry meaning.
• Copying other sites' text. Original content is what earns a place.

Exercise

Rewrite this snippet to be better for readers and search engines: the heading, the link and the image.

<div class="big">Laptops</div>
<p>For tips <a href="/laptops/">click here</a>.</p>
<img src="IMG_1.jpg">

<h1>How to choose a laptop for college</h1>
<p>For tips, read <a href="/laptops/">our laptop buying guide</a>.</p>
<img src="student-laptop-desk.jpg" alt="A student working on a laptop at a desk" width="800" height="533">