SEO Ready Skill
Transform Next.js pages into fully SEO-optimized pages.
When to Use
-
SEO optimization requests
-
Before launching pages to production
-
When asked about metadata or search visibility
-
Accessibility audits
Phase 1: Global Setup (Once Per Project)
Check Root Metadata
head -50 src/app/layout.tsx
Required in layout.tsx :
export const metadata: Metadata = { title: { default: "Site Name", template: "%s | Site Name" }, description: "...", metadataBase: new URL("https://your-domain.com"), openGraph: { /* ... / }, twitter: { / ... */ }, };
Sitemap
ls src/app/sitemap.ts 2>/dev/null || echo "MISSING"
If missing, create src/app/sitemap.ts :
import { MetadataRoute } from 'next'
export default function sitemap(): MetadataRoute.Sitemap { const baseUrl = 'https://your-domain.com' return [ { url: baseUrl, lastModified: new Date(), changeFrequency: 'yearly', priority: 1 }, ] }
Robots.txt
Create src/app/robots.ts if missing.
Web Manifest (PWA)
Create src/app/manifest.ts if missing.
Icons
Check: src/app/icon.png , src/app/apple-icon.png
OpenGraph Image
Options:
-
Static: src/app/opengraph-image.png (1200x630px)
-
Dynamic: src/app/opengraph-image.tsx
JSON-LD Structured Data
Add to <body> in layout:
<script type="application/ld+json" dangerouslySetInnerHTML={{ __html: JSON.stringify({ "@context": "https://schema.org", "@type": "SoftwareApplication", "name": "Your App", }) }} />
Phase 2: Per-Page Optimization
Server Component Check
If page starts with 'use client' , refactor:
-
Move client logic to src/features/<feature>/components/
-
Page file becomes Server Component that imports client component
Page Metadata
import { Metadata } from 'next';
export const metadata: Metadata = { title: "Page Title", // Becomes "Page Title | Site Name" description: "Specific description for this page.", };
Semantic HTML Audit
-
<main> for primary content
-
<section> with id for anchors
-
<article> for standalone content
-
Proper heading hierarchy (<h1> → <h2> etc.)
Image Optimization
-
Use <Image> component
-
Required: alt , width , height
Phase 3: Accessibility
-
ARIA labels on interactive elements
-
<html lang="en"> set correctly
-
Keyboard navigable
Phase 4: Verification
pnpm build pnpm dev
Visit /sitemap.xml and /robots.txt
Checklist
Item Status
Root metadata [ ]
sitemap.ts [ ]
robots.ts [ ]
manifest.ts [ ]
Icons [ ]
OpenGraph image [ ]
JSON-LD [ ]
Page metadata [ ]
Semantic HTML [ ]
Build passes [ ]
References
Content writing patterns merged from coreyhaines31/marketingskills:
-
AEO & GEO Patterns: Content blocks optimized for answer engines and AI citation
-
AI Writing Detection: Words and phrases to avoid (the "anti-slop" guide)