skills.rest
aravindjaimon
aravindjaimonCOMMUNITY
Explore all skills by this author →
WebsiteGitHub

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
One-click install
npx skills add https://github.com/aravindjaimon/portfolio --skill seo-aravindjaimon
Or copy as Structured Prompt for Agent▼
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

  1. Configure a root layout with a base metadata template and enable metadataBase.
  2. Add generateMetadata or metadata fields to a page to produce dynamic OpenGraph and JSON-LD.
  3. 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.

Related Skills

Explore More Software Engineering Skills→
moughamirmoughamir

nextjs-seo

Audit Next.js 16+ App Router SEO configuration for crawl and indexing issues.

Community
Intermediate
marcosbatallas99marcosbatallas99

schema

Generate valid schema.org JSON-LD markup for Google rich results.

Community
Intermediate
guillermoscriptguillermoscript
21

optimize

Analyzes web page loads and recommends optimizations for faster performance.

Community
Advanced
jovermierjovermier
2

nextjs-metadata

Implement Next.js metadata for SEO, OpenGraph, and structured data.

Community
Intermediate