Representación de JavaScript y los problemas para SEO en 2020

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

Habilite JavaScript en su navegador para disfrutar de nuestro excelente contenido.