skills.rest
baxriddin0317
baxriddin0317COMMUNITY
Explore all skills by this author →
WebsiteGitHub

seo-patterns

Generate Next.js 16 metadata, Open Graph, JSON-LD, and sitemaps.

Updated May 24, 2025
Search Tags:#metadata#nextjs#sitemap#seo#open-graph#structured-data#json-ld
One-click install
npx skills add https://github.com/baxriddin0317/mega-ulgurji --skill seo-patterns-baxriddin0317
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: seo-patterns
Source: https://github.com/baxriddin0317/mega-ulgurji/tree/main/.claude/plugins/mega-dev/skills/seo-patterns
Command: npx skills add https://github.com/baxriddin0317/mega-ulgurji --skill seo-patterns-baxriddin0317

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve?

SEO and metadata integration for Next.js apps can be complex and error-prone. This skill provides patterns and guidelines to implement dynamic metadata, Open Graph, JSON-LD, sitemaps, and canonical URLs across product and category pages.

Core Features & Use Cases

  • Static and dynamic metadata generation using Next.js 16 Metadata API.
  • Open Graph and Twitter Card configuration with dynamic previews and OG images.
  • JSON-LD structured data schemas for Organization, Product, and Breadcrumbs.
  • Sitemap generation setup and best practices for e-commerce storefronts.
  • Dynamic OG image generation for product/category pages.
  • Guidance for robust canonical URL handling and SEO health checks.

Quick Start

Configure your product and category pages to export dynamic generateMetadata, wire in openGraph and json-ld resources, and set up sitemap generation according to this skill's patterns.

Frequently Asked Questions about seo-patterns

High-intent search queries and answers about installing and using this skill.

FAQPage Schema
How do I generate dynamic metadata for product and category pages in Next.js?▼

You can generate dynamic metadata for Next.js pages by exporting the generateMetadata function from your route, allowing you to fetch and map data like product titles and descriptions dynamically per page based on route parameters.

What is the best way to add JSON-LD structured data to a Next.js App Router storefront?▼

Adding JSON-LD structured data to a Next.js storefront involves injecting schema objects like Organization, Product, and Breadcrumbs directly into your page components, ensuring search engines can parse your e-commerce catalog for rich search results.

How do I set up dynamic Open Graph images for Next.js routes?▼

Setting up dynamic Open Graph images for Next.js routes requires configuring the openGraph field within your metadata object to reference dynamically generated images, enabling rich social media previews for product and category pages.

Does this Next.js SEO pattern support sitemap generation and canonical URL handling?▼

Yes, these Next.js SEO patterns include sitemap generation setup and robust canonical URL handling, ensuring search engines correctly index route variations and prevent duplicate content issues across your storefront.

Can I use these metadata patterns with Next.js 16 App Router?▼

Yes, these SEO patterns are specifically designed for Next.js 16 App Router projects, utilizing the latest Metadata API to configure static and dynamic metadata, Open Graph, and structured data across your application routes.

Why do I need structured data schemas for an e-commerce storefront?▼

Structured data schemas are needed for e-commerce storefronts to explicitly define Product and Breadcrumb information to search engines, which enables rich search snippets and improves product visibility in search results.

Related Skills

Explore More Software Engineering Skills→
nth5693nth5693
370

Next.js Best Practices Skill

Implement Next.js App Router architecture and component best practices.

Community
Intermediate
corbintalbert9744-artcorbintalbert9744-art

repl-seo-optimizer

Update HTML head tags, Open Graph, and structured data in Replit apps.

Community
Intermediate
megahomewebmegahomeweb

seo-patterns

Configure SEO metadata patterns for Next.js 16 App Router pages.

Community
Advanced
laguagulaguagu
58

nextjs-seo

Configure Next.js 16+ SEO metadata, Open Graph, and sitemaps.

Community
Advanced