Optimizes web content for search engines and AI/generative engines. Use when working on SEO, meta tags, structured data, Schema.org, JSON-LD, Open Graph, sitemaps, robots.txt, Core Web Vitals, E-E-A-T, content optimization for AI engines, or when asked to improve search rankings, fix SEO, add structured data, optimize for Google, optimize for AI, or make content discoverable. Covers heading hierarchy, canonical URLs, hreflang, rich snippets, and citation-worthy content.
You are an expert in Search Engine Optimization (SEO) and Generative Engine Optimization (GEO). You make web content discoverable by both traditional search engines and AI-powered answer engines.
Discoverable by machines, valuable to humans.
Before writing any markup or content:
This skill auto-invokes when:
<head> sectionsBefore making changes, scan what exists:
# Find HTML files
find . -maxdepth 4 \( -name "*.html" -o -name "*.htm" -o -name "*.jsx" -o -name "*.tsx" \) -type f | head -20
# Check for existing meta tags
grep -r '<meta ' --include="*.html" --include="*.htm" --include="*.jsx" --include="*.tsx" . | head -20
# Check for structured data
grep -r 'application/ld+json' --include="*.html" --include="*.htm" --include="*.jsx" --include="*.tsx" . | head -10
# Check for sitemap
ls -la sitemap.xml sitemap*.xml public/sitemap.xml 2>/dev/null
# Check for robots.txt
ls -la robots.txt public/robots.txt 2>/dev/null
# Check heading hierarchy
grep -rn '<h[1-6]' --include="*.html" --include="*.htm" . | head -20
Document findings:
Fix foundational SEO issues in priority order.
Every page MUST have:
<head>
<!-- Primary Meta Tags -->
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Page Title - Site Name</title>
<meta name="description" content="Compelling 150-160 char description with primary keyword.">
<link rel="canonical" href="https://example.com/page-url">
<!-- Open Graph -->
<meta property="og:type" content="website">
<meta property="og:url" content="https://example.com/page-url">
<meta property="og:title" content="Page Title - Site Name">
<meta property="og:description" content="Compelling description for social sharing.">
<meta property="og:image" content="https://example.com/og-image-1200x630.jpg">
<meta property="og:site_name" content="Site Name">
<!-- Twitter Card -->
<meta name="twitter:card" content="summary_large_image">
<meta name="twitter:title" content="Page Title">
<meta name="twitter:description" content="Description for Twitter.">
<meta name="twitter:image" content="https://example.com/twitter-image.jpg">
<!-- Optional but recommended -->
<meta name="robots" content="index, follow">
<meta name="author" content="Author Name">
<link rel="icon" type="image/svg+xml" href="/favicon.svg">
</head>
Rules:
<h1> per page<!-- Correct -->
<h1>Primary Topic</h1>
<h2>Subtopic A</h2>
<h3>Detail under A</h3>
<h2>Subtopic B</h2>
<!-- Wrong: skipped h2, multiple h1s -->
<h1>First Title</h1>
<h1>Second Title</h1>
<h3>Detail without h2 parent</h3>
Use semantic elements for machine readability:
<header> <!-- Site/page header -->
<nav> <!-- Navigation links -->
<main> <!-- Primary content -->
<article> <!-- Self-contained content -->
<section> <!-- Thematic grouping -->
<aside> <!-- Tangential content -->
<footer> <!-- Site/section footer -->
<figure> <!-- Image with caption -->
<figcaption> <!-- Caption for figure -->
<time> <!-- Date/time values -->
<address> <!-- Contact information -->
<!-- Every image needs alt text -->
<img src="photo.webp"
alt="Descriptive alt text with context"
width="800" height="600"
loading="lazy"
decoding="async">
<!-- Decorative images -->
<img src="divider.svg" alt="" role="presentation">
Rules:
loading="lazy" for below-fold imagessrcset and sizesAdd structured data using JSON-LD format (preferred by Google).
<script type="application/ld+json">
{
"@context": "https://schema.org",
"@type": "WebPage",
"name": "Page Title",
"description": "Page description",
"url": "https://example.com/page"
}
</script>
Choose the correct Schema.org type:
| Page Type | Schema Type | Key Properties |
|---|---|---|
| Homepage | WebSite + Organization | name, url, searchAction, logo |
| Blog post | Article or BlogPosting | headline, author, datePublished, image |
| Product | Product | name, offers, aggregateRating, brand |
| FAQ | FAQPage | mainEntity with Q&A pairs |
| How-to | HowTo | step, totalTime, tool, supply |
| Local business | LocalBusiness | address, geo, openingHours, telephone |
| Event | Event | startDate, location, performer, offers |
| Person/About | Person or ProfilePage | name, jobTitle, sameAs |
| Breadcrumbs | BreadcrumbList | itemListElement chain |
See references/schema-patterns.md for complete JSON-LD templates.
Connect your structured data into a knowledge graph:
<script type="application/ld+json">
{
"@context": "https://schema.org",
"@graph": [
{
"@type": "Organization",
"@id": "https://example.com/#organization",
"name": "Company Name",
"url": "https://example.com",
"logo": "https://example.com/logo.png",
"sameAs": [
"https://twitter.com/company",
"https://linkedin.com/company/company",
"https://github.com/company"
]
},
{
"@type": "WebSite",
"@id": "https://example.com/#website",
"url": "https://example.com",
"name": "Site Name",
"publisher": { "@id": "https://example.com/#organization" }
},
{
"@type": "WebPage",
"@id": "https://example.com/page#webpage",
"url": "https://example.com/page",
"isPartOf": { "@id": "https://example.com/#website" }
}
]
}
</script>
Always validate structured data:
Optimize content for AI-powered answer engines (ChatGPT, Perplexity, Google AI Overviews, Bing Copilot).
AI engines look for:
<!-- Lead with a direct answer -->
<p><strong>Widget X</strong> is a tool for automating data pipelines
that reduces processing time by 40% compared to manual methods.</p>
<!-- Follow with structured details -->
<h2>Key Features</h2>
<dl>
<dt>Real-time Processing</dt>
<dd>Handles up to 10,000 events per second with sub-millisecond latency.</dd>
<dt>Schema Validation</dt>
<dd>Automatically validates incoming data against configurable schemas.</dd>
</dl>
<!-- Use tables for comparisons -->
<table>
<caption>Widget X vs Alternatives</caption>
<thead>...</thead>
<tbody>...</tbody>
</table>
Demonstrate expertise through structured data AND content:
<!-- Author expertise (structured data) -->
<script type="application/ld+json">
{
"@type": "Article",
"author": {
"@type": "Person",
"name": "Author Name",
"jobTitle": "Senior Engineer",
"url": "https://example.com/about/author",
"sameAs": ["https://linkedin.com/in/author"]
},
"publisher": { "@id": "https://example.com/#organization" },
"datePublished": "2025-01-15",
"dateModified": "2025-03-20"
}
</script>
<!-- Trust signals in content -->
<p>Based on our analysis of 500+ deployments over 3 years...</p>
<p>According to <a href="https://source.com/study">the 2025 industry report</a>...</p>
Make content that AI engines want to cite:
FAQ content is heavily cited by AI engines:
<script type="application/ld+json">
{
"@context": "https://schema.org",
"@type": "FAQPage",
"mainEntity": [
{
"@type": "Question",
"name": "What is Widget X?",
"acceptedAnswer": {
"@type": "Answer",
"text": "Widget X is a data pipeline automation tool..."
}
}
]
}
</script>
See references/geo-guide.md for deep-dive on GEO strategies.
<?xml version="1.0" encoding="UTF-8"?>
<urlset xmlns="http://www.sitemaps.org/schemas/sitemap/0.9">
<url>
<loc>https://example.com/</loc>
<lastmod>2025-01-15</lastmod>
<changefreq>weekly</changefreq>
<priority>1.0</priority>
</url>
<url>
<loc>https://example.com/about</loc>
<lastmod>2025-01-10</lastmod>
<changefreq>monthly</changefreq>
<priority>0.8</priority>
</url>
</urlset>
Rules:
<lastmod> when content actually changesUser-agent: *
Allow: /
Disallow: /admin/
Disallow: /api/
Disallow: /private/
Sitemap: https://example.com/sitemap.xml
Rules:
| Metric | Target | What It Measures |
|---|---|---|
| LCP (Largest Contentful Paint) | < 2.5s | Loading performance |
| INP (Interaction to Next Paint) | < 200ms | Interactivity |
| CLS (Cumulative Layout Shift) | < 0.1 | Visual stability |
Optimization strategies:
requestIdleCallback<!-- Preload critical resources -->
<link rel="preload" as="image" href="/hero.webp">
<link rel="preload" as="font" href="/font.woff2" type="font/woff2" crossorigin>
<!-- Preconnect to external origins -->
<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="dns-prefetch" href="https://analytics.example.com">
<link rel="alternate" hreflang="en" href="https://example.com/page">
<link rel="alternate" hreflang="es" href="https://example.com/es/page">
<link rel="alternate" hreflang="x-default" href="https://example.com/page">
Rules:
Avoid these common mistakes:
Keyword Stuffing
Thin Structured Data
Generic Meta Tags
Heading Hierarchy Abuse
Ignoring GEO
Technical Neglect
Hand off to other skills when:
| Condition | Delegate To |
|---|---|
| Visual design, CSS styling needed | frontend-design - for UI aesthetics |
| ARIA labels, accessibility audit | accessibility-checker - for a11y compliance |
| Page load performance profiling | performance-analyst - for Core Web Vitals |
| Server-side sitemap generation, API routes | backend-architect - for dynamic sitemaps |
| Content strategy and copywriting | Direct to user - requires domain expertise |