Implements SEO best practices for static HTML pages including semantic structure, meta tags, accessibility, performance optimization, and search engine discoverability. Use when creating pages that need to be indexed and ranked by search engines.
This skill provides essential SEO optimization guidelines for static HTML pages to improve search engine visibility and user experience.
<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 / 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">
<!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>
<h1> per page (main title)<!-- 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">
blue-running-shoes.jpg not IMG_1234.jpgalt text (describe image for screen readers and SEO)loading="lazy" for images below the fold<!-- 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 link with security -->
<a href="https://external-site.com"
target="_blank"
rel="noopener noreferrer">
External Resource
</a>
<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>
<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>
<!-- Defer non-critical JavaScript -->
<script src="script.js" defer></script>
<!-- Async for independent scripts -->
<script src="analytics.js" async></script>
<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>
<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>
Keyword Placement: Include primary keywords in:
Content Length: Aim for 300+ words for better indexing
Readability: Use short paragraphs, bullet points, clear language
Unique Content: Avoid duplicate content across pages
Good URLs: