SEO de Next.js para producción: guía completa

Next.js proporciona API de renderizado y metadatos; no decide qué páginas merecen tráfico de búsqueda. Empieza por definir el lector, la consulta, la respuesta, la URL canónica y la siguiente acción de cada ruta pública. Esa decisión distingue una página útil de un duplicado técnicamente indexable.

Asigna una URL estable a cada intención distinta. Una presentación del producto, una guía de implementación, una página de precios y una referencia de API pueden hablar del mismo producto porque responden a necesidades diferentes. Dos páginas que repiten la misma respuesta con encabezados distintos ofrecen una opción menos útil a los lectores y añaden otra página que el equipo debe mantener.

Registra la decisión en un inventario de rutas antes de escribir los metadatos. Incluye el patrón de ruta, la fuente de datos, el modo de renderizado, la regla canónica, la indexabilidad y el evento que activa la actualización. El inventario se convierte en el contrato compartido para el contenido, la ingeniería y las comprobaciones de las versiones.

Las páginas y los layouts de App Router son Server Components por defecto. Usa ese comportamiento para el título, la introducción, el cuerpo del texto, los datos del producto, las rutas de navegación y los enlaces contextuales. Así, la respuesta inicial contiene la información principal de la página sin esperar a una solicitud desde el navegador.

Un Client Component es adecuado cuando la función necesita estado, un manejador de eventos, un hook del ciclo de vida o una API del navegador. Mantén ese límite cerca de la interacción. Una calculadora de precios puede ser interactiva sin convertir toda la página de producto que la rodea en una estructura renderizada en el cliente.

El renderizado también implica decidir cómo mantener actualizado el contenido. La generación estática encaja con el contenido que cambia con una versión. El renderizado en el servidor encaja con los datos públicos específicos de cada solicitud. El renderizado con caché encaja con los datos compartidos que tienen un evento de invalidación definido. Elige el modelo más limitado que mantenga correcta la información visible; no conviertas toda una ruta en dinámica para admitir un pequeño control.

Configura metadataBase, una plantilla de título, la descripción predeterminada y los campos compartidos para redes sociales en el layout raíz. Sustituye los valores en el layout o la página de ámbito más específico al que pertenezcan. Las rutas estáticas pueden exportar metadata; las rutas basadas en datos pueden usar generateMetadata. Ambas API son exclusivas del servidor.

Trata los metadatos anidados como objetos completos en la ruta que los sustituya. Next.js combina los metadatos desde la raíz hacia la página, pero reemplaza los campos anidados en lugar de combinarlos en profundidad. Un objeto openGraph de una página puede descartar accidentalmente una imagen heredada si solo aporta un título nuevo.

Las versiones actuales de Next.js pueden transmitir metadatos mediante streaming para los bots que ejecutan JavaScript, mientras mantienen una respuesta bloqueante de metadatos para los bots limitados a HTML. Ese comportamiento mejora los tiempos de respuesta, pero no elimina las consecuencias de las consultas de metadatos lentas o poco fiables. Reutiliza los datos resueltos de la página, gestiona explícitamente las entidades inexistentes y prueba tanto las rutas correctas como las inexistentes.

Una URL canónica identifica la versión preferida de un contenido duplicado o sustancialmente similar. Mantén esa preferencia coherente entre las redirecciones, las anotaciones canónicas, los enlaces internos y las entradas del sitemap. Google describe las redirecciones y las anotaciones rel=canonical como señales fuertes, y la inclusión en el sitemap como una señal más débil. Las señales alineadas son más fáciles de interpretar que una etiqueta correctiva rodeada de contradicciones.

Define una sola vez el protocolo aprobado, el nombre de host, la regla de barras finales, la política de mayúsculas y minúsculas y el comportamiento de los parámetros. Redirige las variantes de host y ruta que no deberían seguir siendo accesibles. Usa una URL canónica que apunte a la propia página preferida cuando ayude a mantener coherentes las URL generadas.

Usa los metadatos robots para controlar si una página accesible puede indexarse y robots.txt para orientar el rastreo. Ninguno protege el contenido privado. La autorización debe rechazar una solicitud no autenticada, independientemente de las cabeceras de rastreador que envíe. No incluyas noindex en la primera respuesta para intentar retirarlo después en el navegador: Google puede detenerse antes de renderizar el cambio de JavaScript.

Genera sitemap.ts y robots.ts a partir de la misma fuente que define el contenido público. Un sitemap debe contener las URL absolutas y canónicas que quieres que descubran los buscadores. Excluye las rutas de cuentas, las vistas previas, los resultados de búsqueda interna, las rutas redirigidas y las combinaciones de parámetros que no aporten valor por sí solas.

Usa lastModified solo cuando represente una actualización significativa del contenido principal de la página, sus datos estructurados o sus enlaces. Google ignora los valores priority y changefreq del sitemap, así que esos campos no corrigen una lista de URL desactualizada o con ruido. Para un catálogo grande, divide los sitemaps por familia de contenido cuando eso aclare la generación, la supervisión o la responsabilidad.

Trata robots.txt como una guía de rastreo, en lugar de un mecanismo para ocultar contenido. Una URL cuyo rastreo esté bloqueado puede seguir siendo conocida por enlaces externos, y bloquear una página puede impedir que un rastreador vea su regla noindex. Excluye las rutas sensibles del descubrimiento público y exige el control de acceso en el límite de la aplicación.

Los datos estructurados identifican las entidades que la página ya presenta. Elige el tipo según la finalidad real de la página: Article para una publicación editorial, Product para un artículo que se puede comprar, BreadcrumbList para la jerarquía o SoftwareApplication para un producto de software real. Añadir un tipo no cambia lo que es la página.

Incluye las propiedades que exige la función de búsqueda a la que te diriges y mantén los valores alineados con el contenido visible. No inventes reseñas, valoraciones, precios, disponibilidad, autores ni fechas de actualización. Un marcado completo y preciso es más útil que un objeto grande compuesto por campos que la página no puede respaldar.

Renderiza el JSON-LD en el servidor y sanea el valor serializado cuando contenga datos que no controles por completo. Valida la URL desplegada con una herramienta de datos estructurados y luego inspecciona tú mismo el script. Que el analizador lo acepte confirma la sintaxis, pero no demuestra que la entidad sea veraz, esté actualizada o cumpla los requisitos para un resultado enriquecido.

El trabajo de SEO falla cuando el resultado es técnicamente indexable pero resulta frustrante de usar. Mantén limitado el ámbito del cliente, reserva espacio para las imágenes, carga solo los archivos de fuentes que usa el diseño y muestra alternativas útiles mientras se cargan las secciones secundarias lentas. La primera pantalla debe contener la información principal, en lugar de una estructura vacía o un diseño que se desplaza al llegar los recursos.

Mide rutas representativas de producción, en lugar de una única página de inicio cuidadosamente optimizada. Largest Contentful Paint mide la carga; Interaction to Next Paint, la capacidad de respuesta; y Cumulative Layout Shift, la estabilidad visual. Evalúa el percentil 75 de las visitas reales cuando haya datos de campo y usa después pruebas de laboratorio para reproducir una regresión concreta.

Cuando una ruta se vuelva más lenta, inspecciona la causa antes de eliminar contenido útil. Las causas habituales incluyen ampliar el ámbito de un Client Component, una consulta de datos bloqueante, un script de terceros sin límites, una imagen principal demasiado grande o una configuración de fuentes que retrase el texto. La solución debe conservar la función de la página.

La configuración de SEO no termina cuando el código parece correcto. Compila la aplicación de producción, inicia el mismo entorno de ejecución que planeas desplegar y verifica la URL de la versión candidata antes de asignarle el dominio canónico. Una consulta de metadatos puede hacer fallar una compilación, una redirección puede eliminar una sección y una ruta puede devolver una página de contenido no encontrado con un diseño completo pero un estado incorrecto.

Prueba una página existente, una redirección, una página inexistente y una ruta dinámica representativa. Inspecciona la primera respuesta HTML para comprobar el título, la descripción, la URL canónica, la regla robots, el H1, la respuesta inicial, los datos estructurados y los enlaces contextuales. Obtén robots.txt y sitemap.xml por separado y compara sus URL con el inventario de rutas.

Registra las comprobaciones junto a la versión, en lugar de confiar en la memoria. Si falla una comprobación crítica para el SEO, mantén activa la versión actual que funciona correctamente, corrige la versión candidata y repite las mismas comprobaciones. El resultado útil es una ruta de producción cuya respuesta coincida con la política aprobada, más allá de tener un documento de verificación perfecto.