Skill: Next.js Portfolio Open Graph Metadata

Maintained by: Azam Shaikh (GitHub: azamcodes)
Purpose: Ensures correct Open Graph (OG) metadata for Next.js portfolio websites, improving social sharing and SEO visibility.

Description

This AI agent skill provides domain-specific knowledge for generating Open Graph metadata for Next.js portfolio sites. It ensures all pages have correctly formatted OG tags and images, enhancing previews on social platforms like Facebook, LinkedIn, and Twitter.

Scope

• •Open Graph metadata for all portfolio pages
• •Recommended image sizes and formats for social sharing
• •Integration with dynamic portfolio content
• •Works with Antigravity, Cursor, Gemini CLI, Claude, OpenCode, Codex, or any Agent Skill-supporting system

Rules

1. •

   Mandatory OG Tags

   • •og:title — page or portfolio item title (<60 chars recommended)
   • •og:description — concise description (<160 chars recommended)
   • •og:image — high-quality image (1200x630px recommended, optimized JPEG/PNG/WebP)
   • •og:url — canonical URL of the page
   • •og:type — website for general pages, profile for personal items if relevant
2. •

   Optional Tags

   • •og:locale — e.g., en_US
   • •og:site_name — portfolio or personal brand name
3. •

   Image Best Practices

   • •Unique image per page
   • •Properly sized and compressed for fast load
   • •Include alt text for accessibility
4. •

   Failure Conditions

   • •If any required OG tag is missing, agent must request info or skip conservatively
   • •Avoid invalid URLs or oversized images

Non-Goals

• •Does not design visuals or generate images
• •Does not optimize page performance
• •Does not handle SEO beyond Open Graph

Usage Example

npx skills add azamcodes-nextjs-portfolio-og