| name | seo-optimization |
| description | Optimize web applications for search engines. Implement technical SEO, structured data, and performance optimizations for better rankings. |
| triggers | ["/seo","/search optimize"] |
Search Engine Optimization (SEO)
This skill covers technical SEO implementation to improve search engine visibility, rankings, and organic traffic for web applications.
When to use this skill
Use this skill when you need to:
- Optimize website for search engines
- Implement technical SEO requirements
- Add structured data markup
- Improve Core Web Vitals for SEO
- Set up proper indexing and crawling
Prerequisites
- Access to website source code
- Google Search Console access
- Understanding of HTML semantics
- Knowledge of JavaScript frameworks (if applicable)
Guidelines
Technical SEO Fundamentals
Semantic HTML
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Descriptive Page Title | Brand Name</title>
<meta name="description" content="Compelling meta description under 160 characters">
<link rel="canonical" href="https://example.com/page">
</head>
<body>
<header>
<nav aria-label="Main navigation">
</nav>
</header>
<main>
<article>
<h1>Primary Heading</h1>
<h2>Subheading</h2>
</article>
</main>
<footer>
</footer>
</body>
</html>
URL Structure
- Use descriptive, keyword-rich URLs
- Keep URLs short and readable
- Use hyphens to separate words
- Avoid query parameters when possible
✅ https://example.com/products/wireless-headphones
❌ https://example.com/p?id=12345&cat=audio
Heading Hierarchy
<h1>Main Page Title</h1>
<h2>Section One</h2>
<h3>Subsection</h3>
<h2>Section Two</h2>
<h3>Subsection</h3>
<h4>Detail</h4>
<h1>Title</h1>
<h3>Skipped H2</h3>
Meta Tags
Essential Meta Tags
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta name="description" content="Learn SEO best practices for web development with practical examples and guidelines.">
<meta name="robots" content="index, follow">
<link rel="canonical" href="https://example.com/original-page">
<meta property="og:title" content="SEO Best Practices">
<meta property="og:description" content="Complete guide to technical SEO">
<meta property="og:image" content="https://example.com/image.jpg">
<meta property="og:url" content="https://example.com/page">
<meta property="og:type" content="article">
<meta name="twitter:card" content="summary_large_image">
<meta name="twitter:title" content="SEO Best Practices">
<meta name="twitter:description" content="Complete guide to technical SEO">
<meta name="twitter:image" content="https://example.com/image.jpg">
Structured Data
JSON-LD Implementation
<script type="application/ld+json">
{
"@context": "https://schema.org",
"@type": "Article",
"headline": "SEO Best Practices Guide",
"description": "Complete guide to technical SEO implementation",
"author": {
"@type": "Person",
"name": "Jane Developer"
},
"datePublished": "2024-01-15",
"dateModified": "2024-01-20",
"image": "https://example.com/article-image.jpg"
}
</script>
<script type="application/ld+json">
{
"@context": "https://schema.org",
"@type": "Organization",
"name": "Company Name",
"url": "https://example.com",
"logo": "https://example.com/logo.png",
"sameAs": [
"https://twitter.com/company",
"https://linkedin.com/company/name"
]
}
</script>
<script type="application/ld+json">
{
"@context": "https://schema.org",
"@type": "Product",
"name": "Wireless Headphones",
"image": "https://example.com/headphones.jpg",
"description": "High-quality wireless headphones",
"brand": {
"@type": "Brand",
"name": "AudioTech"
},
"offers": {
"@type": "Offer",
"price": "99.99",
"priceCurrency": "USD",
"availability": "https://schema.org/InStock"
}
}
</script>
SPA SEO (React, Vue, Angular)
Server-Side Rendering (SSR)
import Head from 'next/head';
export default function ProductPage({ product }) {
return (
<>
<Head>
<title>{product.name} | Store</title>
<meta name="description" content={product.description} />
<link rel="canonical" href={`https://example.com/products/${product.slug}`} />
</Head>
<ProductDetails product={product} />
</>
);
}
export async function getServerSideProps({ params }) {
const product = await fetchProduct(params.slug);
return { props: { product } };
}
Dynamic Sitemap
export async function getServerSideProps({ res }) {
const pages = await fetchAllPages();
const sitemap = `<?xml version="1.0" encoding="UTF-8"?>
<urlset xmlns="http://www.sitemaps.org/schemas/sitemap/0.9">
${pages.map(page => `
<url>
<loc>https://example.com${page.path}</loc>
<lastmod>${page.updatedAt}</lastmod>
<changefreq>${page.changeFreq}</changefreq>
<priority>${page.priority}</priority>
</url>
`).join('')}
</urlset>`;
res.setHeader('Content-Type', 'text/xml');
res.write(sitemap);
res.end();
return { props: {} };
}
Performance for SEO
Core Web Vitals Impact
- LCP < 2.5s (Good), < 4s (Needs Improvement)
- FID < 100ms (Good), < 300ms (Needs Improvement)
- CLS < 0.1 (Good), < 0.25 (Needs Improvement)
Image Optimization
<img
src="image-800.jpg"
srcset="image-400.jpg 400w, image-800.jpg 800w, image-1200.jpg 1200w"
sizes="(max-width: 600px) 400px, (max-width: 1000px) 800px, 1200px"
alt="Descriptive image text"
loading="lazy"
width="800"
height="600"
>
Resource Hints
<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="dns-prefetch" href="https://cdn.example.com">
<link rel="preload" href="/critical.css" as="style">
<link rel="preload" href="/hero-image.jpg" as="image">
Crawlability
Robots.txt
User-agent: *
Allow: /
# Disallow admin and private areas
Disallow: /admin/
Disallow: /private/
Disallow: /api/
# Allow specific file types
Allow: /*.js$
Allow: /*.css$
# Sitemap location
Sitemap: https://example.com/sitemap.xml
Internal Linking
- Use descriptive anchor text
- Maintain shallow site architecture (3 clicks max)
- Implement breadcrumb navigation
- Add pagination with rel="next"/"prev"
<nav aria-label="Breadcrumb">
<ol>
<li><a href="/">Home</a></li>
<li><a href="/products">Products</a></li>
<li aria-current="page">Headphones</li>
</ol>
</nav>
Mobile Optimization
Mobile-First Indexing
- Ensure mobile and desktop content match
- Test with Google Mobile-Friendly Test
- Use responsive design (avoid separate mobile URLs)
- Optimize for touch interactions
Monitoring
Google Search Console
- Submit sitemaps
- Monitor indexing status
- Review Core Web Vitals report
- Check mobile usability
- Analyze search performance
Key Metrics
- Organic traffic
- Click-through rate (CTR)
- Average position
- Indexed pages
- Crawl errors
Examples
See the examples/ directory for:
structured-data/ - JSON-LD examples by typemeta-tags/ - Complete meta tag templatesspa-seo/ - Framework-specific SEO implementationsrobots-txt/ - Robots.txt examples
References
