j-star-films-studios 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>withidfor 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)