Cómo migrar un sitio de WordPress a Gatsby sin perder calidad SEO

Migrar un sitio de WordPress a un proveedor diferente puede parecer difícil, pero cada vez más blogs se están desviando de lo que solía ser el sistema de administración de contenido en línea más popular. A medida que la nueva tecnología comienza a crecer, también lo hacen las opciones y, en los últimos años, WordPress se ha enfrentado a una buena cantidad de competidores, el más prometedor de los cuales es Gatsby.

Si bien funciona de manera relativamente similar, hay varias razones por las que muchos propietarios de sitios prefieren Gatsby a WordPress.

Desde la funcionalidad y el servicio hasta la calidad del rendimiento y las ventajas disponibles, aquí hay una mirada más cercana a WordPress y Gatsby, seguida de una guía detallada sobre cómo migrar de forma segura un sitio basado en WordPress al marco de Gatsby sin perder la calidad de SEO en el proceso. .

Definición de WordPress

Durante décadas, WordPress ha representado el sistema de gestión de contenido número uno. Como modelo de código abierto, WordPress continuó brindando un servicio de calidad para miles de blogs y sitios web a lo largo de los años, al tiempo que ofrecía una gran cantidad de herramientas gratuitas de administración de contenido y SEO, como complementos y extensiones.

Las estadísticas señalan que alrededor del 29% de los propietarios de sitios todavía usan WordPress, lo que hace que la plataforma sea una primera opción obvia. Las razones por las que muchos usuarios prefieren WordPress se deben a su carga de contenido simplificada y la precisión en la modificación de todos los aspectos del contenido y su SEO. WordPress cuenta con una generosa galería de complementos, tanto gratuitos como de pago, sin embargo, la mayoría de los usuarios consideran que esta última es una opción mucho más funcional.

Dicho esto, las desventajas de usar WordPress también son obvias. Por un lado, el sistema está basado en PHP y viene con un extenso código heredado, lo que complica el proceso de optimización. Debido a sus diversos casos de uso, WordPress crea un sitio fácil de configurar pero no rápido y, como sabe, cuanto más lento es un sitio, menos tráfico genera. No solo eso, sino que el principal criterio de clasificación de Google, además del contenido de calidad, es la velocidad de carga de un sitio web.

Algunas de las otras razones por las que los usuarios evitaron usar WordPress incluyen:

Administrador de contenido problemático

WordPress se tomó un tiempo para renovar su editor de contenido y, aun así, no logró sobresalir. El nuevo administrador de contenido (Gutenberg) separa el contenido por bloques, lo que a muchos usuarios les resultó difícil, ya que la experiencia del usuario no es la ideal. Bueno, no sé, me parece muy bueno, cuando te acostumbras.

La mayoría de los usuarios están instalando el complemento del editor clásico para quedarse con lo que saben.

Escribiendo PHP

Para modificar un sitio de WordPress, las modificaciones deben estar escritas en PHP. Si bien existen modificaciones personalizadas en WordPress, muchos usuarios consideran que son demasiado exigentes y requieren mucho tiempo. Y como PHP no es el lenguaje más popular, a excepción de los sitios de WordPress, tratar con él parece redundante.

Algunos usuarios prefieren usar creadores de páginas que ayuden fácilmente a personalizar y modificar el diseño de un sitio sin usar código. Pero aún así, con WordPress, realmente no puedes tener TODAS las funciones del mundo o construir un sitio de ensueño con tantas funciones como quieras. Un sitio más complejo probablemente encontrará difícil usar WordPress como front-end.

Definición de GatsbyJS

Muchos consideran que WordPress es una tecnología obsoleta, pero a medida que aumentaron los competidores, GatsbyJS se convirtió en una de las alternativas más adecuadas. La mayoría de los creadores de sitios y usuarios recurren a sitios que usan lenguajes como JavaScript y React.js, que es exactamente lo que Gatsby trae a la mesa. A diferencia de la naturaleza de código abierto de WordPress, GatsbyJS es un generador de sitios estáticos, construido principalmente en React.

Cuando los usuarios visitan un sitio basado en Gatsby, la plataforma no muestra las páginas. En cambio, GatsbyJS genera páginas en la compilación y luego las mueve todas en línea. El sistema no requiere servidores ni mantenimiento de los mismos y es compatible con archivos estáticos como JS, HTML y CSS. Finalmente, Gatsby no usa PHP en absoluto, lo que es un gran alivio para los antiguos usuarios de WordPress.

La plataforma tiene sus inconvenientes, uno de los cuales es la incapacidad de ver directamente el resultado de cualquier cambio que realice en el sitio, como con Gatsby, todo debe compilarse primero. Sin embargo, para ayudar con el problema, muchos confían en las canalizaciones de CI/CD de Gitlab para compilar un sitio web primero y ponerlo en línea a continuación. Gatsby permite a los usuarios crear plantillas de publicaciones de blog y escribir todo el contenido en Markdown.

Aquí hay más beneficios clave de usar Gatsby:

• Cero recargas

Como aplicación o SPA de una sola página, Gatsby no requiere que se haga clic en una página del sitio para cargar un recurso nuevo.

• Refinamiento de imagen

Todas las imágenes utilizadas en la plataforma se filtran automáticamente de rastros externos, como los metadatos, y se redimensionan, comprimen, optimizan y cargan de forma inmediata de inmediato.

• Recursos de búsqueda previa

Gatsby tiene la capacidad de detectar todos los enlaces disponibles en una página determinada y cargar los datos en el caché del sitio.

• Alternancias de código

Con Gatsby, el código utilizado se simplifica, empaqueta, minimiza y, por desgracia, se sirve.

Migración de datos de WordPress a Gatsby Framework

Cuando esté considerando mover todo su contenido de WordPress a Gatsby, el aspecto más importante a considerar es no perder su valor de SEO existente.

Afortunadamente, Gatsby facilita bastante la recepción del contenido de otras plataformas.

Lo primero que necesitará para transferir su contenido es un complemento de fuente. Un complemento de fuente ayudará a Gatsby a completar automáticamente y sin problemas su tienda Graphql, mientras le otorga acceso a toda la información de entrada. El complemento de origen se puede modificar para satisfacer sus necesidades e incluso hacer que su plataforma sea de código abierto en lugar de estática.

Graphql plantea una solución refinada en la adquisición de datos API y difiere significativamente de su predecesor, REST API. Graphql es un activo complementario de la plataforma Gatsby, destinado a ser utilizado como parte del propio sistema. Omitir Graphql por completo es posible, pero se descarta como una opción, ya que no le otorgará acceso a varias funciones importantes.

El siguiente paso a dar es facilitar el proceso de escritura y mover todo a Markdown. Markdown, o archivos .md, permiten a los usuarios escribir texto simple y sin formato que luego se puede convertir a HTML más fácilmente. Aún más, Markdown entregará todos los archivos .md junto con el código Github del sitio y controlará la versión del proceso. Algunos usuarios también pueden encontrar útil Gatsby Advanced Started (GAS), ya que este proyecto permite la creación de sitios de Gatsby orientados a SEO.

Cómo transferir publicaciones de WordPress a Markdown

Antes que nada, deberá exportar todos los artículos de WordPress viables. Una vez hecho esto, deberá convertirlos en texto sin formato o Markdown. Hay una herramienta que hace eso, y se llama WordPress Export to Markdown. Con esta herramienta, puede extraer todo el contenido de WordPress, sus etiquetas, categorías y aspectos esenciales de SEO. La herramienta da un paso adicional para convertir no solo el contenido del artículo, sino también las imágenes de las publicaciones.

Una vez obtenidos, los archivos están listos para aterrizar en la carpeta de contenido del proyecto. La próxima vez que ejecute Gatsby, notará solo un atisbo de artículos, pero una vez que construya el sitio, todo el contenido se representará como adquirido.

Cómo originar publicaciones y páginas con Gatsby

El rendimiento de Gatsby es similar al PHP utilizado en WordPress. Sin embargo, como Gatsby usa React en su totalidad, coloca los compuestos de lenguaje debajo de las carpetas de las páginas, convirtiéndolas automáticamente en páginas del sitio. Esta característica es ideal para contenido de página unidimensional, como 'Índice' y 'Acerca de mí'.

En términos de contenido dinámico, como categorías o publicaciones de blog, los usuarios pueden confiar en las plantillas listas para usar de Gatsby para crear páginas específicas. Aquellos que usen GAS ya tendrán a mano las plantillas de publicación, junto con sus etiquetas y categorías. Siéntase libre de estimar su contenido una vez más y hacerlo más dinámico y, por lo tanto, más compatible con Gatsby. Todos los cambios que haga se mostrarán en su navegador a la vez, lo que hace que Gatsby sea bastante amigable para una rápida iteración.

Recuerda, la esencia de Gatsby radica en su archivo gatsby-node.js. Aquí, puede estimar los comportamientos de la plantilla y la página, así como el slug y los elementos y datos adicionales para usar. También es perjudicial considerar el archivo, ya que lo ayuda a completar los nodos o, en otras palabras, los datos se almacenan en su GraphQL.

Cómo diseñar un sitio de Gatsby

En términos de estilos de sitios de escritura, Gatsby ofrece muchas opciones viables, como archivos .css, Sass, CSS-in-JS y más. Aquí hay algunos consejos sobre cómo diseñar su sitio Gatsby:

• Explore los recursos de diseño disponibles, como Ant, MaterialUI y Materialise.
• ¡Prepárese para la implementación! Los sitios estáticos como Gatsby hacen que la implementación del sitio sea súper fácil y asequible. Le invitamos a utilizar una serie de herramientas gratuitas y rápidas para hacerlo, como Netlify, AWS Amplify, Now y Surge.
• ¡Optimizar, optimizar, optimizar! Usar Gatsby significa tener un sitio más rápido, y siempre puedes usar la plataforma para hacerlo aún más rápido, optimizado para SEO y accesible. Una de las mejores herramientas de optimización es Lighthouse, ya que hace todo automáticamente: auditoría, métricas, prácticas web, datos detallados e incluso enlaces útiles. Puede ejecutar su auditoría de Lighthouse a través de Google, Firefox o usar la opción Lighthouse CLI.

Cómo hacer que tu sitio web de Gatsby funcione rápido

Una vez que se haya migrado todo el contenido, puede hacer que su sitio de Gatsby sea más rápido:

• Procesando todos los datos de Gatsby a través de GraphQL.
• Evite el uso de bibliotecas pesadas, como moment.js, ya que pueden hacer que el sitio sea más lento.
• Confíe en su servidor para modificar fechas, enviar esos datos a sus páginas y realizar otras tareas pesadas.
• Administre menos datos usando GraphQL. De esta manera, solo accederá a los datos que necesita y evitará acumular cantidades excesivas de datos por error.
• Hazlo accesible. Sus usuarios no interactuarán con su sitio como lo hace usted, así que asegúrese de que el sitio abarque todas las categorías de usuarios incorporando un a11y de calidad, que también puede resultar en un HTML mejorado y puntajes de SEO optimizados. Para solucionar todos los problemas, puede usar herramientas relevantes, como Axe.

Cómo mantener un SEO de alta calidad

Al comprender los conceptos básicos de cómo Google clasifica los sitios, podrá poner en marcha su sitio de Gatsby. Para ello, presta atención a los siguientes aspectos:

• Contenido estelar y relevante
• Mayor accesibilidad a los usuarios
• Un sitio que se ejecuta más rápido
• Crear enlaces o mostrar su sitio en otros dominios

Una guía simplificada sobre la migración de WordPress a Gatsby

Para resumir y facilitar el proceso, aquí hay una guía paso a paso para migrar completamente su sitio de WordPress a GatsbyJS.

• Descargue el XML de WordPress, que se encuentra en Herramientas > Exportar.
• Use una herramienta para convertir XML a Markdown o texto sin formato, que a veces hará más de la mitad del trabajo de convertir publicaciones de blog.
• Descarga todas las imágenes y el contenido del servidor. Tire de las imágenes de las cargas de WordPress a una carpeta de imágenes.
• Repare las listas rotas y los bloques de código de sangría para asimilarse al estilo Gatsby.
• Guarde miniaturas y muévalas a una carpeta respectiva para reutilizarlas.
• Conéctese a Netlify para configurar la implementación automática. Si está escrito en JavaScript, mígrelo a TypeScript para habilitarlo.
• Cambie las opciones de estilo para que puedan usar CSS-in-JS. Actualice el estilo y el diseño.
• Ejecute actualizaciones para que el contenido del blog caiga en la categoría '/blog/'.
• Utilice la redirección para todas las URL.
• Use la API React Context como contenedor para crear un modo nocturno.
• Migre los comentarios de WordPress a Gatsby usando un importador manual o automatizado.

Una vez que se cubren todos estos pasos, solo le queda crear las páginas, dominar GraphQL, realizar las consultas adecuadas y limpiar pequeños líos cuando sea necesario.

¿Cuánto tiempo llevará el proceso de migración?

Migrar todo el contenido de WordPress a Gatsby dependerá del volumen de contenido que tengas a tu disposición, así como de tu esfuerzo personal. Idealmente, debería poder transferir todo el contenido en no más de dos semanas. Sin embargo, tenga en cuenta que si es nuevo en React, necesitará tiempo para adaptarse.

Una vez que lo domine, disfrutará de las ventajas que vienen con Gatsby, como menos estragos de HTML dentro de su base de datos MySQL y archivos que son fáciles de acceder, administrar, editar, leer, respaldar y compartir con otros.

Una última cosa…

Si bien administrar Gatsby requiere un conjunto de habilidades y experiencia en CSS, HTML, JavaScript, Node.js, React, ES6 y GraphQL, por nombrar algunos, comience lentamente y aprenda cada tecnología a medida que se presenta.

Incluso si el proceso representa un desafío, en última instancia, puede seguir el tutorial de introducción de Gatsby para obtener una guía aún más detallada sobre el proceso de migración.

Vamos a codificar, ¿de acuerdo?