micaelgomestavares/aeo-geo-mejores-practicas

/aeo-geo-mejores-practicas — SEO + AEO + GEO + Lighthouse 100 Playbook

Workflow completo para transformar cualquier página o SPA en una máquina de descubrimiento orgánico (SEO), motores de respuesta (AEO) y motores generativos/agentes de IA (GEO), garantizando simultáneamente 98–100 en Google Lighthouse 13 (Desktop y Mobile) en las 5 categorías: Performance, Accessibility, Best Practices, SEO y Agentic Browsing.

Caminos: <skill> es la carpeta donde se encuentra este SKILL.md.

---

0. Alineamiento Rápido Antes de Ejecutar

0.1. Detecta la stack y lee la guía correspondiente

Las reglas de este archivo aplican para cualquier sitio web. Lo que cambia entre frameworks (dónde está el <head>, la carpeta pública, cómo prerenderizar, cómo optimizar imágenes y evitar TBT, qué comando inicia la vista previa) está en references/frameworks/. Identifica la stack por el proyecto y lee la guía antes de aplicar los pasos 1 a 5:

Señal en el proyecto	Stack	Guía
angular.json o @angular/core	Angular	references/frameworks/angular.md
next.config.* o next	Next.js	references/frameworks/nextjs.md
nuxt.config.* o nuxt / vite.config.* + vue	Nuxt / Vue + Vite	references/frameworks/vue-nuxt.md
astro.config.* o astro	Astro	references/frameworks/astro.md
vite.config.* + react	Vite + React	references/frameworks/vite-react.md
index.html sin framework	HTML estático	references/frameworks/html-estatico.md

Si la stack no está en la lista (ej.: SvelteKit, Remix, Gatsby, WordPress), aplica las reglas generales de este archivo y usa la guía más parecida como referencia: los frameworks con SSR/SSG siguen la lógica de Next/Nuxt; las SPA siguen la de Vite + React.

0.2. Confirma con el usuario

Antes de modificar el código, confirma (o extrae del propio proyecto si ya está explícito):

1. Dominio canónico de producción (ej.: https://misitio.com/). Si aún no hay dominio definido, pregunta o usa un placeholder claro y avisa al usuario.
2. FAQ Visible vs. Invisible (solo AEO/GEO):
   • Pregunta si el usuario quiere la sección de Preguntas Frecuentes (FAQ) visible en el diseño de la página (<details>/<summary>) o solo invisible en segundo plano (dentro del @graph JSON-LD + llms.txt + <noscript>) para no alterar el diseño visual.
3. Preferencia de rastreo para entrenamiento (al crear o modificar robots.txt) :
   • Verifica si el sitio ya ha definido una preferencia. Si no hay una elección clara, ofrece dos opciones: permitir la búsqueda y bloquear el rastreo para entrenamiento de OpenAI y Anthropic; o permitir también ese rastreo para entrenamiento. Conserva las demás reglas del sitio.

---

1. SEO Técnico Completo (index.html, robots.txt, sitemap.xml)

Consulta las plantillas listas en references/templates.md.

1. Meta Tags Esenciales en el <head> :
   • <html lang="es"> (o idioma del proyecto).
   • <title> fuerte (50–65 caracteres) con Nombre de la Marca/Especialista + Propuesta Principal.
   • <meta name="description"> (140–165 caracteres) respondiendo claramente qué es, para quién es y qué incluye.
   • <meta name="robots" content="index, follow, max-image-preview:large, max-snippet:-1, max-video-preview:-1" />
   • <link rel="canonical" href="https://dominio.com/" /> + <link rel="alternate" hreflang="es" ... /> y x-default.
   • Open Graph completo (og:type, og:locale, og:site_name, og:title, og:description, og:url, og:image, og:image:width, og:image:height, og:image:alt) y Twitter Cards (summary_large_image).
2. public/robots.txt Amigable para Buscadores e IAs:
   • Para mantener la posibilidad de aparecer en las búsquedas de ChatGPT y Claude, permite OAI-SearchBot y Claude-SearchBot. Claude-User puede buscar páginas en respuesta a solicitudes de usuarios; ChatGPT-User también es activado por usuarios, pero no controla la inclusión en la búsqueda de ChatGPT.
   • GPTBot y ClaudeBot son los bots documentados para posible uso del contenido en entrenamiento. Si el usuario opta por bloquear ese rastreo, usa grupos propios con Disallow: / para ambos, sin bloquear los bots de búsqueda. Si opta por permitirlo, usa Allow: / para ambos. Consulta las dos variantes en references/templates.md.
   • Trata los controles de otros proveedores, como Google-Extended, por separado. Permitir acceso a los bots de búsqueda aumenta la elegibilidad, pero no garantiza la citación o presencia en las respuestas. Consulta las directrices de OpenAI y de Anthropic al actualizar la lista de bots.
   • Apunta a Sitemap: https://dominio.com/sitemap.xml.
3. public/sitemap.xml Rico (Imágenes + Video):
   • Incluye los namespaces xmlns:image="http://www.google.com/schemas/sitemap-image/1.1" y xmlns:video="http://www.google.com/schemas/sitemap-video/1.1" cuando haya imágenes destacadas y video de ventas/presentación.

---

2. AEO — Answer Engine Optimization (Featured Snippets, Voz y Crawlers sin JS)

Los motores de respuesta necesitan entidades conectadas y HTML semántico legible sin ejecutar JavaScript:

1. Grafo Conectado @graph en Schema.org JSON-LD:
   • En lugar de scripts JSON-LD sueltos, crea un único <script type="application/ld+json"> con @graph conectando las entidades por @id (consulta el modelo en references/templates.md):
     • WebSite (#website)
     • Person o Organization (#person / #org) con sameAs para redes sociales oficiales
     • WebPage (#webpage) con about y mainEntity
     • Product / SoftwareApplication / Service (#product) con offers
     • Course (#course) cuando haya curso/entrenamiento/bonus educativo
     • VideoObject (#video) cuando haya VSL o video de presentación
     • FAQPage (#faq) con 4 a 6 preguntas reales de alta intención de búsqueda y respuestas directas y completas (40–70 palabras cada).
2. Fallback Semántico <noscript> para SPAs (React / Vue / Vite):
   • Solo aplica para SPAs sin prerenderización. En Next.js, Nuxt, Astro, Angular con SSR/prerender y HTML estático, el HTML ya llega completo y el <noscript> es innecesario (consulta la guía de la stack).
   • Los crawlers de LLMs (GPTBot, ClaudeBot, PerplexityBot, OAI-SearchBot) frecuentemente hacen fetch solo del HTML bruto y no ejecutan el bundle JavaScript.
   • En proyectos SPA donde <div id="root"></div> viene vacío, agrega un bloque <noscript><main>...</main></noscript> en el index.html que contenga el <h1>, resumen de la oferta, lista de entregables (<ul><li>) y enlace directo al CTA/checkout.
   • Importante para Rendimiento: Usa <noscript> (y no elementos dentro de <div id="root"> cuando uses createRoot().render()), ya que colocar DOM dentro de #root sin SSR hace que React desmonte y recrea todo el árbol en el mount, retrasando el LCP y generando TBT.

---

3. GEO & Agentic Browsing (Nota 100 en Lighthouse 13)

Google Lighthouse 13 introdujo la categoría Agentic Browsing, que audita si la página está preparada para agentes autónomos y LLMs (llms-txt y ard-schema).

1. public/llms.txt + Enlace en el <head> :
   • Crea public/llms.txt en Markdown estructurado (consulta references/templates.md) conteniendo:
     • # Nombre del Producto / Marca
     • > Resumen en una frase de la propuesta de valor
     • Secciones claras: ## Sobre, ## Qué Incluye, ## Bonus / Condiciones, ## Preguntas Frecuentes (AEO / GEO), ## Enlaces Oficiales.
   • En el <head> del index.html, agrega: <link rel="help" type="text/plain" href="/llms.txt" title="LLMs.txt — Información estructurada para IAs" />
2. public/.well-known/ard.json (Agent Resource Discovery v0.91):
   • En SPAs (Vite, Next, etc.), las rutas inexistentes como /.well-known/ard.json retornan el index.html (<!doctype html>) por fallback, haciendo que la auditoría ard-schema de Lighthouse 13 falle con error de parse JSON.
   • Crea siempre el archivo public/.well-known/ard.json siguiendo el schema oficial ARD v0.91 (modelo exacto en references/templates.md):
     • Debe contener ardVersion: "0.91.0" y entries con identifier en formato urn:air:<dominio>:<tipo>:<slug>, displayName, type: "application/agent-skills+md", url apuntando a /llms.txt, description y representativeQueries.

---

4. Google Lighthouse 100/100: Rendimiento y Accesibilidad

Para alcanzar 98–100 en Mobile (4G Simulado + 4x CPU Throttling) y 100 en Desktop, aplica rigurosamente estas reglas:

4.1. LCP (Largest Contentful Paint < 2.1s en Mobile)

1. Preload en la Parte Superior del <head> :
   • Coloca el <link rel="preload" as="image" ... fetchpriority="high"> justo debajo del <title> (en las primeras 15 líneas del index.html), antes de las decenas de meta tags Open Graph y del JSON-LD.
2. Calibración de srcSet y sizes para el DPR 1.75x de Lighthouse Mobile:
   • Lighthouse Mobile emula un Moto G Power (412px de ancho con devicePixelRatio: 1.75).
   • Si una imagen tiene sizes="(max-width: 767px) 260px, 500px", Chrome calcula 260 * 1.75 = 455w. Si la versión mobile en el srcSet se declara como 260w (menor que 455w), Chrome ignora la imagen mobile y descarga la versión de escritorio pesada.
   • Regla de oro: Declara la imagen mobile en el srcSet con un ancho >= ceil(ancho_css_mobile * 1.8) (ej.: 450w para imágenes de 240px, o 680w para imágenes de 360px full-width en mobile) y comprímela en WebP (< 30 KB).
3. Evita que Imágenes Decorativas de Fondo "Roben" el LCP:
   • Si la sección Hero tiene una foto decorativa de fondo (opacity: 0.15) con una caja (boundingRect) más grande que el retrato principal o <h1>, Chrome la considerará el elemento LCP.
   • En mobile (@media (max-width: 767px)), oculta fotos de fondo gigantes puramente decorativas (display: none) o reduce sus dimensiones para que el elemento principal (precargado con fetchpriority="high") sea el único candidato a LCP.
4. No hagas Preload de Fuentes que Compiten con el JS/CSS Crítico en SPAs:
   • Usa font-display: swap en el @font-face y deja que el navegador priorice la descarga del CSS y del bundle JS inicial antes de la fuente secundaria.

4.2. TBT Cero (0ms Total Blocking Time)

1. Sustituye Animaciones Continuas de JS por CSS Compositor + IntersectionObserver :
   • Las bibliotecas completas de animación en el bundle inicial añaden 50–150 KB de JS y bloquean el hilo principal en la hidratación.
   • Para reveals de scroll, usa IntersectionObserver nativo alternando una clase .is-visible con transition: opacity, transform acelerada por GPU (translate3d).
   • Para partículas o rotaciones continuas, usa @keyframes en CSS con transform: translate3d(...) / rotate(...) y will-change: transform.
2. Cuidado con Filtros SVG (<feTurbulence>, drop-shadow) y SMIL <animate> en la Carga:
   • Nunca uses <feTurbulence> en pantalla completa sin dimensiones fijas (recalcula ruido Perlin en millones de píxeles en la CPU, generando Long Tasks de 300ms+). Prefiere radial-gradient ligero en CSS.
   • Nunca combines filter: drop-shadow(...) en un elemento padre cuyo SVG hijo sufre mutación de geometría en cada frame durante la carga inicial. Si hay morphing de <path> mediante <animate attributeName="d">, activa el morphing solo después de la primera interacción del usuario (pointermove, touchstart, wheel) o después de la carga inicial (setTimeout de 8000ms), manteniendo solo la rotación CSS en la GPU durante la carga.
3. Code-Splitting de Smooth Scroll (Lenis):
   • Carga Lenis dinámicamente (await import("lenis")) solo en el primer evento wheel, touchstart o keydown ({ passive: true, once: true }). Así pesa 0 KB y 0ms de CPU en la carga inicial.
4. Aísla Timers (setInterval / Contadores de Urgencia) en Componentes Hoja:
   • Nunca coloques un hook useCountdown (setInterval de 1s) en el componente raíz <App />. Esto fuerza a React a re-renderizar la página completa cada segundo durante la prueba de Lighthouse. Aísla el estado del reloj en un pequeño componente <CountdownClock /> que renderice solo los dígitos.

4.3. Accesibilidad Nota 100 (WCAG AA)

1. Contraste de Colores (color-contrast):
   • Textos pequeños sobre fondo oscuro (#10100f / #171512) necesitan una relación de contraste >= 4.5:1. Usa tonos claros para textos secundarios (#c4beb4, #d6c5b2) y naranjas luminosos para destacados sobre fondo oscuro (#ff9452, #ffa36b).
   • Botones con fondo naranja vibrante (#ff772f) deben usar texto oscuro (#140c06) para contraste máximo.
2. Consistencia entre Texto Visible y Nombre Accesible (label-content-name-mismatch):
   • Nunca pongas un aria-label en un enlace/botón que no contenga exactamente el texto visible dentro de él (ej.: si el logo dice CF ZANELLA., no pongas aria-label="Inicio").
3. Semántica y Teclado:
   • Incluye <a class="skip-link" href="#contenido">Saltar al contenido</a> como primer foco del <body>.
   • Usa jerarquía estricta de títulos (h1 -> h2 -> h3), aria-labelledby en todas las <section>, y aria-pressed en selectores de estado.

---

5. Validación Automatizada con Google Lighthouse

Siempre valida los cambios ejecutando el script automatizado del skill:

# Proyecto local: detecta la stack, ejecuta `npm run build` (si existe) e inicia la vista previa en el puerto 4173
node <skill>/scripts/run-lighthouse.mjs

# Saltar el build (cuando la salida del build ya está actualizada@azure)...#

[El contenido se ha truncado para la traducción]