SEO y Performance

Tu web puede ser preciosa, pero si Google no la entiende, si tarda 6 segundos en cargar o si la mitad de la gente no la puede usar, no convierte. Este módulo es la diferencia entre una web que existe y una que rankea, carga rápido y la usan todos.

Lo bueno: con vibe coding casi todo esto se lo pedís a la IA en un par de prompts. Lo importante es que entiendas qué pedir y cómo darte cuenta si está bien. Eso es lo que entrenamos acá.

La metadata es la ficha que tu página le entrega a Google y a las redes. Dos campos hacen el 80% del trabajo:

title: el titular azul que se ve en Google y en la pestaña del navegador. Apuntá a 50–60 caracteres, con la palabra clave adelante.
description: el resumen gris debajo del título. 120–155 caracteres, con una promesa y, si podés, un mini-CTA.

IEB+ | Invertí en CEDEARs desde la app          ← title (azul)
https://iebmas.lat › cedears                     ← URL (verde)
Abrí tu cuenta en minutos y empezá a invertir    ← description (gris)
en acciones del mundo. Sin costo de apertura.

Para esta página: {{ej: landing de CEDEARs de IEB+}}.
Generá la metadata SEO en español:
- title: 50–60 caracteres, palabra clave "{{palabra clave: ej. invertir en CEDEARs}}" adelante, marca al final.
- description: 120–155 caracteres, con una promesa clara y un mini llamado a la acción.
Dame 3 variantes de cada uno y marcá tu recomendada. Sin código todavía.

¿Viste cuando pegás un link en WhatsApp y aparece una tarjetita con imagen, título y bajada? Eso es Open Graph (las etiquetas og:). Define cómo se ve tu link cuando alguien lo comparte. Un buen preview puede duplicar los clics; uno roto (link pelado, sin imagen) parece spam.

Tocá los campos y mirá cómo cambia el preview en vivo:

<meta property="og:title"       content="IEB+ | Invertí en CEDEARs" />
<meta property="og:description" content="Abrí tu cuenta en minutos…" />
<meta property="og:image"       content="https://iebmas.lat/og-cedears.png" />
<meta property="og:url"         content="https://iebmas.lat/cedears" />
<meta name="twitter:card"       content="summary_large_image" />

Agregá Open Graph y Twitter Card a la página {{ruta: ej. /cedears}}.
- og:title y og:description coherentes con la metadata SEO.
- og:image apuntando a una imagen 1200×630 (dejame un placeholder y decime dónde subir la real).
- twitter:card = summary_large_image.
Estoy en Next.js: usá la API de metadata del App Router (objeto metadata / openGraph), no etiquetas <meta> sueltas.
Después decime cómo testear el preview antes de publicar.

Google mide tres cosas de la experiencia real de tus visitantes —las Core Web Vitals— y las usa para rankear. Suenan técnicas; en criollo son de sentido común:

El más fácil de arruinar es el CLS. Pasa cuando un banner o una imagen aparece tarde y empuja todo. Tocá “Cargar” con el switch en cada posición y mirá la diferencia:

Las imágenes son el peso #1 de casi toda web. Una foto sin optimizar de 4 MB puede tardar segundos en cargar en el celu de alguien con 4G flojo — y ahí se va tu LCP (y tu visitante). Tres reglas:

1. Formato moderno: usá webp o avif en vez de JPG/PNG. Pesan hasta 70% menos con la misma calidad.
2. Tamaño justo: no subas una foto de 4000 px para mostrarla en 400. Que la imagen sea del tamaño en que se ve.
3. Carga inteligente: lo que está fuera de pantalla carga después (lazy loading), y siempre se reserva su espacio (adiós CLS).

import Image from "next/image";

<Image
  src="/hero-cedears.jpg"
  alt="Persona invirtiendo desde el celular"  // ← describí la imagen
  width={1200}
  height={630}        // width + height = espacio reservado, sin saltos
  priority            // sólo en la imagen principal del hero
/>

Revisá las imágenes de mi web (Next.js) y optimizalas:
- Reemplazá todos los <img> por el componente next/image.
- Asegurate de que cada imagen tenga width y height (para evitar saltos / CLS).
- Marcá con "priority" sólo la imagen principal del hero; el resto, lazy.
- Agregá un alt descriptivo a cada una (en español).
Después decime qué imágenes pesan demasiado y debería volver a exportar más livianas.

Accesibilidad (a11y)es que tu web la pueda usar todo el mundo: alguien con baja visión, alguien que navega con el teclado, alguien que usa lector de pantalla. No es “extra”: en Argentina es público real, mejora el SEO (Google premia lo accesible) y muchas veces es obligatorio para marcas grandes. Cuatro pilares:

Contraste: texto que se lea sobre su fondo. Gris clarito sobre blanco no va.
Texto alternativo (alt): cada imagen describe qué muestra, para quien no la puede ver.
Foco visible: que se vea dónde estás al navegar con Tab (ese recuadro al rededor de botones y links).
Semántica: usar las etiquetas correctas — un botón es un <button>, un título es un <h1>. No todo es un “div”.

Hacé accesible esta web (WCAG AA), explicándome cada cambio en criollo:
- Contraste de texto suficiente sobre cada fondo (mínimo AA).
- alt descriptivo en todas las imágenes; alt vacío en las decorativas.
- Foco visible (focus ring) en todos los links y botones.
- HTML semántico: un solo <h1> por página, jerarquía de títulos ordenada, <button> para acciones y <a> para navegar, labels asociados a cada input del formulario.
No cambies el diseño visual, sólo lo necesario para accesibilidad.

No tenés que adivinar si tu web está bien: medís, le pasás el resultado a la IA y le pedís el plan de arreglo. Este es el ciclo que vas a repetir antes de cada publicación importante:

1. Medir   → PageSpeed Insights / Lighthouse (Chrome)
   ↓
2. Copiar  → el reporte (puntajes + recomendaciones)
   ↓
3. Pedir   → "arreglá esto, priorizando lo de mayor impacto"
   ↓
4. Verificar → volver a medir. ¿Subió el puntaje?

Pegá acá el reporte de Lighthouse / PageSpeed de la URL {{tu URL}}:
{{pegar puntajes y recomendaciones}}

Analizalo y dame un plan de acción ordenado por IMPACTO (primero lo que más mueve la aguja):
1. Performance (LCP / CLS / INP): qué cambiar y por qué.
2. SEO: metadata, headings, links.
3. Accesibilidad: contraste, alt, foco, semántica.
Por cada punto: explicámelo en criollo y dame el cambio listo para aplicar.

Tu lista de control para SEO, performance y accesibilidad. Marcala antes de mandar cualquier web a producción: