How to write SEO-friendly HTML: the tags that matter

A search engine can't rank what it can't read. It reads your HTML before it reads your words, so great writing on sloppy markup will lose to decent writing on clean markup every time. The good news? The tags that matter are few, they're stable, and you can learn them in one sitting.

1. The title tag — your most valuable line

The <title> is the clickable headline in search results — and the name on your browser tab. It's also the strongest signal you can send about what a page is. Treat it like an ad: lead with the main keyword phrase, tag your brand on the end, and keep it under roughly 60 characters before a search engine cuts it off.

<title>Free HTML Compiler with Live Preview | FastCompiler</title>

Make every title unique. Two pages sharing one title forces search engines to guess — and they'll happily show the wrong page for the wrong query.

2. The meta description — it sells the click

The <meta name="description"> is not a ranking factor. What it does is more direct: it's the grey snippet under your headline in search results, and it decides whether anyone clicks. A clear, specific description beats a keyword-stuffed one every single time.

<meta name="description" content="Run HTML, CSS and JavaScript online with a live preview. No sign-up, no download, fully offline." />

Keep it to 140–160 characters. Write it for someone who has no idea what's on your page — and never reuse a description across pages.

Where your tags land — an annotated search result

FastCompiler

Free HTML Compiler with Live Preview | FastCompiler

↑ the <title> tag

fastcompiler.com —º html-compiler

Run HTML, CSS and JavaScript online with a live preview. No sign-up, no download, fully offline.

↑ your meta description

3. One h1, then a logical heading ladder

Headings are how search engines outline your page. Use exactly one <h1> that echoes your title tag, then step down through <h2> and <h3> in order. Skip a level — h1 straight to h3 — and the outline breaks, confusing crawlers and screen readers alike.

<h1>HTML Compiler with Live Preview</h1>
<h2>Why use an online compiler</h2>
<h3>Instant feedback while you type</h3>

The heading ladder — never skip a level

H1 HTML Compiler with Live Preview

H2 Why use an online compiler

H3 Instant feedback while you type

A heading is a promise about what follows it. If it doesn't deliver, reword it. Doing that one thing improves most pages more than any plugin ever will.

4. Semantic elements map the page for search engines

Before semantic tags, crawlers had to guess where your navigation ended and your content began. Tags like <header>, <nav>, <main>, <article>, <section> and <footer> draw that map for you. They add no styling and cost nothing, but they make your page's structure obvious.

• <main> — the unique content of the page, used once.
• <article> — a self-contained piece of content, like a blog post or a tool card.
• <nav> — navigation links.
• <section> — a themed group of content with its own heading.
• <aside> — complementary content like a sidebar.

5. Alt text on images — free image-search traffic

The alt attribute is read when an image fails to load, when a screen reader passes over it, and by image search. Describe the image plainly — what it is, not what you wish it ranked for.

<!-- good -->
<img src="html-compiler-preview.png" alt="The FastCompiler HTML editor showing code on the left and a live preview on the right">

<!-- not useful -->
<img src="html-compiler-preview.png" alt="image1">

Decorative images take an empty alt (alt="") so screen readers skip them entirely.

6. The canonical tag — no more duplicate confusion

When one page is reachable at several URLs — with and without trailing slashes, with tracking parameters, in different casing — search engines see duplicates and split your ranking between them. A self-referencing <link rel="canonical"> tells them which URL is the real one.

<link rel="canonical" href="https://example.com/blog/seo-friendly-html" />

Put it on every page, even when there's only one URL. It's the cheapest insurance against duplicate-content trouble you can buy.

7. The viewport meta tag — required for mobile indexing

Google ranks the mobile version of your site. Without the viewport tag, phones render your page at desktop width — and search engines write it off as not mobile-friendly.

<meta name="viewport" content="width=device-width, initial-scale=1.0" />

A complete starter template

Here's all of the above in one page. Open the FastCompiler HTML code runner, paste it into the index.html tab, hit Run, and poke at the preview with your browser's developer tools. You'll see every tag doing its job.

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>A Page Title That Describes the Page | Brand</title>
  <meta name="description" content="A 150-character description that makes people want to click.">
  <link rel="canonical" href="https://example.com/this-page">
</head>
<body>
  <header>
    <nav>Links here</nav>
  </header>
  <main>
    <h1>A Page Title That Describes the Page</h1>
    <p>The opening paragraph that previews what the page covers.</p>
    <h2>A logical sub-section</h2>
    <p>More supporting detail.</p>
    <img src="photo.jpg" alt="A plain description of what the photo shows">
  </main>
  <footer>Footer content</footer>
</body>
</html>

Before you publish — a quick checklist

• One unique <title>, under 60 characters, keyword near the front.
• One unique meta description, 140–160 characters.
• Exactly one <h1>; headings descend without gaps.
• Semantic tags around nav, main content and footer.
• Every meaningful image has descriptive alt text.
• Self-referencing canonical on every page.
• Viewport tag present for mobile rendering.

These tags have been stable for years, and they're not going anywhere. Learn them once and every page you ship benefits. Want your social previews to look right too? Read how to test your meta tags and Open Graph tags before you publish. And if you're building FAQ sections, the details element guide shows the no-JavaScript way to do accordions.