Por qué Next.js para SEO.
Next.js domina el SEO de aplicaciones React por una razón simple: el HTML llega al navegador (y a los crawlers de Google) ya renderizado en el servidor. Las aplicaciones React puras (SPA) muestran un HTML casi vacío hasta que JavaScript carga y ejecuta, lo que puede penalizar el crawling e indexación. Con Next.js y su App Router, el contenido está disponible desde el primer byte.
El App Router de Next.js 13+ introdujo un sistema de metadata declarativo que hace el manejo de títulos, descripciones, Open Graph y canonical URLs una API limpia en lugar del caos de tags manuales. Si venís de pages router o de otras soluciones, el cambio es enorme.
Metadata dinámica.
La forma más limpia de manejar metadata en App Router es con la función generateMetadata. Para páginas estáticas exportás un objeto metadata. Para páginas dinámicas (como artículos de blog o páginas de producto) usás async function generateMetadata({ params }) que recibe los parámetros de la ruta y devuelve el objeto de metadata.
El objeto metadata acepta title (string o template con template: '%s | Tu sitio'), description, openGraph, twitter, alternates.canonical, y robots. Next.js genera automáticamente los tags correctos: <title>, <meta name="description">, <meta property="og:*">. Sin instalar nada, sin configuración adicional.
Sitemap automático.
Crear un sitemap.xml en Next.js App Router es tan simple como crear un archivo app/sitemap.ts que exporte una función default retornando un array de objetos con url, lastModified, changeFrequency y priority. Next.js genera el XML automáticamente en /sitemap.xml. Para sites con miles de páginas, Next.js soporta sitemaps múltiples con generateSitemaps().
Open Graph Images.
Las imágenes Open Graph son las que aparecen cuando compartís un link en redes sociales o mensajería. Next.js App Router permite generarlas programáticamente con app/opengraph-image.tsx: un componente React que se renderiza a imagen PNG usando la API de Edge Runtime. Podés usar fuentes personalizadas, calcular texto dinámico, y cambiar el diseño según los params de la página.
Para artículos de blog o páginas de producto, una OG image dinámica que muestre el título, la categoría y tu branding aumenta significativamente el click-through rate en redes sociales. La diferencia entre un link con preview genérico y uno con imagen relevante puede ser del 40-60% en engagement.
JSON-LD Schema.
El structured data (JSON-LD) es la forma de decirle a Google de qué trata tu página en un lenguaje que entiende sin interpretar. Para artículos, el schema Article permite que Google muestre el autor, la fecha y la imagen en los resultados. Para herramientas, WebApplication. Para FAQs, FAQPage. Para negocios locales, LocalBusiness.
En Next.js lo implementás con un <script type="application/ld+json"> en el layout o page, usando dangerouslySetInnerHTML con el JSON serializado. Podés validar el schema con el Rich Results Test de Google para verificar que está correctamente implementado y si califica para rich results.
Performance = SEO.
Core Web Vitals son métricas de experiencia de usuario que Google usa como factor de ranking: LCP (Largest Contentful Paint), INP (Interaction to Next Paint) y CLS (Cumulative Layout Shift). Next.js ayuda con las tres: Image component optimiza imágenes automáticamente evitando CLS, el streaming mejora LCP, y la arquitectura RSC reduce el JavaScript que llega al cliente mejorando INP.
Verificar indexación.
Configurá Google Search Console desde el primer día: conectá tu dominio, envía el sitemap, y monitoreá el estado de indexación. El coverage report te muestra qué páginas fueron indexadas, cuáles tienen errores, y cuáles fueron excluidas. La herramienta de inspección de URL te permite ver exactamente cómo Google ve cada página tuya.