seo

Create and validate Next.js page metadata, OpenGraph, and JSON-LD structured data.

Updated Jul 31, 2025

Search Tags:#SEO #Next.js #metadata #JSON-LD #OpenGraph #structured-data #image-optimization

Ready to run

npx skills add https://github.com/aravindjaimon/portfolio --skill seo-aravindjaimon

💬 Prompt for ChatGPT / Claude Chat▼

Please help me install this Agent Skill.
Skill: seo
Source: https://github.com/aravindjaimon/portfolio/tree/main/.claude/skills/seo
Command: npx skills add https://github.com/aravindjaimon/portfolio --skill seo-aravindjaimon

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve?

SEO and metadata management can be tedious and error-prone without a centralized guide. This Skill helps teams consistently implement page titles, meta tags, OpenGraph data, and structured data across Next.js apps.

Core Features & Use Cases

Metadata API integration: Use Next.js Metadata API to programmatically define per-page metadata.
OpenGraph & Twitter cards: Generate robust social previews with correct images and descriptions.
Structured data: Provide JSON-LD for Product/Article/FAQ schemas to improve search results.
Performance optimization: Ensure images and metadata do not block rendering and support LCP/CLS targets.

Quick Start

Configure a root layout with a base metadata template and enable metadataBase.
Add generateMetadata or metadata fields to a page to produce dynamic OpenGraph and JSON-LD.
Validate with Rich Results Test and ensure canonical URLs are set.

Frequently Asked Questions about seo

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

FAQPage Schema

How do I add JSON-LD structured data to a Next.js app?▼

Add JSON-LD structured data to a Next.js app by defining schema objects for Product, Article, or FAQ within your page components. This provides explicit metadata to crawlers to improve rich search results.

How do I generate dynamic OpenGraph and Twitter card images in Next.js?▼

Generate dynamic OpenGraph and Twitter card images in Next.js by using the Metadata API within individual page layouts. This configures specific social previews with correct images and descriptions for each shared URL.

Does this approach support static blogs and ecommerce pages?▼

Yes, this approach supports static blogs and ecommerce pages. It applies Next.js Metadata API workflows to any public-facing routes, ensuring accurate page titles and structured data across diverse content types.

What is the best way to manage Next.js metadata without blocking rendering?▼

The best way to manage Next.js metadata without blocking rendering is using the native Metadata API to define titles and tags programmatically. This supports LCP and CLS performance targets by streamlining image optimization.

How do I validate structured data and canonical URLs in Next.js?▼

Validate structured data and canonical URLs in Next.js by testing your implemented JSON-LD schemas with the Rich Results Test. Ensure your metadataBase configuration correctly sets canonical URLs for accurate search indexing.