# SEO Optimization
> Optimize web applications for search engines. Implement technical SEO, structured data, and performance optimizations for better rankings.
- Skill: `helixdevelopment/seo-optimization` (Agent Skill)
- Install (CLI): `npx skillmds@latest add helixdevelopment/seo-optimization`
- Raw SKILL.md: https://api.skillmd.com/api/skills/helixdevelopment/seo-optimization/raw
- Safety review: pending
- Works with: Claude Code, Claude.ai, OpenAI Codex
- Category: Marketing & Growth
- Author: HelixDevelopment (https://skillmd.com/u/helixdevelopment)
- Updated: 2026-09-10
- Page: https://skillmd.com/skills/helixdevelopment/seo-optimization
---
# 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**
```html
Descriptive Page Title | Brand Name
Primary Heading
Subheading
```
**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**
```html
Main Page Title
Section One
Subsection
Section Two
Subsection
Detail
Title
Skipped H2
```
### Meta Tags
**Essential Meta Tags**
```html
```
### Structured Data
**JSON-LD Implementation**
```html
```
### SPA SEO (React, Vue, Angular)
**Server-Side Rendering (SSR)**
```javascript
// Next.js example with metadata
import Head from 'next/head';
export default function ProductPage({ product }) {
return (
<>
{product.name} | Store
);
}
export async function getServerSideProps({ params }) {
const product = await fetchProduct(params.slug);
return { props: { product } };
}
```
**Dynamic Sitemap**
```javascript
// pages/sitemap.xml.js (Next.js)
export async function getServerSideProps({ res }) {
const pages = await fetchAllPages();
const sitemap = `
${pages.map(page => `
https://example.com${page.path}${page.updatedAt}${page.changeFreq}${page.priority}
`).join('')}
`;
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**
```html
```
**Resource Hints**
```html
```
### 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"
```html
```
### 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 type
- `meta-tags/` - Complete meta tag templates
- `spa-seo/` - Framework-specific SEO implementations
- `robots-txt/` - Robots.txt examples
## References
- [Google Search Central](https://developers.google.com/search/docs)
- [Schema.org](https://schema.org/)
- [Moz SEO Learning Center](https://moz.com/learn/seo)
- [Web.dev SEO](https://web.dev/seo/)
- [Next.js SEO](https://nextjs.org/docs/app/building-your-application/optimizing/metadata)
```
**Resource Hints**
```html
```
### 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"
```html
```
### 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 type
- `meta-tags/` - Complete meta tag templates
- `spa-seo/` - Framework-specific SEO implementations
- `robots-txt/` - Robots.txt examples
## References
- [Google Search Central](https://developers.google.com/search/docs)
- [Schema.org](https://schema.org/)
- [Moz SEO Learning Center](https://moz.com/learn/seo)
- [Web.dev SEO](https://web.dev/seo/)
- [Next.js SEO](https://nextjs.org/docs/app/building-your-application/optimizing/metadata)