Nextjs Seo

What this skill does

This skill provides a comprehensive reference for implementing SEO best practices using Next.js App Router’s Metadata API. It covers generating server-side head tags with full TypeScript support, including static and dynamic metadata, robots directives, sitemap generation, and structured data injection. The skill also addresses optimizing image loading with the `next/image` component to improve page performance and SEO signals like Core Web Vitals.

Who it's for

This skill is designed for frontend developers and SEO specialists working within Next.js projects who need to integrate SEO at the component and routing level. Growth leads managing content-heavy sites or e-commerce platforms benefit from dynamic metadata generation for personalized pages. Agency strategists responsible for technical SEO audits and implementation will find this skill useful for aligning Next.js features with search engine requirements.

Key workflows

Practitioners start by defining global and page-specific metadata using the `metadata` export in layout and page files. For dynamic content, they implement an async `generateMetadata` function that fetches data and constructs metadata objects with titles, descriptions, Open Graph, and Twitter card data. Next, they configure robots meta tags to control indexing and crawling on private or search result pages. Sitemap generation follows, either as a single file or segmented for large sites, using fetch calls to aggregate URLs and metadata. Finally, JSON-LD structured data is injected manually via script tags to enhance rich results, and images are optimized using the `next/image` component with proper sizing and loading priority.

Common questions

How do I avoid repeating brand names in page titles? Use the `title.template` property in the root layout metadata to append or prepend your brand consistently. Can I generate metadata dynamically without extra fetch calls? Yes, Next.js deduplicates fetches between `generateMetadata` and the page component using its cache mechanism. How do I block search engines from indexing admin pages? Set the `robots` metadata with `index: false` and `follow: false` on those routes.

How to use in Metaflow

Attach this skill to any Metaflow agent task that involves Next.js app development or SEO audit workflows. The agent will provide targeted guidance on implementing Metadata API patterns, dynamic metadata generation, and configuring robots and sitemaps. Expect detailed examples for structuring your metadata exports and integrating JSON-LD and optimized images. This skill supports efficient, SEO-driven decision-making in Next.js projects by...

For broader context, see our roundup of claude skills for marketing, and read Claude skills for SEO for related setup guidance.