Migrar tu sitio web es como mudarte de casa; tienes que trasladar todas tus pertenencias a una nueva ubicación. Quien haya vivido una mudanza sabe que es complicado, pero tiene sentido hacerlo, ya que has encontrado un lugar mejor en el que vivir. En este caso, migrar desde WordPress al Next.js + Payload CMS ofrece beneficios significativos en términos de rendimiento, flexibilidad y escalabilidad.

En este artículo explicaremos cómo hacemos la migración con nuestros clientes, siguiendo un procedimiento eficiente basado en buenas prácticas que garantiza que no se pierdan datos se afecte el SEO del sitio web.

Paso 1: Auditoría del sitio web

Es esencial tener una referencia del punto de partida. Un análisis detallado del estado actual del sitio web es fundamental para identificar áreas de mejora.

La auditoría del sitio web debe incluir los siguientes puntos:

• Identificar el contenido del sitio web, enumerando las páginas, entradas del blog, categorías y cualquier contenido a migrar.

• Análisis del rendimiento del sitio web con herramientas como Google PageSpeed Insights o Lighthouse, que proporcionan métricas relevantes como velocidad de carga, estabilidad visual e interactividad.

• Crear un mapa del sitio web que liste las URLs publicadas para mantener esa estructura durante la migración. Esto se logra combinando el sitemap del sitio, la base de datos del contenido y los datos de URLs indexadas de Google Search Console.

• Catálogo de plugins y funcionalidades. Esto ayudará a decidir qué funcionalidad recrear en la nueva implementación.

Es fundamental guardar una copia de seguridad completa del sitio WordPress, incluyendo archivos y base de datos, antes de comenzar la migración. Esto permite tener todos los datos necesarios y restaurar el sitio a su estado original si es necesario.

Paso 2: Definir la estructura de la información

Ya tenemos un mapa claro del contenido y funcionalidades a conservar. Ahora nos centramos en migrar datos desde la base de datos de WordPress a la nueva de Payload CMS. Hay entidades que siempre se necesitan migrar: archivos multimedia (imágenes, videos, audio), páginas, artículos de blog y categorías. También puedes tener otras entidades como formularios, productos, listas de usuarios o contenido personalizado de tu negocio. Para transferir información efectivamente, aplicamos una estrategia para identificar patrones comunes en el contenido y crear bloques estructurales reutilizables y procesables. Este es el proceso que seguimos:

2.1. Identificar bloques reutilizables

Empezamos analizando la estructura del contenido de cada entidad para identificar bloques repetidos. Esta tarea es más sencilla de lo que parece, ya que el tema de WordPress ya viene segmentado en estos bloques. Sin embargo, es interesante hacer un análisis externo para optimizar esta estructuración.

Es común que un blog tenga una sección de artículos recomendados, y que una landing page de un producto tenga un bloque con artículos relacionados. Así, hemos identificado un bloque para usar en una página y en un blog.

2.2. Diseñar la estructura de los bloques en Payload CMS

Una vez que se identifican los bloques necesarios, el siguiente paso es definir cómo estructurar la información de cada uno en Payload CMS. Esto es importante porque define cómo guardaremos la información y qué información podrá controlarse desde el CMS.

Para un bloque hero, podríamos definir que tendrá una imagen, un texto y un botón para la llamada a la acción. Estos elementos son fundamentales para un hero. También podríamos definir en la estructura de este bloque la orientación de la imagen; si queremos que esté a la izquierda o a la derecha. O quizás que se pueda definir el color del botón o el color del fondo. Dedicarle suficiente tiempo a este ejercicio es muy interesante porque reduce la dependencia del contenido al código programado. Además, permite que cualquier persona con acceso al CMS pueda hacer modificaciones en la página web sin ayuda del equipo de IT.

2.3. Catalogar y limpiar la información a transferir

Una ventaja de la migración es que veremos toda la información guardada desde el inicio de la página web. Siguiendo la analogía de la mudanza, vamos a entrar en el trastero y ver todos los objetos guardados. Muchos (la mayoría) los guardaremos, pero es una oportunidad para deshacernos de lo que no necesitamos.

En el caso de los archivos multimedia, los listamos y comprobamos su uso en el sitio web. Luego, subimos los usados al nuevo CMS y descartamos los demás para ahorrar recursos.

En cuanto a las redirecciones, revisamos todas las URLs de la auditoría inicial y nos aseguramos de que no haya redirecciones a URLs inexistentes o enlazadas; es decir, una URL que redirige a otra que también redirige a otro sitio. Este es uno de los pasos más importantes, ya que los fallos en este punto penalizan el SEO del sitio web. Tenerlo controlado depende de una auditoría de calidad en el paso anterior.

2.4. Automatizar la extracción y transformación de datos

Migrar el contenido de WordPress a Payload CMS requiere extraer la información de la base de datos de WordPress, transformarla al formato definido y subirla a la nueva base de datos de Payload CMS. Aunque este proceso puede hacerse a mano, lo común es automatizarlo.

WordPress expone una API REST para acceder a su base de datos y Payload CMS tiene herramientas para hacer migraciones (programáticamente) o una API, REST o GraphQL, para consumir o cargar información. El proceso consiste en:

1. Descargar información de la base de datos de WordPress.
2. Buscar referencias a contenido multimedia u otras entidades necesarias.
3. Transformar la información a la nueva estructura.
4. Cargar los datos en Payload CMS.

Finalmente, una vez que se cargan los datos en Payload CMS, se valida que la migración y las relaciones entre diferentes entidades son correctas.

Paso 3: Implementar el tema del sitio

El siguiente objetivo es replicar la estructura visual del sitio web (el “tema” en WordPress) y la funcionalidad. Esto se hará integrando los datos migrados a Payload CMS con la implementación en Next.js.

Para implementar el tema, creamos un sistema de diseño con componentes reutilizables. Luego, para la funcionalidad, usamos plugins existentes, como para una pasarela de pago, la recolección de formularios o la gestión del SEO, o podemos crearla nosotros mismos.

Es interesante que podamos personalizar cada detalle del nuevo sitio web, tanto gráficamente como en la experiencia del usuario. Por ejemplo, podemos personalizar el contenido según la ubicación geográfica del usuario o la campaña de captación, personalizar mensajes según el comportamiento del usuario o hacer que aparezca un chatbot después de una acción determinada.

Este paso es crucial porque marca la diferencia con un sitio web en WordPress. Durante la implementación en Next.js aprovecharemos sus fortalezas, generando un sitio que se carga mucho más rápido que en WordPress, navega más fluidamente y necesita menos recursos.

Paso 4: Prueba y despliegue a producción

El sitio web está listo y funcionando localmente. El siguiente paso es publicarlo en internet. Debemos garantizar que el sitio es accesible, seguro y funcional antes de reemplazar la versión antigua. Siguiendo buenas prácticas, realizaremos pruebas y desplegaremos el sitio web de manera segura y controlada.

Es crucial proteger el nuevo sitio contra la indexación en Google durante las pruebas, ya que el sitio antiguo sigue siendo público y no queremos que Google detecte páginas duplicadas. Usamos la configuración de Next.js y configuramos el archivo robots.txt para evitar que los motores de búsqueda indexen contenido.

Estamos utilizando Digital Ocean para desplegar el proyecto utilizando el producto “App Platform”, que simplifica el despliegue, expone el proyecto a la red, y permite conectar un repositorio de GitHub para despliegues automáticos. Una vez configurado y desplegado el proyecto, tendremos una URL para acceder al nuevo sitio. Con el sitio accesible desde internet, ya podemos realizar las verificaciones necesarias para garantizar que todo funcione correctamente:

Pruebas funcionales:

Navegamos todas las páginas y verificamos que el contenido se carga correctamente. Probamos formularios, botones y cualquier funcionalidad interactiva, y revisamos que las integraciones de plugins (chatbots, pasarelas de pago, etc.) funcionen como se espera.

También hacemos pruebas para asegurar que el sitio se vea y funcione bien en diferentes dispositivos (ordenadores, móviles y tablets) y navegadores (Chrome, Safari, Firefox, etc.).

Pruebas de rendimiento:

Medimos el rendimiento del sitio con la misma herramienta que usamos anteriormente para verificar que aspectos como la velocidad de carga, optimización de imágenes y experiencia móvil tienen un rendimiento óptimo, como es de esperar gracias las ventajas de Next.js están optimizando correctamente la experiencia.

Pruebas de configuración:

Revisamos que el CMS está correctamente configurado, que el contenido se propaga a internet tanto al generarlo como eliminarlo, y que toda la configuración del sitemap, robots.txt y los metadatos de todas las páginas y artículos del blog, tan importante para el SEO, está configurada adecuadamente.

Validación con el cliente:

Comparte la URL de pruebas con tu cliente para que navegue por el sitio y proporcione feedback. Este es el momento de realizar ajustes finales antes del lanzamiento oficial.

Paso 5: Lanzamiento del nuevo sitio

Cuando todas las pruebas anteriores son satisfactorias y el cliente nos aprueba, iniciamos el proceso de lanzamiento, que consiste en reemplazar el antiguo sitio por el nuevo.

El primer paso del lanzamiento es reemplazar los registros DNS del dominio del sitio web para que apunte al nuevo servidor. Este proceso puede tardar hasta 24 horas, aunque generalmente no más de unos minutos.

Una vez que el DNS apunta al nuevo servidor, desactivamos el sitio antiguo y habilitamos el nuevo para permitir la indexación en motores de búsqueda a través del robots.txt y la configuración de Next.js. A partir de este momento, el sitio web está completamente migrado.

La migración de WordPress a Next.js + Payload CMS no solo transforma tu sitio técnicamente, sino que mejora significativamente la experiencia del usuario. Nuestros clientes suelen destacar la velocidad de carga y la fluidez en la navegación, lo que impacta positivamente en las conversiones.

¿Buscas una alternativa a WordPress?

En Kresco, estamos comprometidos con ayudar a los negocios digitales a crecer y alcanzar su máximo potencial. La migración desde WordPress a Next.js + Payload es uno de los servicios que ofrecemos para impulsar sitios modernos, rápidos y altamente escalables.

Si estás listo para llevar tu sitio web al siguiente nivel, contáctanos hoy mismo y hablemos sobre cómo podemos ayudarte a migrar tu sitio web a Next.js y Payload CMS para llevar tu negocio al siguiente nivel.