ReddRadar
Agent skill
seo-handler
Manage SEO, sitemaps, and metadata for optimal search engine visibility
Install this agent skill to your Project
npx add-skill https://github.com/aiskillstore/marketplace/tree/main/skills/aayushbaniya2006/seo-handler
SKILL.md
SEO Handler Skill
This skill ensures your Next.js application is optimized for search engines. It covers sitemaps, metadata (OpenGraph), server-side rendering (SSR/ISR), structured data (JSON-LD), and robots.txt configuration.
Core Principles
- Sitemap Visibility: Every public page MUST be in
src/app/sitemap.ts. - Metadata Inheritance: Use
layout.tsxfor defaults; override inpage.tsx. - Structured Data: Use
next-seocomponents (JSON-LD) on every content page. - Server-Side Data: Fetch content-heavy data on the server (ISR) for SEO.
- Robots Control: Use
src/app/robots.tsto guide crawlers.
1. Sitemap Management
File: src/app/sitemap.ts
When adding a new public route (e.g., /features), add it to the staticPages array.
const staticPages = [
"", // Home
"/features", // New page
// ...
];
Splitting Sitemaps (Large Sites)
If you have >50k URLs (e.g., user profiles, products), use generateSitemaps.
File: src/app/products/sitemap.ts
import { BASE_URL } from '@/lib/constants';
export async function generateSitemaps() {
// Fetch total count and divide by batch size (e.g., 50,000)
return [{ id: 0 }, { id: 1 }];
}
export default async function sitemap({ id }: { id: { id: number } }) {
const start = id.id * 50000;
const products = await getProducts(start, 50000);
return products.map(product => ({
url: `${BASE_URL}/products/${product.slug}`,
lastModified: product.updatedAt,
}));
}
2. Metadata & OpenGraph
Base Layout: src/app/layout.tsx (or group layout) defines the template.
export const metadata: Metadata = {
title: {
template: "%s | My App",
default: "My App - The Best SaaS",
},
description: "...",
openGraph: { ... }, // Default OG
};
Page Level: src/app/blog/[slug]/page.tsx
export async function generateMetadata({ params }): Promise<Metadata> {
const post = await getPost(params.slug);
return {
title: post.title,
description: post.summary,
openGraph: {
images: [post.coverImage], // Overrides default
},
};
}
3. Structured Data (JSON-LD)
Primary: Next-SEO Components
Use next-seo components to inject JSON-LD structured data. This helps search engines understand your content (Articles, Products, FAQs, etc.).
Page Component: src/app/blog/[slug]/page.tsx
import { ArticleJsonLd } from "next-seo";
export default function BlogPost({ post }) {
return (
<>
<ArticleJsonLd
useAppDir
url={`https://myapp.com/blog/${post.slug}`}
title={post.title}
images={[post.image]}
datePublished={post.date}
authorName="My App"
description={post.description}
/>
<article>...</article>
</>
);
}
Alternative: Raw JSON-LD (Script Tag)
If a specific schema isn't supported by next-seo, use a raw script tag. Wrap in Suspense if the data fetching is async.
import { Suspense } from "react";
export default function Page() {
const jsonLd = {
'@context': 'https://schema.org',
'@type': 'CustomType',
name: 'Custom Name',
description: 'Description',
};
return (
<section>
<Suspense fallback={null}>
<script
type="application/ld+json"
dangerouslySetInnerHTML={{ __html: JSON.stringify(jsonLd) }}
/>
</Suspense>
{/* Page Content */}
</section>
);
}
4. Incremental Static Regeneration (ISR)
For content pages (Blogs, Docs, Marketing) that rely on database content, use ISR to cache them at the edge.
Page Component:
// src/app/blog/[slug]/page.tsx
// 1. Enable ISR
export const revalidate = 3600; // Revalidate every hour (in seconds)
// OR use dynamic params with generateStaticParams for full static export behavior
export const dynamicParams = true;
export async function generateStaticParams() {
const posts = await db.query.posts.findMany();
return posts.map((post) => ({ slug: post.slug }));
}
export default async function BlogPost({ params }) {
// 2. Fetch on Server (Data is cached based on revalidate config)
const post = await getPost(params.slug);
return <article>{/* ... */}</article>;
}
5. Robots.txt configuration
File: src/app/robots.ts
Ensure you disallow private routes (/api/, /app/, /admin/) to save crawl budget.
export default function robots(): MetadataRoute.Robots {
return {
rules: {
userAgent: "*",
allow: "/",
disallow: ["/api/", "/app/", "/super-admin/"],
},
sitemap: `${process.env.NEXT_PUBLIC_APP_URL}/sitemap.xml`,
};
}
Recommended Agent Skills
Expand your agent's capabilities with these related and highly-rated skills.
aiskillstore/marketplace
perigon-backend
Perigon ASP.NET Core + EF Core + Aspire conventions
aiskillstore/marketplace
perigon-agent
Pointers for Copilot/agents to apply Perigon conventions
aiskillstore/marketplace
perigon-angular
Angular 21+ standalone/Material/signal conventions for Perigon WebApp
aiskillstore/marketplace
fastapi-mastery
Comprehensive FastAPI development skill covering REST API creation, routing, request/response handling, validation, authentication, database integration, middleware, and deployment. Use when working with FastAPI projects, building APIs, implementing CRUD operations, setting up authentication/authorization, integrating databases (SQL/NoSQL), adding middleware, handling WebSockets, or deploying FastAPI applications. Triggered by requests involving .py files with FastAPI code, API endpoint creation, Pydantic models, or FastAPI-specific features.
aiskillstore/marketplace
context7-efficient
Token-efficient library documentation fetcher using Context7 MCP with 86.8% token savings through intelligent shell pipeline filtering. Fetches code examples, API references, and best practices for JavaScript, Python, Go, Rust, and other libraries. Use when users ask about library documentation, need code examples, want API usage patterns, are learning a new framework, need syntax reference, or troubleshooting with library-specific information. Triggers include questions like "Show me React hooks", "How do I use Prisma", "What's the Next.js routing syntax", or any request for library/framework documentation.
aiskillstore/marketplace
browser-use
Browser automation using Playwright MCP. Navigate websites, fill forms, click elements, take screenshots, and extract data. Use when tasks require web browsing, form submission, web scraping, UI testing, or any browser interaction.
Didn't find tool you were looking for?