Resumen de 30 segundos:
- Cualquier persona que trabaje en SEO empresarial en 2020 habrá encontrado este escenario de arquitectura web con un cliente en algún momento. Los marcos como React, Vue y Angular hacen que el desarrollo web sea más sencillo.
- Hay toneladas de estudios de casos, pero un negocio que Croud encontró migró a un marco híbrido Shopify / JS con enlaces internos y contenido prestado a través de JS. Procedieron a perder tráfico por un valor estimado de $ 8,000 por día durante los próximos 6 meses … alrededor de $ 1.5 millones de dólares.
- Los lectores experimentados entre nosotros pronto comenzarán a tener la sensación de que se encuentran con un territorio familiar.
- El vicepresidente de asociaciones estratégicas de Croud, Anthony Lavall, analiza los marcos de JavaScript que se ocupan de los elementos de SEO más críticos.
Mientras dirigía el equipo de SEO en Croud en Nueva York durante los últimos tres años, el 60% de nuestros clientes han pasado por alguna forma de migración. Otro ~ 30% se ha trasladado desde o hacia un SPA (Aplicación de página única) a menudo utilizando un marco AJAX (Asynchronous Javascript and XML) en diversos grados.
Cualquier persona que trabaje en SEO empresarial en 2020 habrá encontrado este escenario de arquitectura web con un cliente en algún momento. Los marcos como React, Vue y Angular hacen que el desarrollo web sea más sencillo. Esto es especialmente cierto cuando se crean aplicaciones web dinámicas que ofrecen interactividad de solicitud relativamente rápida (una vez que las bibliotecas iniciales que las alimentan se han cargado, Gmail es un buen ejemplo) al utilizar el poder del navegador moderno para representar el código del lado del cliente (el JavaScript ) Luego, utilice los trabajadores web para ofrecer la funcionalidad de solicitud de red que no requiere una llamada URL tradicional basada en el servidor.
Con el aumento de la funcionalidad y las capacidades de implementación viene un costo: la cuestión del rendimiento de SEO. Dudo que cualquier lectura de SEO sea ajena a esa pregunta. Sin embargo, es posible que todavía esté en la oscuridad con respecto a una respuesta.
Por qué es un problema?
Ingresos, en forma de tráfico orgánico perdido a través de clasificaciones orgánicas perdidas. Es tan simple como esto. Los desarrolladores web que recomendaron marcos JavaScript (JS) no suelen ser directamente responsables del rendimiento comercial a largo plazo. Una de las principales razones por las que existen SEO en 2020 debería ser para mitigar los errores estratégicos que podrían surgir de esto. El tráfico orgánico a menudo se toma como algo dado y no se considera importante (o controlable), y aquí es donde tienen lugar problemas masivos. Hay toneladas de estudios de casos, pero un negocio que encontramos migró a un marco híbrido Shopify / JS con enlaces internos y contenido prestado a través de JS. Procedieron a perder tráfico por un valor estimado de $ 8,000 por día durante los próximos 6 meses … alrededor de $ 1.5 millones de dólares.
¿Cuál es el problema?
Hay muchos problemas. Los SEO ya están tratando de manejar una gran cantidad de señales del algoritmo comercial más fuertemente invertido jamás creado (Google … por si acaso). Alejarse de un sitio web tradicional prestado por un servidor (piense en Wikipedia) a un marco contemporáneo está potencialmente plagado de desafíos de SEO. Algunos de los cuales son:
-
Rastreo, representación e indexación de bots de motores de búsqueda: los rastreadores de motores de búsqueda como Googlebot han adaptado su proceso de rastreo para incluir la representación de JavaScript (a partir de 2010) para poder comprender completamente el código en las páginas web de AJAX. Sabemos que Google está mejorando en la comprensión de JavaScript complejo. Otros rastreadores de búsqueda podrían no serlo. Pero esto no es simplemente una cuestión de comprensión. Rastrear toda la web no es una tarea sencilla e incluso los recursos de Google son limitados. Tienen que decidir si vale la pena rastrear y representar un sitio en función de suposiciones que tienen lugar mucho antes de que JS pueda haberse encontrado y presentado (métricas como un número estimado de páginas totales, historial de dominio, datos WhoIs, autoridad de dominio, etc.) .
Proceso de rastreo y renderizado de Google: segunda fase de procesamiento / indexación (anunciado en Google I / O 2018)
-
Velocidad: uno de los mayores obstáculos para las aplicaciones AJAX. Google rastrea las páginas web sin almacenar en caché, por lo que esas engorrosas primeras cargas de aplicaciones de una sola página pueden ser problemáticas. La velocidad se puede definir de varias maneras, pero en este caso, estamos hablando del tiempo que se tarda en ejecutar y procesar críticamente todos los recursos en una página con mucho JavaScript en comparación con una página HTML con menos recursos.
-
Recursos y renderizado: con el código tradicional del lado del servidor, el DOM (Modelo de Objeto de Documento) se representa esencialmente una vez que se forma el CSSOM (Modelo de Objeto de CSS) o, para decirlo de manera más simple, el DOM no requiere mucha más manipulación después del buscar el código fuente. Hay advertencias sobre esto, pero es seguro decir que el código del lado del cliente (y las múltiples bibliotecas / recursos de los que podría derivarse el código) agrega una mayor complejidad al DOM finalizado, lo que significa más recursos de CPU requeridos tanto por los rastreadores de búsqueda como por los dispositivos del cliente. . Esta es una de las razones más importantes por las que no se preferiría un marco JS complejo. Sin embargo, con frecuencia se pasa por alto.
Ahora, todo lo anterior a esta oración ha asumido que estas páginas AJAX se han creado sin tener en cuenta el SEO. Esto es un poco injusto para la agencia de diseño web moderna o el desarrollador interno. Por lo general, hay algún tipo de consideración para mitigar el impacto negativo en el SEO (lo veremos con más detalle). Los lectores experimentados entre nosotros ahora comenzarán a tener la sensación de que están encontrando un territorio familiar. Un territorio que ha dado lugar a muchas discusiones por correo electrónico entre el cliente, el desarrollo, el diseño y los equipos de SEO relacionados con si dicha migración va a las clasificaciones orgánicas del tanque (lamentablemente, a menudo lo hace)
El problema es que las soluciones para crear aplicaciones AJAX que funcionan más como HTML basado en servidor para fines de SEO están enredadas en disputas; relacionado principalmente con su eficacia. ¿Cómo probamos la eficacia de algo para SEO? Tenemos que implementar y analizar los cambios de SERP. Y los resultados de las migraciones a los marcos de JavaScript se asocian repetidamente con caídas en el tráfico. Eche un vistazo a las historias semanales que llegan a los “sitios de JS en el grupo de trabajo de búsqueda” alojado por John Mueller si desea alguna prueba.
Echemos un vistazo a algunas de las tácticas de mitigación más comunes para SEO en relación con AJAX.
Las diferentes soluciones para la mitigación SEO de AJAX
1. Universal / Isomorphic JS
Isomorphic JavaScript, AKA Universal JavaScript, describe aplicaciones JS que se ejecutan tanto en el cliente como en el servidor, ya que el cliente o servidor puede ejecutar el
