tknuth
/
pottery-diary
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity
pottery-diary/.claude/skills/ux-seo-aeo/SKILL.md

7.8 KiB
Raw Blame History

name description
ux-seo-aeo 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):

{
  "@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

# 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

# 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

# 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