Generate portable SEO metadata and structured data for React frontends

Provides a portable, framework-agnostic SEO system for React and React Native-for-web frontends, built on five core ideas: one constants/seo module holds every piece of site identity - URL, name, description, keywords, author, social handles, OG image, verification tokens - so nothing is hardcoded twice; a single canonicalUrl(path) function turns any path into an absolute, trailing-slash-normalized URL that every sitemap entry, RSS link, OG url, and JSON-LD @id flows through; metadata, sitemap, robots, RSS, and JSON-LD builders are pure functions returning plain objects, with only one thin buildMetadata adapter touching the host framework's metadata type; structured data shares a typed JsonLd interface and per-type schema.org builders (Person, WebSite, BlogPosting, CreativeWork, BreadcrumbList, FAQPage) that cross-reference each other by a stable @id rather than duplicating fields; and sitemap.xml, robots.txt, and the RSS feed are all generated from the same content collections the app renders, never hand-maintained.

export function canonicalUrl(path: string): string {
  const normalized = path.startsWith("/") ? path : `/${path}`;
  if (normalized === "/") return SITE_URL;
  const withoutTrailing = normalized.endsWith("/")
    ? normalized.slice(0, -1)
    : normalized;
  return `${SITE_URL}${withoutTrailing}`;
}

Use it when adding or auditing SEO for a React, Next.js, Remix, Astro, or Expo-web app - metadata, canonical URLs, sitemap/robots/RSS generation, or JSON-LD structured data - not as a component library or visual style system. It pairs specifically with a sibling frontend-architecture skill, expecting the SEO system to live in one services/seo/ module consumed through a single barrel, with builder functions that never import the host framework except the one metadata adapter, and route files that never build SEO data inline. A twelve-item review checklist enforces the discipline: all identity in one constants module, every absolute URL produced by canonicalUrl() with no manual concatenation, one trailing-slash policy applied everywhere, global metadata set once in the root layout, exactly one canonical per page, generated rather than hand-written sitemap/robots/RSS with private routes disallowed, JSON-LD entities cross-referenced by stable @id rather than duplicated, one primary schema plus a BreadcrumbList per detail page, Person and WebSite on the home page only, and JSON-LD validated with Google's Rich Results Test before shipping.

Input is per-route data - a RouteDescriptor with path, title, description, optional OG image, and indexable flag - plus the site-wide constants; output is framework metadata (title, description, canonical, Open Graph, Twitter/X card) via buildMetadata, deduped absolute SitemapEntry objects for the sitemap, a RobotsConfig disallowing private surfaces like /api/ or /admin/ while pointing at the sitemap, RssItem objects rendered into a CDATA-wrapped RSS 2.0 feed, and typed JsonLd objects for each schema type injected as <script type="application/ld+json"> tags. A five-row framework-adapter table shows how the same pure builders mount differently per target: Next.js App Router (generateMetadata, app/sitemap.ts/robots.ts/feed.xml/route.ts), Remix (per-route meta export, resource routes for XML), Astro (layout head plus page endpoints), a Vite SPA (react-helmet-async fed by the same plain object, a build-time script writing the static files), and Expo Router web (a web-only build step).

Designed to be framework-neutral at the builder layer and portable across coding agents (Claude Code, OpenCode, Codex, Cursor, Windsurf) as a standard SKILL.md package, installable via npx skills add <org>/<repo> --skill "frontend-seo". It's explicitly meant to be paired with a sibling frontend-architecture skill that defines the surrounding shared/services directory shape, and its structured-data output is validated against Google's Rich Results Test and Schema Markup Validator.

Frontend developers setting up or auditing SEO on a React, Next.js, Remix, Astro, or Expo-web project who want a single source of truth for site identity, always-correct canonical URLs, and generated rather than hand-maintained sitemap, robots, RSS, and JSON-LD, portable across whichever coding agent or framework they're using.