Implement dynamic SEO, Open Graph, Twitter Cards, canonical URLs, and JSON-LD schema.
Description (EN):
This skill orchestrates dynamic insertion of SEO meta tags, Open Graph (OG) social sharing properties, Twitter Cards, canonical links, and JSON-LD structured data. It ensures search engines and social platforms can rich-index modern applications properly without fragile hardcoded <head> values.
Descripción (ES):
Esta skill orquesta la inserción dinámica de etiquetas meta SEO, propiedades de Open Graph (OG) para compartir en redes sociales, Twitter Cards, enlaces canónicos y datos estructurados JSON-LD. Garantiza que los motores de búsqueda y las plataformas sociales indexen correctamente la aplicación con tarjetas enriquecidas, sin valores frágiles "hardcodeados" en el <head>.
Related resources:
Objective (EN): Ensure that every route (especially dynamic routes like ) correctly defines title, description, sharing images, and structured metadata for Google and social previews.
/:productIdObjetivo (ES):
Garantizar que cada ruta (especialmente dinámicas como /:productId) defina correctamente su título, descripción, imágenes para compartir y metadata estructurada para vistas previas de Google y redes sociales.
Target Framework: React, Angular, Vue, Astro, Next.js, Nuxt, etc.Rendering Mode: CSR, SSR, SSG (affects how metadata requires hydration).Base URL: The public URL (e.g., https://myapp.com) to generate absolute OG image paths.og:image and twitter:image logic ensuring images appear in link previews.robots.txt and sitemap.xml boundaries.Instructions (EN):
<SeoHead />) or a service (like SeoService) that manages document metadata centrally.title, description, image, url, type (website/article), and jsonLd.image or description, fallback to generic global values defined in an environment variable or constants file.og:url and og:image must be absolute paths (e.g., https://domain.com/assets/og.png). Relative paths fail in social crawlers.<link rel="canonical" href="..." /> based on the current location without query parameters.robots.txt allows crawling for public routes and blocks private domains. Check sitemap.xml generating logic if applicable.react-helmet or similar if the framework already has native head manipulation (e.g., Next.js generateMetadata or Nuxt useHead).Instrucciones (ES):
<SeoHead />) o un servicio (como SeoService) que administre la metadata del documento centralizadamente.title, description, image, url, type (website/article) y jsonLd.image o description, usa valores genéricos globales definidos en constantes.og:url y og:image deben ser rutas absolutas (ej. https://domain.com/assets/og.png). Las rutas relativas fallan en los crawlers.<link rel="canonical" href="..." /> basado en la ubicación actual sin query parameters.robots.txt permita rastrear rutas públicas y bloquee dominios privados.react-helmet si el framework ya maneja <head> nativamente (ej. Next.js generateMetadata, Nuxt useHead, o Angular Meta)."Use the @13-seo-and-metadata skill to create a reusable SEO primitive for our Next.js pages. Ensure it requires a title and description, supports an optional standard OG image cover, and correctly sets canonical URLs. Apply it to the
[productSlug]dynamic route using JSON-LD for product data."
"Usa la skill @13-seo-and-metadata para crear una primitiva SEO reutilizable para nuestras páginas en Next.js. Asegúrate de que requiera título y descripción, soporte una imagen OG estándar y configure URLs canónicas. Aplícalo a la ruta dinámica
[productSlug]usando JSON-LD para la información del producto."
src/
└── ui/
├── components/
│ └── common/
│ ├── SeoHead.tsx # Central configuration for meta, OG, and Twitter tags
│ └── JsonLd.tsx # Helper for structured schema scripts
├── pages/
│ └── public/
│ └── ProductView.tsx # Injects local product data into SeoHead
public/
├── robots.txt
└── sitemap.xml
title, description, image).