seo-ready（SEO ready 搜索）

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

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)