seo

# SEO optimization Search engine optimization based on Lighthouse SEO audits and Google Search guidelines. Focus on technical SEO, on-page optimization, and structured data. ## SEO fundamentals Search ranking factors (approximate influence): | Factor | Influence | This Skill | | --------------------------------- | --------- | -------------------------------------------------- | | Content quality & relevance | ~40% | Partial (structure) | | Backlinks & authority | ~25% | ✗ | | Technical SEO | ~15% | ✓ | | Page experience (Core Web Vitals) | ~10% | See [Core Web Vitals](../core-web-vitals/SKILL.md) | | On-page SEO | ~10% | ✓ | --- ## Technical SEO ### Crawlability **robots.txt:** ```text # /robots.txt User-agent: * Allow: / # Block admin/private areas Disallow: /admin/ Disallow: /api/ Disallow: /private/ # Don't block resources needed for rendering # ❌ Disallow: /static/ Sitemap: https://example.com/sitemap.xml ``` **Meta robots:** ```html <!-- Default: indexable, followable --> <meta name="robots" content="index, follow" /> <!-- Noindex specific pages --> <meta name="robots" content="noindex, nofollow" /> <!-- Indexable but don't follow links --> <meta name="robots" content="index, nofollow" /> <!-- Control snippets --> <meta name="robots" content="max-snippet:150, max-image-preview:large" /> ``` **Canonical URLs:** ```html <!-- Prevent duplicate content issues --> <link rel="canonical" href="https://example.com/page" /> <!-- Self-referencing canonical (recommended) --> <link rel="canonical" href="https://example.com/current-page" /> <!-- For paginated content --> <link rel="canonical" href="https://example.com/products" /> <!-- Or use rel="prev" / rel="next" for explicit pagination --> ``` ### XML sitemap ```xml <?xml version="1.0" encoding="UTF-8"?> <urlset xmlns="http://www.sitemaps.org/schemas/sitemap/0.9"> <url> <loc>https://example.com/</loc> <lastmod>2024-01-15</lastmod> <changefreq>daily</changefreq> <priority>1.0</priority> </url> <url> <loc>https://example.com/products</loc> <lastmod>2024-01-14</lastmod> <changefreq>weekly</changefreq> <priority>0.8</priority> </url> </urlset> ``` **Sitemap best practices:** - Maximum 50,000 URLs or 50MB per sitemap - Use sitemap index for larger sites - Include only canonical, indexable URLs - Update `lastmod` when content changes - Submit to Google Search Console ### URL structure ``` ✅ Good URLs: https://example.com/products/blue-widget https://example.com/blog/how-to-use-widgets ❌ Poor URLs: https://example.com/p?id=12345 https://example.com/products/item/category/subcategory/blue-widget-2024-sale-discount ``` **URL guidelines:** - Use hyphens, not underscores - Lowercase only - Keep short (< 75 characters) - Include target keywords naturally - Avoid parameters when possible - Use HTTPS always ### HTTPS & security ```html <!-- Ensure all resources use HTTPS --> <img src="https://example.com/image.jpg" /> <!-- Not: --> <img src="http://example.com/image.jpg" /> ``` **Security headers for SEO trust signals:** ``` Strict-Transport-Security: max-age=31536000; includeSubDomains X-Content-Type-Options: nosniff X-Frame-Options: DENY ``` --- ## On-page SEO ### Title tags ```html <!-- ❌ Missing or generic --> <title>Page</title> <title>Home</title> <!-- ✅ Descriptive with primary keyword --> <title>Blue Widgets for Sale | Premium Quality | Example Store</title> ``` **Title tag guidelines:** - 50-60 characters (Google truncates ~60) - Primary keyword near the beginning - Unique for every page - Brand name at end (unless homepage) - Action-oriented when appropriate ### Meta descriptions ```html <!-- ❌ Missing or duplicate --> <meta name="description" content="" /> <!-- ✅ Compelling and unique --> <meta name="description" content="Shop premium blue widgets with free shipping. 30-day returns. Rated 4.9/5 by 10,000+ customers. Order today and save 20%." /> ``` **Meta description guidelines:** - 150-160 characters - Include primary keyword naturally - Compelling call-to-action - Unique for every page - Matches page content ### Heading structure ```html <!-- ❌ Poor structure --> <h2>Welcome to Our Store</h2> <h4>Products</h4> <h1>Contact Us</h1> <!-- ✅ Proper hierarchy --> <h1>Blue Widgets - Premium Quality</h1> <h2>Product Features</h2> <h3>Durability</h3> <h3>Design</h3> <h2>Customer Reviews</h2> <h2>Pricing</h2> ``` **Heading guidelines:** - Single `<h1>` per page (the main topic) - Logical hierarchy (don't skip levels) - Include keywords naturally - Descriptive, not generic ### Image SEO ```html <!-- ❌ Poor image SEO --> <img src="IMG_12345.jpg" /> <!-- ✅ Optimized image --> <img src="blue-widget-product-photo.webp" alt="Blue widget with chrome finish, side view showing control panel" width="800" height="600" loading="lazy" /> ``` **Image guidelines:** - Descriptive filenames with keywords - Alt text describes the image content - Compressed and properly sized - WebP/AVIF with fallbacks - Lazy load below-fold images ### Internal linking ```html <!-- ❌ Non-descriptive --> <a href="/products">Click here</a> <a href="/widgets">Read more</a> <!-- ✅ Descriptive anchor text --> <a href="/products/blue-widgets">Browse our blue widget collection</a> <a href="/guides/widget-maintenance">Learn how to maintain your widgets</a> ``` **Linking guidelines:** - Descriptive anchor text with keywords - Link to relevant internal pages - Reasonable number of links per page - Fix broken links promptly - Use breadcrumbs for hierarchy --- ## Structured data (JSON-LD) ### Organization ```html <script type="application/ld+json"> { "@context": "https://schema.org", "@type": "Organization", "name": "Example Company", "url": "https://example.com", "logo": "https://example.com/logo.png", "sameAs": ["https://twitter.com/example", "https://linkedin.com/company/example"], "contactPoint": { "@type": "ContactPoint", "telephone": "+1-555-123-4567", "contactType": "customer service" } } </script> ``` ### Article ```html <script type="application/ld+json"> { "@context": "https://schema.org", "@type": "Article", "headline": "How to Choose the Right Widget", "description": "Complete guide to selecting widgets for your needs.", "image": "https://example.com/article-image.jpg", "author": { "@type": "Person", "name": "Jane Smith", "url": "https://example.com/authors/jane-smith" }, "publisher": { "@type": "Organization", "name": "Example Blog", "logo": { "@type": "ImageObject", "url": "https://example.com/logo.png" } }, "datePublished": "2024-01-15", "dateModified": "2024-01-20" } </script> ``` ### Product ```html <script type="application/ld+json"> { "@context": "https://schema.org", "@type": "Product", "name": "Blue Widget Pro", "image": "https://example.com/blue-widget.jpg", "description": "Premium blue widget with advanced features.", "brand": { "@type": "Brand", "name": "WidgetCo" }, "offers": { "@type": "Offer", "price": "49.99", "priceCurrency": "USD", "availability": "https://schema.org/InStock", "url": "https://example.com/products/blue-widget" }, "aggregateRating": { "@type": "AggregateRating", "ratingValue": "4.8", "reviewCount": "1250" } } </script> ``` ### FAQ ```html <script type="application/ld+json"> { "@context": "https://schema.org", "@type": "FAQPage", "mainEntity": [ { "@type": "Question", "name": "What colors are available?", "acceptedAnswer": { "@type": "Answer", "text": "Our widgets come in blue, red, and green." } }, { "@type": "Question", "name": "What is the warranty?", "acceptedAnswer": { "@type": "Answer", "text": "All widgets include a 2-year warranty." } } ] } </script> ``` ### Breadcrumbs ```html <script type="application/ld+json"> { "@context": "https://schema.org", "@type": "BreadcrumbList", "itemListElement": [ { "@type": "ListItem", "position": 1, "name": "Home", "item": "https://example.com" }, { "@type": "ListItem",