Skip to content
Guide Docs

HTML and SEO

Proper HTML markup is essential for Search Engine Optimization (SEO). Learn how to structure your HTML to improve search engine rankings and social sharing.

Essential Meta Tags

Basic SEO Meta Tags

<head>
  <!-- Page title (most important) -->
  <title>Page Title - Site Name | 50-60 characters</title>


  <!-- Meta description -->
  <meta name="description"
        content="Compelling description that appears in search results. Should be 150-160 characters.">


  <!-- Charset -->
  <meta charset="UTF-8">


  <!-- Viewport for mobile -->
  <meta name="viewport" content="width=device-width, initial-scale=1.0">


  <!-- Author -->
  <meta name="author" content="Author Name">


  <!-- Keywords (less important now) -->
  <meta name="keywords" content="html, seo, web development">
</head>

Robots Meta Tags

Control search engine crawling:

<!-- Allow indexing and following links (default) -->
<meta name="robots" content="index, follow">


<!-- Prevent indexing -->
<meta name="robots" content="noindex, follow">


<!-- Prevent following links -->
<meta name="robots" content="index, nofollow">


<!-- Prevent indexing and following -->
<meta name="robots" content="noindex, nofollow">


<!-- Prevent caching -->
<meta name="robots" content="noarchive">


<!-- Prevent snippet in search results -->
<meta name="robots" content="nosnippet">


<!-- Maximum snippet length -->
<meta name="robots" content="max-snippet:150">


<!-- Maximum image preview size -->
<meta name="robots" content="max-image-preview:large">

Canonical URL

Prevent duplicate content issues:

<!-- Point to the preferred version -->
<link rel="canonical" href="https://example.com/page">


<!-- Example: Prevent pagination duplicates -->
<!-- On https://example.com/page?page=2 -->
<link rel="canonical" href="https://example.com/page">

Open Graph Protocol

For social media sharing (Facebook, LinkedIn):

<head>
  <!-- Basic Open Graph tags -->
  <meta property="og:title" content="Page Title">
  <meta property="og:description" content="Page description for social sharing">
  <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">


  <!-- Site name -->
  <meta property="og:site_name" content="Site Name">


  <!-- Locale -->
  <meta property="og:locale" content="en_US">


  <!-- Image details -->
  <meta property="og:image:width" content="1200">
  <meta property="og:image:height" content="630">
  <meta property="og:image:alt" content="Image description">
</head>

Open Graph for Articles

<!-- Article-specific tags -->
<meta property="og:type" content="article">
<meta property="article:published_time" content="2024-01-15T12:00:00Z">
<meta property="article:modified_time" content="2024-01-16T10:30:00Z">
<meta property="article:author" content="Author Name">
<meta property="article:section" content="Technology">
<meta property="article:tag" content="HTML">
<meta property="article:tag" content="SEO">

Twitter Cards

Optimize for Twitter sharing:

<head>
  <!-- Twitter Card type -->
  <meta name="twitter:card" content="summary_large_image">


  <!-- Twitter handle -->
  <meta name="twitter:site" content="@username">
  <meta name="twitter:creator" content="@author">


  <!-- Content -->
  <meta name="twitter:title" content="Page Title">
  <meta name="twitter:description" content="Page description for Twitter">
  <meta name="twitter:image" content="https://example.com/image.jpg">
  <meta name="twitter:image:alt" content="Image description">
</head>

Twitter Card Types

<!-- Summary card (default) -->
<meta name="twitter:card" content="summary">


<!-- Summary with large image -->
<meta name="twitter:card" content="summary_large_image">


<!-- App card -->
<meta name="twitter:card" content="app">


<!-- Player card (for video/audio) -->
<meta name="twitter:card" content="player">

Structured Data (Schema.org)

Enhance search results with rich snippets:

<script type="application/ld+json">
{
  "@context": "https://schema.org",
  "@type": "Article",
  "headline": "Article Title",
  "image": "https://example.com/image.jpg",
  "datePublished": "2024-01-15T12:00:00Z",
  "dateModified": "2024-01-16T10:30:00Z",
  "author": {
    "@type": "Person",
    "name": "John Doe",
    "url": "https://example.com/author/john-doe"
  },
  "publisher": {
    "@type": "Organization",
    "name": "Site Name",
    "logo": {
      "@type": "ImageObject",
      "url": "https://example.com/logo.png"
    }
  },
  "description": "Article description"
}
</script>

Organization Schema

<script type="application/ld+json">
{
  "@context": "https://schema.org",
  "@type": "Organization",
  "name": "Company Name",
  "url": "https://example.com",
  "logo": "https://example.com/logo.png",
  "contactPoint": {
    "@type": "ContactPoint",
    "telephone": "+1-555-1234",
    "contactType": "Customer Service"
  },
  "sameAs": [
    "https://facebook.com/company",
    "https://twitter.com/company",
    "https://linkedin.com/company/company"
  ]
}
</script>

Product Schema

<script type="application/ld+json">
{
  "@context": "https://schema.org",
  "@type": "Product",
  "name": "Product Name",
  "image": "https://example.com/product.jpg",
  "description": "Product description",
  "brand": {
    "@type": "Brand",
    "name": "Brand Name"
  },
  "offers": {
    "@type": "Offer",
    "price": "29.99",
    "priceCurrency": "USD",
    "availability": "https://schema.org/InStock",
    "url": "https://example.com/product"
  },
  "aggregateRating": {
    "@type": "AggregateRating",
    "ratingValue": "4.5",
    "reviewCount": "127"
  }
}
</script>
<script type="application/ld+json">
{
  "@context": "https://schema.org",
  "@type": "BreadcrumbList",
  "itemListElement": [
    {
      "@type": "ListItem",
      "position": 1,
      "name": "Home",
      "item": "https://example.com"
    },
    {
      "@type": "ListItem",
      "position": 2,
      "name": "Products",
      "item": "https://example.com/products"
    },
    {
      "@type": "ListItem",
      "position": 3,
      "name": "Product Name",
      "item": "https://example.com/products/product-name"
    }
  ]
}
</script>

FAQ Schema

<script type="application/ld+json">
{
  "@context": "https://schema.org",
  "@type": "FAQPage",
  "mainEntity": [
    {
      "@type": "Question",
      "name": "What is HTML?",
      "acceptedAnswer": {
        "@type": "Answer",
        "text": "HTML stands for HyperText Markup Language. It's the standard markup language for creating web pages."
      }
    },
    {
      "@type": "Question",
      "name": "How do I learn HTML?",
      "acceptedAnswer": {
        "@type": "Answer",
        "text": "You can learn HTML through online tutorials, documentation, and practice."
      }
    }
  ]
}
</script>

Semantic HTML for SEO

Heading Hierarchy

<!-- ✅ Proper heading structure -->
<h1>Main Page Title (only one H1)</h1>
  <h2>Section 1</h2>
    <h3>Subsection 1.1</h3>
    <h3>Subsection 1.2</h3>
  <h2>Section 2</h2>
    <h3>Subsection 2.1</h3>


<!-- ❌ Poor heading structure -->
<h1>Title</h1>
<h3>Skipped H2</h3>
<h1>Multiple H1s (avoid)</h1>

Semantic Elements

<article>
  <!-- Use semantic tags -->
  <header>
    <h1>Article Title</h1>
    <p>By Author Name on January 15, 2024</p>
  </header>


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


  <aside>
    <h3>Related Content</h3>
  </aside>


  <footer>
    <p>Article footer</p>
  </footer>
</article>
<!-- Use descriptive anchor text -->
<a href="/guide/html">Learn HTML</a>


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


<!-- Use rel for external links -->
<a href="https://external.com" rel="nofollow">External Link</a>
<a href="https://external.com" rel="noopener noreferrer">Safe External</a>
<!-- Sponsored links -->
<a href="https://sponsor.com" rel="sponsored">Sponsor</a>


<!-- User-generated content -->
<a href="https://user-link.com" rel="ugc">User Link</a>


<!-- Combination -->
<a href="https://external.com" rel="nofollow noopener">Link</a>

Image SEO

Alt Text

<!-- ✅ Descriptive alt text -->
<img src="golden-retriever-playing.jpg"
     alt="Golden retriever playing fetch in park">


<!-- ❌ Poor alt text -->
<img src="img123.jpg" alt="image">
<img src="dog.jpg" alt="">

Image Attributes

<img
  src="photo.jpg"
  alt="Descriptive alt text"
  title="Image title (tooltip)"
  loading="lazy"
  width="800"
  height="600">

Complete SEO Template

<!DOCTYPE html>
<html lang="en">
<head>
  <!-- Basic meta tags -->
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">


  <!-- SEO meta tags -->
  <title>Page Title - Site Name | 50-60 Characters</title>
  <meta name="description"
        content="Compelling meta description for search results. 150-160 characters.">
  <meta name="author" content="Author Name">
  <meta name="robots" content="index, follow">


  <!-- Canonical URL -->
  <link rel="canonical" href="https://example.com/page">


  <!-- Open Graph -->
  <meta property="og:title" content="Page Title">
  <meta property="og:description" content="Page description for social sharing">
  <meta property="og:image" content="https://example.com/og-image.jpg">
  <meta property="og:url" content="https://example.com/page">
  <meta property="og:type" content="website">
  <meta property="og:site_name" content="Site Name">


  <!-- Twitter Card -->
  <meta name="twitter:card" content="summary_large_image">
  <meta name="twitter:site" content="@username">
  <meta name="twitter:title" content="Page Title">
  <meta name="twitter:description" content="Page description for Twitter">
  <meta name="twitter:image" content="https://example.com/twitter-image.jpg">


  <!-- Favicon -->
  <link rel="icon" type="image/png" href="/favicon.png">


  <!-- Structured Data -->
  <script type="application/ld+json">
  {
    "@context": "https://schema.org",
    "@type": "WebPage",
    "name": "Page Title",
    "description": "Page description",
    "url": "https://example.com/page"
  }
  </script>
</head>
<body>
  <!-- Semantic HTML -->
  <header>
    <nav aria-label="Main navigation">
      <a href="/">Home</a>
    </nav>
  </header>


  <main>
    <article>
      <h1>Main Page Title</h1>
      <p>Content...</p>
    </article>
  </main>


  <footer>
    <p>&copy; 2024 Site Name</p>
  </footer>
</body>
</html>

SEO Best Practices

Do’s

  1. Use unique titles and descriptions for each page
  2. Create descriptive URLs: /products/blue-widget not /p?id=123
  3. Use heading hierarchy properly (H1 → H2 → H3)
  4. Add alt text to all images
  5. Use semantic HTML elements
  6. Include structured data for rich snippets
  7. Make content mobile-friendly
  8. Ensure fast page load times
  9. Use HTTPS for security
  10. Create XML sitemap and robots.txt

Don’ts

  1. Don’t stuff keywords unnaturally
  2. Don’t hide text for search engines
  3. Don’t use duplicate content
  4. Don’t use too many H1 tags (one per page)
  5. Don’t forget mobile optimization
  6. Don’t ignore page speed
  7. Don’t use generic anchor text like “click here”
  8. Don’t forget canonical tags for duplicate pages

Common Mistakes

<!-- ❌ Missing or poor title -->
<title>Page</title>


<!-- ✅ Descriptive title -->
<title>Blue Running Shoes - Men's Athletic Footwear | ShoeStore</title>


<!-- ❌ Missing meta description -->
<!-- No description tag -->


<!-- ✅ Compelling description -->
<meta name="description"
      content="Shop high-quality blue running shoes for men. Free shipping on orders over $50. 30-day returns.">


<!-- ❌ Multiple H1 tags -->
<h1>Header 1</h1>
<h1>Header 2</h1>


<!-- ✅ Single H1 -->
<h1>Main Title</h1>
<h2>Subtitle</h2>


<!-- ❌ Poor alt text -->
<img src="img1.jpg" alt="image">


<!-- ✅ Descriptive alt text -->
<img src="blue-shoes.jpg" alt="Blue running shoes for men on white background">

Testing SEO

Tools

  • Google Search Console: Monitor search performance
  • Google Rich Results Test: Validate structured data
  • PageSpeed Insights: Test page speed
  • Mobile-Friendly Test: Check mobile compatibility
  • Lighthouse: Audit SEO, performance, accessibility

Validation

<!-- Test structured data -->
https://search.google.com/test/rich-results


<!-- Test Open Graph -->
https://developers.facebook.com/tools/debug/


<!-- Test Twitter Cards -->
https://cards-dev.twitter.com/validator

Summary

  • Title and description are crucial for SEO
  • Use semantic HTML for better structure
  • Implement Open Graph for social sharing
  • Add Twitter Cards for Twitter optimization
  • Use structured data for rich snippets
  • Optimize images with alt text and proper format
  • Create proper heading hierarchy (H1 → H2 → H3)
  • Use canonical tags to prevent duplicates
  • Add robots meta to control indexing
  • Make content mobile-friendly
  • Ensure fast page loads
  • Test regularly with SEO tools

Proper HTML structure and meta tags significantly improve search engine rankings and social sharing!