skills.rest
kennypallchizaca-coder
kennypallchizaca-coderCOMMUNITY
Explore all skills by this author →
GitHub

seo-and-metadata

Centralize meta tags, OG cards, and canonical URLs for web apps.

Updated Mar 9, 2026
Search Tags:#canonical#framework-agnostic#seo#og#json-ld#twitter-cards#head-management
One-click install
npx skills add https://github.com/kennypallchizaca-coder/agentic-full-stack-skills --skill seo-and-metadata
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: seo-and-metadata
Source: https://github.com/kennypallchizaca-coder/agentic-full-stack-skills/tree/main/frontend-skills/13-seo-and-metadata
Command: npx skills add https://github.com/kennypallchizaca-coder/agentic-full-stack-skills --skill seo-and-metadata

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve?

Current web apps struggle to maintain consistent, framework-accurate SEO metadata across SSR, SSG, and CSR architectures, often leading to broken rich previews and duplicated content.

Core Features & Use Cases

  • Central SEO primitive (component or service) to manage title, description, open graph, twitter cards, canonical links, and JSON-LD data.
  • Handles absolute URLs for images and previews, with fallbacks and environment-based defaults for missing data.
  • Adapts to various rendering modes and integrates with native head management (Next.js generateMetadata, Nuxt useHead, etc.)

Quick Start

Install or import the SEO primitive and render it on your pages, supplying title and description at minimum.

Frequently Asked Questions about seo-and-metadata

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

FAQPage Schema
How do I manage SEO meta tags and Open Graph data across different rendering modes?▼

A centralized SEO primitive manages title, description, Open Graph cards, and canonical links by adapting to your app's rendering mode. It integrates with native head-management APIs to provide robust fallbacks across SSR, SSG, and CSR environments.

How do I add JSON-LD structured data and canonical URLs in a framework-agnostic web app?▼

To add JSON-LD and canonical URLs, define an input surface within a framework-agnostic SEO primitive that accepts structured data and URL strings. This centralizes head management and ensures outputs use absolute URLs for consistent indexing.

Does this SEO primitive work with native head-management APIs like Next.js generateMetadata and Nuxt useHead?▼

Yes, the SEO primitive respects native head-management APIs like Next.js generateMetadata, Nuxt useHead, and Angular Meta. It integrates directly with these framework-specific tools to inject metadata without conflicting with existing rendering pipelines.

Why are my Open Graph images and rich previews broken when sharing links from my modern web app?▼

Broken rich previews often occur because relative URLs are used instead of absolute URLs for images and metadata. A centralized SEO primitive enforces absolute URLs and provides environment-based defaults to prevent missing Open Graph data.

What is the minimum input required to generate valid SEO metadata for my web pages?▼

The minimum input required to generate valid SEO metadata is supplying a page title and description. The primitive then applies robust fallbacks and environment-based defaults for missing fields like images, URLs, and JSON-LD data.

Related Skills

Explore More Software Engineering Skills→
carter2099carter2099

image-fetch

Fetch remote images from URLs and prepare them for viewing in the Read tool.

Community
Intermediate
mindmorassmindmorass
2

site-crawler

Crawl websites with robots.txt compliance and extract structured markdown content.

Community
Advanced
adamhjkadamhjk
2

solid-meta

Manage SolidJS head tags reactively with declarative components and useHead.

Community
Basic
finan-eufinan-eu

pseo-metadata

Generates dynamic SEO metadata for programmatic pages.

Official
Advanced