seo-metadata

Generate Next.js Metadata API configurations with Open Graph and JSON-LD schemas.

6|Updated Jan 29, 2026
One-click install
npx skills add https://github.com/JaivishChauhan/vibecoding-starter --skill seo-metadata
Or copy as Structured Prompt for Agent
Please help me install this Agent Skill.
Skill: seo-metadata
Source: https://github.com/JaivishChauhan/vibecoding-starter/tree/main/.agent/skills/seo-metadata
Command: npx skills add https://github.com/JaivishChauhan/vibecoding-starter --skill seo-metadata

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve?

This Skill helps portfolio sites improve search visibility and social previews by providing structured SEO configuration using Next.js Metadata API, Open Graph, and JSON-LD.

Core Features & Use Cases

  • Global defaults: define site-wide metadataBase, openGraph, twitter, and website schema.
  • Page-level control: generate dynamic metadata for projects and blog posts.
  • Structured data: add Person, CreativeWork, and Breadcrumb schemas to enhance search results.

Quick Start

Set up a Next.js app and implement a global metadata configuration in app/layout.tsx, plus per-page metadata generation for projects and blog posts to drive Open Graph, Twitter, and JSON-LD schemas.

Frequently Asked Questions about seo-metadata

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

FAQPage Schema
How do I generate Next.js metadata API configurations for a portfolio site?

Generate Next.js metadata API configurations by defining global site-wide defaults in app/layout.tsx and dynamic page-level metadata for projects and blog posts to drive consistent SEO across your portfolio.

What is JSON-LD structured data and when do I need it for SEO?

JSON-LD structured data is a schema format that helps search engines understand your content. You need it for portfolio SEO to add Person, CreativeWork, and Breadcrumb schemas that enhance search result appearances.

How do I set up Open Graph and Twitter metadata for Next.js project pages?

Set up Open Graph and Twitter metadata for Next.js project pages by implementing dynamic metadata generation, ensuring consistent social previews and structured data across personal portfolio and project pages.

Can I define site-wide SEO defaults and still control metadata for individual blog posts?

Yes, you can define site-wide SEO defaults like metadataBase and website schema globally, while using the Next.js Metadata API to generate dynamic, page-level metadata for individual blog posts and projects.

Does this approach to SEO metadata work for personal portfolios built with Next.js?

Yes, this SEO metadata approach works for personal portfolios built with Next.js by providing global and page-level metadata, Open Graph, Twitter, and JSON-LD schema configurations tailored for portfolio discoverability.

What's the best way to add Breadcrumb and Person schema to a Next.js blog?

The best way to add Breadcrumb and Person schema to a Next.js blog is by generating JSON-LD structured data configurations, which enhance search results and improve content discoverability for personal portfolios.