300 lines
7.8 KiB
Markdown
300 lines
7.8 KiB
Markdown
---
|
|
name: ux-seo-aeo
|
|
description: Design exceptional user experiences optimized for Top Tier SEO and AEO (Answer Engine Optimization). Use when creating content, structuring data, optimizing performance, or improving discoverability for search engines and AI assistants.
|
|
---
|
|
|
|
# UX/SEO/AEO Optimization Skill
|
|
|
|
Expert guidance for creating user-centric experiences optimized for modern search engines and AI-powered answer engines.
|
|
|
|
## Core Principles
|
|
|
|
### 1. User Experience First (UX)
|
|
- **User-Centered Design**: Every decision prioritizes user needs
|
|
- **Accessibility (WCAG 2.1 AA+)**: Inclusive design for all users
|
|
- **Performance**: Fast load times (<3s), smooth interactions
|
|
- **Mobile-First**: Responsive, touch-friendly, thumb-reachable
|
|
- **Clear Hierarchy**: Logical information architecture
|
|
- **Feedback**: Clear loading states, errors, success messages
|
|
|
|
### 2. Search Engine Optimization (SEO)
|
|
|
|
**Technical SEO:**
|
|
- Semantic HTML structure (`<header>`, `<nav>`, `<main>`, `<article>`, `<section>`)
|
|
- Proper heading hierarchy (single H1, logical H2-H6)
|
|
- Fast Core Web Vitals (LCP, FID, CLS)
|
|
- Mobile-friendly and responsive
|
|
- HTTPS and secure connections
|
|
- XML sitemap and robots.txt
|
|
- Canonical URLs to prevent duplicates
|
|
|
|
**On-Page SEO:**
|
|
- Unique, descriptive titles (50-60 chars)
|
|
- Compelling meta descriptions (150-160 chars)
|
|
- Descriptive, keyword-rich URLs
|
|
- Alt text for all images (descriptive, not keyword stuffing)
|
|
- Internal linking with descriptive anchor text
|
|
- Schema.org structured data (JSON-LD)
|
|
|
|
**Content SEO:**
|
|
- High-quality, original, valuable content
|
|
- Answer user intent explicitly
|
|
- Natural keyword integration
|
|
- Comprehensive topic coverage
|
|
- Regular content updates
|
|
- E-E-A-T: Experience, Expertise, Authoritativeness, Trust
|
|
|
|
### 3. Answer Engine Optimization (AEO)
|
|
|
|
**Optimize for AI/LLMs:**
|
|
- Clear, concise answers to questions
|
|
- Featured snippet optimization
|
|
- FAQ sections with schema markup
|
|
- Conversational, natural language
|
|
- Entity-based content structure
|
|
- Topic clusters and pillar pages
|
|
|
|
**Structured Data (Schema.org):**
|
|
```json
|
|
{
|
|
"@context": "https://schema.org",
|
|
"@type": "Article",
|
|
"headline": "Clear, descriptive headline",
|
|
"author": {
|
|
"@type": "Person",
|
|
"name": "Author Name"
|
|
},
|
|
"datePublished": "2024-01-01",
|
|
"image": "https://example.com/image.jpg",
|
|
"description": "Brief, accurate description"
|
|
}
|
|
```
|
|
|
|
**Question-Answer Format:**
|
|
- Use clear question headings (H2/H3)
|
|
- Provide direct answers in first paragraph
|
|
- Expand with details and context
|
|
- Use FAQ schema for multiple Q&As
|
|
|
|
**Knowledge Graph Optimization:**
|
|
- Consistent NAP (Name, Address, Phone)
|
|
- Linked social profiles
|
|
- Entity relationships clearly defined
|
|
- Breadcrumb navigation
|
|
|
|
## Implementation Checklist
|
|
|
|
### Content Structure
|
|
- [ ] Single, clear H1 with primary keyword
|
|
- [ ] Logical heading hierarchy (H2-H6)
|
|
- [ ] Introduction answers "what/why" immediately
|
|
- [ ] Scannable content (bullets, short paragraphs)
|
|
- [ ] Clear CTAs (calls-to-action)
|
|
- [ ] Internal links to related content
|
|
- [ ] External links to authoritative sources
|
|
|
|
### Metadata
|
|
- [ ] Unique title tag with primary keyword
|
|
- [ ] Compelling meta description
|
|
- [ ] Open Graph tags (og:title, og:description, og:image)
|
|
- [ ] Twitter Card metadata
|
|
- [ ] Canonical URL specified
|
|
- [ ] Language and locale tags
|
|
|
|
### Structured Data
|
|
- [ ] Schema.org markup (JSON-LD format)
|
|
- [ ] Breadcrumb schema
|
|
- [ ] Article/Product/Service schema as appropriate
|
|
- [ ] FAQ schema for Q&A sections
|
|
- [ ] Organization schema
|
|
- [ ] Review/Rating schema when applicable
|
|
|
|
### Performance
|
|
- [ ] Images optimized and lazy-loaded
|
|
- [ ] Critical CSS inlined
|
|
- [ ] JavaScript deferred/async
|
|
- [ ] Asset compression (gzip/brotli)
|
|
- [ ] CDN for static assets
|
|
- [ ] Browser caching configured
|
|
|
|
### Accessibility
|
|
- [ ] Semantic HTML elements
|
|
- [ ] ARIA labels where needed
|
|
- [ ] Keyboard navigation support
|
|
- [ ] Sufficient color contrast (4.5:1+)
|
|
- [ ] Focus indicators visible
|
|
- [ ] Screen reader tested
|
|
- [ ] Alt text for images
|
|
|
|
### Mobile Optimization
|
|
- [ ] Responsive design (viewport meta tag)
|
|
- [ ] Touch targets ≥44x44px
|
|
- [ ] No horizontal scrolling
|
|
- [ ] Readable font sizes (16px+)
|
|
- [ ] Fast mobile load time
|
|
- [ ] Mobile-friendly navigation
|
|
|
|
## Content Patterns
|
|
|
|
### Blog Post/Article
|
|
```markdown
|
|
# Primary Keyword: Clear, Compelling Headline
|
|
|
|
[Featured image with descriptive alt text]
|
|
|
|
**Introduction (150-200 words):**
|
|
- Answer the main question immediately
|
|
- Include primary keyword naturally
|
|
- Preview what reader will learn
|
|
|
|
## Main Section 1 (H2 with Secondary Keyword)
|
|
Content that addresses user intent...
|
|
|
|
### Subsection 1.1 (H3)
|
|
Detailed information...
|
|
|
|
## Main Section 2 (H2)
|
|
More valuable content...
|
|
|
|
## FAQ Section
|
|
### Question 1?
|
|
Direct answer here...
|
|
|
|
## Conclusion
|
|
- Summarize key takeaways
|
|
- Include clear CTA
|
|
- Suggest related content
|
|
```
|
|
|
|
### Product/Service Page
|
|
```markdown
|
|
# Product Name - Primary Benefit
|
|
|
|
**Above the fold:**
|
|
- Clear value proposition
|
|
- Hero image/video
|
|
- Primary CTA button
|
|
|
|
**Key Features** (with icons)
|
|
- Feature 1: Benefit
|
|
- Feature 2: Benefit
|
|
- Feature 3: Benefit
|
|
|
|
**Detailed Description**
|
|
Comprehensive, scannable content...
|
|
|
|
**Social Proof**
|
|
- Reviews and ratings
|
|
- Testimonials
|
|
- Trust badges
|
|
|
|
**FAQ**
|
|
Answer common objections...
|
|
|
|
**Final CTA**
|
|
Clear next step...
|
|
```
|
|
|
|
### Landing Page
|
|
```markdown
|
|
# Compelling Headline: Primary Benefit
|
|
|
|
**Hero Section:**
|
|
- Clear, benefit-focused headline
|
|
- Supporting subheadline
|
|
- Hero visual
|
|
- Primary CTA
|
|
|
|
**Problem/Solution:**
|
|
Address pain points...
|
|
|
|
**How It Works** (3-step process)
|
|
1. Step 1
|
|
2. Step 2
|
|
3. Step 3
|
|
|
|
**Social Proof:**
|
|
Testimonials, logos, stats...
|
|
|
|
**Features/Benefits:**
|
|
What makes this valuable...
|
|
|
|
**Final CTA:**
|
|
Remove friction, clear action...
|
|
```
|
|
|
|
## SEO/AEO Writing Tips
|
|
|
|
### Answer User Intent
|
|
- **Informational**: Provide comprehensive, accurate information
|
|
- **Navigational**: Clear navigation and internal linking
|
|
- **Transactional**: Remove friction, clear CTAs
|
|
- **Commercial**: Comparison, reviews, specifications
|
|
|
|
### Optimize for Featured Snippets
|
|
- **Paragraph**: 40-60 word direct answer
|
|
- **List**: Numbered/bulleted lists
|
|
- **Table**: Comparison or data tables
|
|
- **Video**: Timestamped, transcribed content
|
|
|
|
### E-E-A-T Signals
|
|
- Author bios with credentials
|
|
- Citations and sources
|
|
- Regular content updates
|
|
- Transparent about site/business
|
|
- Contact information visible
|
|
- Privacy policy and terms
|
|
|
|
### Keyword Strategy
|
|
- Primary keyword in: title, H1, first paragraph, URL
|
|
- Secondary keywords in: H2s, throughout content
|
|
- LSI (Latent Semantic Indexing) keywords naturally
|
|
- Long-tail keywords for specific queries
|
|
- Avoid keyword stuffing (keep natural)
|
|
|
|
## Common Pitfalls to Avoid
|
|
|
|
❌ **Don't:**
|
|
- Keyword stuff (sounds unnatural)
|
|
- Use thin, duplicate content
|
|
- Hide text or links
|
|
- Ignore mobile users
|
|
- Skip alt text
|
|
- Use generic meta descriptions
|
|
- Create orphan pages (no internal links)
|
|
- Ignore page speed
|
|
- Forget about accessibility
|
|
- Write for bots instead of humans
|
|
|
|
✅ **Do:**
|
|
- Write naturally for users first
|
|
- Create original, valuable content
|
|
- Use clear, semantic structure
|
|
- Prioritize mobile experience
|
|
- Describe images meaningfully
|
|
- Craft unique, compelling metadata
|
|
- Build logical internal linking
|
|
- Optimize performance continuously
|
|
- Design inclusively
|
|
- Think: "Would this help my users?"
|
|
|
|
## Tools for Validation
|
|
|
|
- **Performance**: Lighthouse, PageSpeed Insights, WebPageTest
|
|
- **SEO**: Google Search Console, Screaming Frog, Ahrefs
|
|
- **Accessibility**: WAVE, axe DevTools, Screen readers
|
|
- **Structured Data**: Google Rich Results Test, Schema Validator
|
|
- **Mobile**: Mobile-Friendly Test, BrowserStack
|
|
|
|
## When to Use This Skill
|
|
|
|
- Creating new pages or content
|
|
- Optimizing existing content for search
|
|
- Structuring information architecture
|
|
- Writing copy for landing pages
|
|
- Adding metadata and structured data
|
|
- Improving accessibility
|
|
- Optimizing performance
|
|
- Planning content strategy
|
|
- Conducting content audits
|