This skill provides essential SEO optimization guidelines for static HTML pages to improve search engine visibility and user experience.

Essential Meta Tags

Basic SEO Meta Tags

html

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    
    <!-- Primary Meta Tags -->
    <title>Page Title - Your Brand Name (50-60 characters)</title>
    <meta name="title" content="Page Title - Your Brand Name">
    <meta name="description" content="Clear, concise description of page content in 150-160 characters that entices clicks from search results.">
    <meta name="keywords" content="keyword1, keyword2, keyword3">
    <meta name="author" content="Your Name or Company">
    <meta name="robots" content="index, follow">
    
    <!-- Canonical URL -->
    <link rel="canonical" href="https://yourdomain.com/page-url">
</head>

Open Graph Meta Tags (Social Media)

html

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

<!-- Twitter Card -->
<meta property="twitter:card" content="summary_large_image">
<meta property="twitter:url" content="https://yourdomain.com/page-url">
<meta property="twitter:title" content="Page Title">
<meta property="twitter:description" content="Page description for Twitter">
<meta property="twitter:image" content="https://yourdomain.com/image.jpg">

Semantic HTML Structure

Proper Document Hierarchy

html

<!DOCTYPE html>
<html lang="en">
<head>
    <!-- Meta tags and links -->
</head>
<body>
    <!-- Skip to main content link for accessibility -->
    <a href="#main-content" class="visually-hidden-focusable">Skip to main content</a>
    
    <header>
        <nav aria-label="Main navigation">
            <!-- Navigation -->
        </nav>
    </header>
    
    <main id="main-content">
        <article>
            <header>
                <h1>Main Page Heading (Only One H1 per Page)</h1>
            </header>
            
            <section>
                <h2>Section Heading</h2>
                <p>Section content...</p>
            </section>
            
            <section>
                <h2>Another Section</h2>
                <h3>Subsection</h3>
                <p>Subsection content...</p>
            </section>
        </article>
    </main>
    
    <aside>
        <!-- Sidebar, related content -->
    </aside>
    
    <footer>
        <!-- Footer content -->
    </footer>
</body>
</html>

Heading Hierarchy Rules

•Use one <h1> per page (main title)
•Follow sequential order: h1 → h2 → h3 (don't skip levels)
•Use headings for structure, not styling
•Keep headings descriptive and keyword-rich

Image Optimization

SEO-Friendly Images

html

<!-- Good: Descriptive alt text and proper attributes -->
<img src="product-laptop-pro-2024.jpg" 
     alt="Silver laptop computer with 15-inch display and backlit keyboard"
     loading="lazy"
     decoding="async"
     width="800"
     height="600">

<!-- Decorative images should have empty alt -->
<img src="decorative-pattern.jpg" alt="" role="presentation">

Image Best Practices

•Use descriptive, keyword-rich file names: blue-running-shoes.jpg not IMG_1234.jpg
•Always include alt text (describe image for screen readers and SEO)
•Specify width and height to prevent layout shifts
•Use loading="lazy" for images below the fold
•Compress images for faster load times
•Use modern formats (WebP) with fallbacks

Links & Navigation

Internal Links

html

<!-- Good: Descriptive anchor text -->
<a href="/products/laptop">View our laptop collection</a>

<!-- Avoid: Generic anchor text -->
<a href="/products/laptop">Click here</a>

External Links

html

<!-- External link with security -->
<a href="https://external-site.com" 
   target="_blank" 
   rel="noopener noreferrer">
    External Resource
</a>

Breadcrumb Navigation

html

<nav aria-label="Breadcrumb">
    <ol class="breadcrumb">
        <li class="breadcrumb-item"><a href="/">Home</a></li>
        <li class="breadcrumb-item"><a href="/products">Products</a></li>
        <li class="breadcrumb-item active" aria-current="page">Laptops</li>
    </ol>
</nav>

Performance Optimization

Critical Resource Loading

html

<head>
    <!-- Preconnect to external domains -->
    <link rel="preconnect" href="https://cdn.jsdelivr.net">
    <link rel="dns-prefetch" href="https://fonts.googleapis.com">
    
    <!-- Preload critical resources -->
    <link rel="preload" href="styles.css" as="style">
    <link rel="preload" href="main.js" as="script">
</head>

Script Loading Strategy

html

<!-- Defer non-critical JavaScript -->
<script src="script.js" defer></script>

<!-- Async for independent scripts -->
<script src="analytics.js" async></script>

Structured Data (Schema.org)

Product Schema Example

html

<script type="application/ld+json">
{
  "@context": "https://schema.org/",
  "@type": "Product",
  "name": "Product Name",
  "image": "https://yourdomain.com/product-image.jpg",
  "description": "Product description",
  "brand": {
    "@type": "Brand",
    "name": "Brand Name"
  },
  "offers": {
    "@type": "Offer",
    "price": "99.99",
    "priceCurrency": "USD",
    "availability": "https://schema.org/InStock"
  }
}
</script>

Organization Schema Example

html

<script type="application/ld+json">
{
  "@context": "https://schema.org",
  "@type": "Organization",
  "name": "Your Company Name",
  "url": "https://yourdomain.com",
  "logo": "https://yourdomain.com/logo.png",
  "contactPoint": {
    "@type": "ContactPoint",
    "telephone": "+1-555-555-5555",
    "contactType": "Customer Service"
  }
}
</script>

Content Optimization

Text Content Best Practices

•
Keyword Placement: Include primary keywords in:
- •Page title
- •First paragraph
- •Headings (H1, H2)
- •Image alt text
- •URL slug
•
Content Length: Aim for 300+ words for better indexing
•
Readability: Use short paragraphs, bullet points, clear language
•
Unique Content: Avoid duplicate content across pages

URL Structure

code

Good URLs:
https://example.com/products/laptop
https://example.com/blog/seo-tips-2024

Avoid:
https://example.com/page?id=12345
https://example.com/p/x8h9k2

Mobile Optimization

Essential Mobile Tags

html

<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta name="theme-color" content="#000000">
<meta name="mobile-web-app-capable" content="yes">

Mobile-Friendly Checklist

•✅ Responsive design (Bootstrap or CSS media queries)
•✅ Touch-friendly buttons (min 44x44px)
•✅ Readable text without zooming (min 16px)
•✅ No horizontal scrolling
•✅ Fast loading on mobile networks

Accessibility for SEO

ARIA Labels

html

<!-- Navigation -->
<nav aria-label="Main navigation">
    <ul>
        <li><a href="/">Home</a></li>
    </ul>
</nav>

<!-- Search -->
<form role="search" aria-label="Site search">
    <input type="search" aria-label="Search query">
    <button type="submit">Search</button>
</form>

<!-- Buttons -->
<button aria-label="Close modal">
    <i class="fas fa-times"></i>
</button>

Keyboard Navigation

•Ensure all interactive elements are keyboard accessible
•Maintain logical tab order
•Provide visible focus indicators
•Use tabindex appropriately

Local SEO (If Applicable)

Local Business Schema

html

<script type="application/ld+json">
{
  "@context": "https://schema.org",
  "@type": "LocalBusiness",
  "name": "Business Name",
  "address": {
    "@type": "PostalAddress",
    "streetAddress": "123 Main St",
    "addressLocality": "City",
    "addressRegion": "State",
    "postalCode": "12345",
    "addressCountry": "US"
  },
  "telephone": "+1-555-555-5555"
}
</script>

Page Speed Optimization

Quick Wins

•Minify CSS and JavaScript
•Compress images
•Use lazy loading for images
•Enable browser caching
•Use CDN for static assets
•Defer non-critical JavaScript
•Minimize HTTP requests

Core Web Vitals

Focus on:

•LCP (Largest Contentful Paint): < 2.5s
•FID (First Input Delay): < 100ms
•CLS (Cumulative Layout Shift): < 0.1

robots.txt and Sitemap

robots.txt Example

code

User-agent: *
Allow: /
Disallow: /admin/
Disallow: /private/

Sitemap: https://yourdomain.com/sitemap.xml

Sitemap.xml Reference

xml

<?xml version="1.0" encoding="UTF-8"?>
<urlset xmlns="http://www.sitemaps.org/schemas/sitemap/0.9">
  <url>
    <loc>https://yourdomain.com/</loc>
    <lastmod>2024-02-17</lastmod>
    <priority>1.0</priority>
  </url>
  <url>
    <loc>https://yourdomain.com/products</loc>
    <lastmod>2024-02-15</lastmod>
    <priority>0.8</priority>
  </url>
</urlset>

SEO Checklist

Before publishing a page:

•✅ Unique, descriptive title tag (50-60 chars)
•✅ Compelling meta description (150-160 chars)
•✅ One H1 heading with primary keyword
•✅ Proper heading hierarchy (H1 → H2 → H3)
•✅ Semantic HTML structure
•✅ Descriptive alt text on all images
•✅ Internal links with descriptive anchor text
•✅ Clean, readable URL
•✅ Mobile responsive design
•✅ Fast page load speed (<3 seconds)
•✅ HTTPS enabled
•✅ Canonical URL specified
•✅ Structured data (if applicable)
•✅ No broken links
•✅ Valid HTML (W3C validation)

Remember: SEO is not just about search engines—it's about creating a better user experience. Fast, accessible, well-structured pages benefit both users and search rankings. Focus on quality content, clean code, and user-first design principles.