nextjs-seo-foundations
Technical SEO standards for Next.js 14, including metadata logic and performance optimizations.
Install
mkdir -p .claude/skills/nextjs-seo-foundations && curl -L -o skill.zip "https://agentskills.codes/api/skills/download/13933" && unzip -o skill.zip -d .claude/skills/nextjs-seo-foundations && rm skill.zipInstalls to .claude/skills/nextjs-seo-foundations
Activation
This is the description your AI agent reads to decide when to run this skill — the better it matches your request, the more reliably it fires.
Next.js 14 应用的生产级 SEO 工程化规范 (Metadata, Schema, Performance)Key capabilities
- →Implement dynamic title strategies with month and year
- →Enforce canonical URL usage with trailing slashes
- →Include Schema Graph for high-traffic pages
- →Optimize images for Largest Contentful Paint (LCP)
- →Delay load interactive components for FID/INP optimization
How it works
The skill defines engineering standards for building high-traffic Next.js sites by specifying rules for metadata, structured data, and performance optimization.
Inputs & outputs
When to use nextjs-seo-foundations
- →Checking page SEO
- →Implementing JSON-LD schema
- →Optimizing LCP/CLS performance
- →Writing generateMetadata
About this skill
🚀 Next.js SEO Foundations
Role: SEO Engineer (SEO 工程师) Core Function: 确保代码符合 Technical SEO 工业标准。
When This Skill Applies
- 当用户要求 "Check SEO" 或 "Optimize page" 时。
- 当编写
generateMetadata函数时。 - 当添加
StructuredData或 JSON-LD 时。 - 当进行代码审查 (Code Review) 涉及性能指标 (LCP/CLS) 时。
Instructions
本 Skill 定义了构建高流量 Next.js 站点的工程标准。
1. Metadata 架构 (The Logic of Tags)
1.1 动态标题策略
- Rule: 必须包含
Month Year以保持新鲜度。 - Code Pattern:
export async function generateMetadata(): Promise<Metadata> { const date = new Date(); const monthYear = date.toLocaleDateString('en-US', { month: 'long', year: 'numeric' }); return { title: `Codes (${monthYear}) ...` } }
1.2 Canonical URL 强制性
- Fatal Error: 缺少 Canonical 会导致权重分散。
- Fix: 统一使用带尾部斜杠的绝对路径。
2. 结构化数据体系 (Schema Graph)
任何高流量页面 (Hub Page) 必须包含 Schema 组合拳：
- BreadcrumbList: 层级结构。
- FAQPage: 抢占 PAA 区域 (>= 5 Questions)。
- VideoGame: 产品本体。
3. 性能即 SEO (Performance as SEO)
3.1 图片优化 (LCP)
- Rule: 首屏大图 (Hero Image) 必须添加
priority属性。
3.2 交互延迟 (FID/INP)
- Optimization: 将非首屏交互组件 (Chart, Calculator) 使用
next/dynamic延迟加载。
Commands
/audit-seo [url]: 运行 SEO 完整性检查。
How it compares
This skill provides specific code patterns and rules for Next.js SEO, unlike general SEO guidelines.
Compared to similar skills
nextjs-seo-foundations side by side with the closest alternatives in the catalog.
| Skill | Installs | Updated | Safety | Difficulty |
|---|---|---|---|---|
| nextjs-seo-foundations (this skill) | 0 | 1mo | No flags | Intermediate |
| nextjs-developer | 328 | 2mo | No flags | Advanced |
| frontend-developer | 27 | 4mo | No flags | Intermediate |
| senior-frontend | 15 | 7mo | Review | Intermediate |
Try saying
Example prompts that trigger this skill in your AI assistant.
More by zou9229
View all by zou9229 →You might also like
nextjs-developer
zenobi-us
Expert Next.js developer mastering Next.js 14+ with App Router and full-stack features. Specializes in server components, server actions, performance optimization, and production deployment with focus on building fast, SEO-friendly applications.
frontend-developer
sickn33
Build React components, implement responsive layouts, and handle client-side state management. Masters React 19, Next.js 15, and modern frontend architecture. Optimizes performance and ensures accessibility. Use PROACTIVELY when creating UI components or fixing frontend issues.
senior-frontend
davila7
Comprehensive frontend development skill for building modern, performant web applications using ReactJS, NextJS, TypeScript, Tailwind CSS. Includes component scaffolding, performance optimization, bundle analysis, and UI best practices. Use when developing frontend features, optimizing performance, implementing UI/UX designs, managing state, or reviewing frontend code.
web-performance-optimization
davila7
Optimize website and web application performance including loading speed, Core Web Vitals, bundle size, caching strategies, and runtime performance
nextjs-app-router-patterns
wshobson
Master Next.js 14+ App Router with Server Components, streaming, parallel routes, and advanced data fetching. Use when building Next.js applications, implementing SSR/SSG, or optimizing React Server Components.
perf-astro
tech-leads-club
Astro-specific performance optimizations for 95+ Lighthouse scores. Covers critical CSS inlining, compression, font loading, and LCP optimization. Triggers on: astro performance, astro lighthouse, astro optimization, astro-critters.