Skip to content
html.sh

HTML for SEO

HTML for SEO

Section titled “HTML for SEO”

Good HTML structure helps search engines understand and rank your content. Here’s how to optimize your markup.

Essential Meta Tags

Section titled “Essential Meta Tags”

Every page should have these in the <head>:

Result

Semantic Structure

Section titled “Semantic Structure”

Search engines rely on HTML structure to understand your content:

Use One <h1> Per Page

Section titled “Use One <h1> Per Page”
<h1>Main Topic</h1>           <!-- Only one -->
<h2>Subtopic 1</h2>
  <h3>Detail</h3>
<h2>Subtopic 2</h2>

Use Semantic Elements

Section titled “Use Semantic Elements”
<article>
  <header>
    <h1>Article Title</h1>
    <time datetime="2024-01-15">January 15, 2024</time>
  </header>


  <p>Introduction paragraph...</p>


  <section>
    <h2>First Section</h2>
    <p>Content...</p>
  </section>


  <footer>
    <p>Written by Author Name</p>
  </footer>
</article>

Image Optimization

Section titled “Image Optimization”
Result
Section titled “Links”
Section titled “Internal Links”

Use descriptive anchor text:

<!-- Good -->
<a href="/tutorials/forms">Learn about HTML forms</a>


<!-- Bad -->
<a href="/tutorials/forms">Click here</a>
Section titled “External Links”
<!-- Open in new tab with security attributes -->
<a href="https://example.com"
   target="_blank"
   rel="noopener noreferrer">
  External Resource
</a>


<!-- Indicate nofollow for untrusted links -->
<a href="https://user-submitted.com" rel="nofollow">
  User Link
</a>

Open Graph & Social Media

Section titled “Open Graph & Social Media”

Add these for better social sharing:

<head>
  <!-- Open Graph (Facebook, LinkedIn) -->
  <meta property="og:title" content="Page Title">
  <meta property="og:description" content="Page description">
  <meta property="og:image" content="https://example.com/image.png">
  <meta property="og:url" content="https://example.com/page">
  <meta property="og:type" content="article">


  <!-- Twitter Card -->
  <meta name="twitter:card" content="summary_large_image">
  <meta name="twitter:title" content="Page Title">
  <meta name="twitter:description" content="Page description">
  <meta name="twitter:image" content="https://example.com/image.png">
</head>

Structured Data (JSON-LD)

Section titled “Structured Data (JSON-LD)”

Help search engines understand your content type:

<script type="application/ld+json">
{
  "@context": "https://schema.org",
  "@type": "Article",
  "headline": "How to Learn HTML",
  "author": {
    "@type": "Person",
    "name": "Author Name"
  },
  "datePublished": "2024-01-15",
  "description": "Learn HTML from scratch..."
}
</script>

Common schema types:

  • Article / TechArticle — Blog posts, tutorials
  • HowTo — Step-by-step guides
  • FAQPage — FAQ sections
  • BreadcrumbList — Navigation breadcrumbs

Performance = SEO

Section titled “Performance = SEO”

Fast pages rank better. HTML tips for speed:

<!-- Preload critical resources -->
<link rel="preload" href="/fonts/main.woff2" as="font" crossorigin>
<link rel="preload" href="/css/critical.css" as="style">


<!-- Lazy load below-fold images -->
<img src="below-fold.jpg" loading="lazy" alt="...">


<!-- Async/defer scripts -->
<script src="analytics.js" async></script>
<script src="app.js" defer></script>

SEO Checklist

Section titled “SEO Checklist”
  • Unique, descriptive <title> (50-60 chars)
  • Unique <meta name="description"> (150-160 chars)
  • Single <h1> matching page topic
  • Logical heading hierarchy
  • All images have alt text
  • Descriptive anchor text for links
  • Canonical URL set
  • Open Graph tags added
  • Structured data where appropriate
  • Mobile viewport configured
  • Fast loading (images optimized, scripts deferred)

Resources

Section titled “Resources”