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):

Technical SEO

Crawlability

robots.txt:

text
1# /robots.txt
2User-agent: *
3Allow: /
4
5# Block admin/private areas
6Disallow: /admin/
7Disallow: /api/
8Disallow: /private/
9
10# Don't block resources needed for rendering
11# ❌ Disallow: /static/
12
13Sitemap: https://example.com/sitemap.xml

Meta robots:

html
1<!-- Default: indexable, followable -->
2<meta name="robots" content="index, follow" />
3
4<!-- Noindex specific pages -->
5<meta name="robots" content="noindex, nofollow" />
6
7<!-- Indexable but don't follow links -->
8<meta name="robots" content="index, nofollow" />
9
10<!-- Control snippets -->
11<meta name="robots" content="max-snippet:150, max-image-preview:large" />

Canonical URLs:

html
1<!-- Prevent duplicate content issues -->
2<link rel="canonical" href="https://example.com/page" />
3
4<!-- Self-referencing canonical (recommended) -->
5<link rel="canonical" href="https://example.com/current-page" />
6
7<!-- For paginated content -->
8<link rel="canonical" href="https://example.com/products" />
9<!-- Or use rel="prev" / rel="next" for explicit pagination -->

XML sitemap

xml
1<?xml version="1.0" encoding="UTF-8"?>
2<urlset xmlns="http://www.sitemaps.org/schemas/sitemap/0.9">
3  <url>
4    <loc>https://example.com/</loc>
5    <lastmod>2024-01-15</lastmod>
6    <changefreq>daily</changefreq>
7    <priority>1.0</priority>
8  </url>
9  <url>
10    <loc>https://example.com/products</loc>
11    <lastmod>2024-01-14</lastmod>
12    <changefreq>weekly</changefreq>
13    <priority>0.8</priority>
14  </url>
15</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
1<!-- Ensure all resources use HTTPS -->
2<img src="https://example.com/image.jpg" />
3
4<!-- Not: -->
5<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
1<!-- ❌ Missing or generic -->
2<title>Page</title>
3<title>Home</title>
4
5<!-- ✅ Descriptive with primary keyword -->
6<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
1<!-- ❌ Missing or duplicate -->
2<meta name="description" content="" />
3
4<!-- ✅ Compelling and unique -->
5<meta
6  name="description"
7  content="Shop premium blue widgets with free shipping. 30-day returns. Rated 4.9/5 by 10,000+ customers. Order today and save 20%."
8/>

Meta description guidelines:

• 150-160 characters
• Include primary keyword naturally
• Compelling call-to-action
• Unique for every page
• Matches page content

Heading structure

html
1<!-- ❌ Poor structure -->
2<h2>Welcome to Our Store</h2>
3<h4>Products</h4>
4<h1>Contact Us</h1>
5
6<!-- ✅ Proper hierarchy -->
7<h1>Blue Widgets - Premium Quality</h1>
8<h2>Product Features</h2>
9<h3>Durability</h3>
10<h3>Design</h3>
11<h2>Customer Reviews</h2>
12<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
1<!-- ❌ Poor image SEO -->
2<img src="IMG_12345.jpg" />
3
4<!-- ✅ Optimized image -->
5<img
6  src="blue-widget-product-photo.webp"
7  alt="Blue widget with chrome finish, side view showing control panel"
8  width="800"
9  height="600"
10  loading="lazy"
11/>

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
1<!-- ❌ Non-descriptive -->
2<a href="/products">Click here</a>
3<a href="/widgets">Read more</a>
4
5<!-- ✅ Descriptive anchor text -->
6<a href="/products/blue-widgets">Browse our blue widget collection</a>
7<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
1<script type="application/ld+json">
2  {
3    "@context": "https://schema.org",
4    "@type": "Organization",
5    "name": "Example Company",
6    "url": "https://example.com",
7    "logo": "https://example.com/logo.png",
8    "sameAs": [
9      "https://twitter.com/example",
10      "https://linkedin.com/company/example"
11    ],
12    "contactPoint": {
13      "@type": "ContactPoint",
14      "telephone": "+1-555-123-4567",
15      "contactType": "customer service"
16    }
17  }
18</script>

Article

html
1<script type="application/ld+json">
2  {
3    "@context": "https://schema.org",
4    "@type": "Article",
5    "headline": "How to Choose the Right Widget",
6    "description": "Complete guide to selecting widgets for your needs.",
7    "image": "https://example.com/article-image.jpg",
8    "author": {
9      "@type": "Person",
10      "name": "Jane Smith",
11      "url": "https://example.com/authors/jane-smith"
12    },
13    "publisher": {
14      "@type": "Organization",
15      "name": "Example Blog",
16      "logo": {
17        "@type": "ImageObject",
18        "url": "https://example.com/logo.png"
19      }
20    },
21    "datePublished": "2024-01-15",
22    "dateModified": "2024-01-20"
23  }
24</script>

Product

html
1<script type="application/ld+json">
2  {
3    "@context": "https://schema.org",
4    "@type": "Product",
5    "name": "Blue Widget Pro",
6    "image": "https://example.com/blue-widget.jpg",
7    "description": "Premium blue widget with advanced features.",
8    "brand": {
9      "@type": "Brand",
10      "name": "WidgetCo"
11    },
12    "offers": {
13      "@type": "Offer",
14      "price": "49.99",
15      "priceCurrency": "USD",
16      "availability": "https://schema.org/InStock",
17      "url": "https://example.com/products/blue-widget"
18    },
19    "aggregateRating": {
20      "@type": "AggregateRating",
21      "ratingValue": "4.8",
22      "reviewCount": "1250"
23    }
24  }
25</script>

FAQ

html
1<script type="application/ld+json">
2  {
3    "@context": "https://schema.org",
4    "@type": "FAQPage",
5    "mainEntity": [
6      {
7        "@type": "Question",
8        "name": "What colors are available?",
9        "acceptedAnswer": {
10          "@type": "Answer",
11          "text": "Our widgets come in blue, red, and green."
12        }
13      },
14      {
15        "@type": "Question",
16        "name": "What is the warranty?",
17        "acceptedAnswer": {
18          "@type": "Answer",
19          "text": "All widgets include a 2-year warranty."
20        }
21      }
22    ]
23  }
24</script>

Breadcrumbs

html
1<script type="application/ld+json">
2  {
3    "@context": "https://schema.org",
4    "@type": "BreadcrumbList",
5    "itemListElement": [
6      {
7        "@type": "ListItem",
8        "position": 1,
9        "name": "Home",
10        "item": "https://example.com"
11      },
12      {
13        "@type": "ListItem",
14        "position": 2,
15        "name": "Products",
16        "item": "https://example.com/products"
17      },
18      {
19        "@type": "ListItem",
20        "position": 3,
21        "name": "Blue Widgets",
22        "item": "https://example.com/products/blue-widgets"
23      }
24    ]
25  }
26</script>

Validation

Test structured data at:

• Google Rich Results Test
• Schema.org Validator

Mobile SEO

Responsive design

html
1<!-- ❌ Not mobile-friendly -->
2<meta name="viewport" content="width=1024" />
3
4<!-- ✅ Responsive viewport -->
5<meta name="viewport" content="width=device-width, initial-scale=1" />

Tap targets

css
1/* ❌ Too small for mobile */
2.small-link {
3  padding: 4px;
4  font-size: 12px;
5}
6
7/* ✅ Adequate tap target */
8.mobile-friendly-link {
9  padding: 12px;
10  font-size: 16px;
11  min-height: 48px;
12  min-width: 48px;
13}

Font sizes

css
1/* ❌ Too small on mobile */
2body {
3  font-size: 10px;
4}
5
6/* ✅ Readable without zooming */
7body {
8  font-size: 16px;
9  line-height: 1.5;
10}

International SEO

Hreflang tags

html
1<!-- For multi-language sites -->
2<link rel="alternate" hreflang="en" href="https://example.com/page" />
3<link rel="alternate" hreflang="es" href="https://example.com/es/page" />
4<link rel="alternate" hreflang="fr" href="https://example.com/fr/page" />
5<link rel="alternate" hreflang="x-default" href="https://example.com/page" />

Language declaration

html
1<html lang="en">
2  <!-- or -->
3  <html lang="es-MX"></html>
4</html>

SEO audit checklist

Critical

• HTTPS enabled
• robots.txt allows crawling
• No noindex on important pages
• Title tags present and unique
• Single <h1> per page

High priority

• Meta descriptions present
• Sitemap submitted
• Canonical URLs set
• Mobile-responsive
• Core Web Vitals passing

Medium priority

• Structured data implemented
• Internal linking strategy
• Image alt text
• Descriptive URLs
• Breadcrumb navigation

Ongoing

• Fix crawl errors in Search Console
• Update sitemap when content changes
• Monitor ranking changes
• Check for broken links
• Review Search Console insights

Tools

References

• Google Search Central
• Schema.org
• Core Web Vitals
• Web Quality Audit