Comprehensive SEO optimization for web applications. Use when asked to improve search rankings, add meta tags, create structured data, generate sitemaps, optimize for Core Web Vitals, or analyze SEO issues. Works with Next.js, Astro, React, and static HTML sites.
Comprehensive SEO optimization for web applications. Use when asked to improve search rankings, add meta tags, create structured data, generate sitemaps, optimize for Core Web Vitals, or analyze SEO issues. Works with Next.js, Astro, React, and static HTML sites.
SEO Optimizer
Transform your web application from invisible to discoverable. This skill analyzes your codebase and implements comprehensive SEO optimizations that help search engines and social platforms understand, index, and surface your content.
Philosophy: SEO as Semantic Communication
SEO is not about gaming algorithms—it's about clearly communicating what your content IS to machines (search engines, social platforms, AI crawlers) so they can properly understand and surface it.
Before optimizing, ask:
What is this page actually about? (not what keywords we want to rank for)
Who is the intended audience and what are they searching for?
What unique value does this content provide?
How should machines categorize and understand this content?
Core Principles:
Accuracy Over Optimization: Describe what IS, not what you wish would rank
User Intent First: Match content to what searchers actually want
Semantic Clarity: Use structured data to make meaning machine-readable
Progressive Enhancement: Basic SEO for all pages, rich optimization for key pages
Framework-Native: Use each framework's idioms, not generic hacks
The SEO Hierarchy (prioritize in order):
1. Content Quality ← Foundation: Valuable, accurate, unique content
2. Technical Access ← Can crawlers find and index your pages?
3. Semantic Structure ← Do machines understand your content's meaning?
4. Meta Optimization ← Are your titles/descriptions compelling?
5. Structured Data ← JSON-LD for rich search results
6. Performance ← Core Web Vitals affect rankings
Codebase Analysis Workflow
ALWAYS analyze before implementing. Different codebases need different approaches.
Step 1: Discover Framework and Structure
Identify the framework and routing pattern:
Next.js: Look for next.config.js, app/ or pages/ directory
Astro: Look for astro.config.mjs, src/pages/
React Router: Look for route configuration, react-router-dom
Gatsby: Look for gatsby-config.js, gatsby-node.js
Static HTML: Look for .html files in root or public/
Step 2: Audit Current SEO State
Check for existing implementations:
Meta tags in <head> (title, description, viewport)
Open Graph tags (og:title, og:image, etc.)
Twitter Card tags (twitter:card, twitter:image)
Structured data (<script type="application/ld+json">)
Sitemap (sitemap.xml or generation config)
Robots.txt file
Canonical URLs
Alt text on images
Step 3: Identify Page Types
Different pages need different SEO approaches:
Page Type
Priority
Key Optimizations
Landing/Home
Critical
Brand keywords, comprehensive structured data
Product/Service
High
Product schema, reviews, pricing
Blog/Article
High
Article schema, author, publish date
Documentation
Medium
HowTo/FAQ schema, breadcrumbs
About/Contact
Medium
Organization schema, local business
Legal/Privacy
Low
Basic meta only, often noindex
Step 4: Generate Implementation Plan
Based on analysis, prioritize:
Quick wins: Missing meta tags, viewport, basic structure
High impact: Structured data for key pages, sitemap
Refinement: Performance, advanced schema, social optimization
See references/analysis-checklist.md for detailed audit procedures.
❌ Duplicate Descriptions
Using the same meta description across multiple pages.
Why bad: Misses opportunity for page-specific relevance. Google may ignore and auto-generate.
❌ Description/Content Mismatch
Writing descriptions for keywords rather than actual content.
Why bad: High bounce rates signal low quality. Users feel deceived.
❌ Missing Alt Text
<!-- BAD --><imgsrc="product.jpg"><!-- GOOD --><imgsrc="product.jpg"alt="Blue Nike Air Max running shoe, side view">
