🔍 SEO Basics

Search Engine Optimization

HTML for SEO

Search Engine Optimization (SEO) helps your website rank higher in search results. Proper HTML structure is fundamental to good SEO.

💻 Meta Tags

<head>
    <!-- Title (most important for SEO) -->
    <title>Page Title - Your Site Name</title>
    
    <!-- Description (shows in search results) -->
    <meta name="description" content="Clear, compelling description of your page content. 150-160 characters.">
    
    <!-- Keywords (less important now) -->
    <meta name="keywords" content="html, seo, web development">
    
    <!-- Author -->
    <meta name="author" content="Your Name">
    
    <!-- Canonical URL -->
    <link rel="canonical" href="https://example.com/page">
    
    <!-- Viewport (mobile-friendly) -->
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
</head>

🔧 Open Graph (Social Media)

<head>
    <!-- Open Graph meta tags for social sharing -->
    <meta property="og:title" content="Your Page Title">
    <meta property="og:description" content="Page description">
    <meta property="og:image" content="https://example.com/image.jpg">
    <meta property="og:url" content="https://example.com/page">
    <meta property="og:type" content="website">
    
    <!-- Twitter Card -->
    <meta name="twitter:card" content="summary_large_image">
    <meta name="twitter:title" content="Your Page Title">
    <meta name="twitter:description" content="Page description">
    <meta name="twitter:image" content="https://example.com/image.jpg">
</head>

🎨 Semantic Structure

<!-- Proper heading hierarchy -->
<h1>Main Page Title (only one per page)</h1>
    <h2>Section Heading</h2>
        <h3>Subsection</h3>
        <h3>Another Subsection</h3>
    <h2>Another Section</h2>

<!-- Semantic elements help SEO -->
<article>
    <header>
        <h1>Article Title</h1>
        <time datetime="2025-01-15">January 15, 2025</time>
    </header>
    <p>Article content...</p>
</article>

🔗 Link Best Practices

<!-- Descriptive link text (good for SEO) -->
<a href="/guide">Read our complete HTML guide</a>

<!-- Avoid generic text -->
<a href="/guide">Click here</a> <!-- Bad -->

<!-- External links -->
<a href="https://external.com" rel="noopener noreferrer">
    External Site
</a>

<!-- Internal links (help crawlers) -->
<nav>
    <a href="/">Home</a>
    <a href="/about">About</a>
    <a href="/blog">Blog</a>
</nav>

🖼️ Image SEO

<!-- Descriptive alt text -->
<img src="blue-mountain-sunset.jpg" 
     alt="Sunset over blue mountains with orange sky">

<!-- Descriptive filename -->
<!-- Good: product-red-shoes.jpg -->
<!-- Bad: img12345.jpg -->

<!-- Responsive images -->
<picture>
    <source srcset="image-large.jpg" media="(min-width: 800px)">
    <source srcset="image-medium.jpg" media="(min-width: 400px)">
    <img src="image-small.jpg" alt="Description">
</picture>

📋 Structured Data

<!-- JSON-LD structured data -->
<script type="application/ld+json">
{
  "@context": "https://schema.org",
  "@type": "Article",
  "headline": "HTML SEO Guide",
  "author": {
    "@type": "Person",
    "name": "John Doe"
  },
  "datePublished": "2025-01-15",
  "image": "https://example.com/image.jpg"
}
</script>

<!-- Microdata example -->
<div itemscope itemtype="https://schema.org/Product">
    <h1 itemprop="name">Product Name</h1>
    <span itemprop="price">$19.99</span>
</div>

🎯 SEO Checklist

  • Title tag: Unique, descriptive (50-60 chars)
  • Meta description: Compelling (150-160 chars)
  • H1 tag: Only one per page, descriptive
  • Heading hierarchy: Logical structure (h1 → h6)
  • Alt text: All images have descriptive alt
  • Mobile-friendly: Responsive design
  • Fast loading: Optimize images and code
  • HTTPS: Secure connection
  • Sitemap: XML sitemap for crawlers
  • Quality content: Original, valuable content

🎯 Key Takeaways