Googlebot de hoja perenne con motor de renderizado de Chromium: lo que los técnicos de SEO deben saber
Ha sido una semana emocionante con importantes anuncios desde el escenario en el evento Google I/O 2019 . Probablemente el anuncio más impactante es que Google ahora se ha comprometido a actualizar periódicamente su servicio de rastreo de Googlebot para comenzar a usar la versión estable más reciente de su motor de renderizado Chromium. Este es un salto significativo hacia adelante con más de 1,000 características ahora compatibles con la versión anterior.Casi todas las funciones nuevas compatibles con la sintaxis moderna de JavaScript se llaman oficialmente ECMAScript (ES6). Si usted es un desarrollador de JavaScript, realmente desea utilizar la última versión del idioma para acceder al azúcar sintáctico que aparece continuamente a medida que el idioma madura. Es cierto que si eres un usuario de JavaScript de vainilla, o si prefieres uno de los marcos reactivos modernos, muchas de las características nuevas e interesantes provienen de desarrolladores que recomiendan mejores patrones para bloques de código comúnmente escrito.
Un ejemplo básico es agregar un valor a una matriz, algo muy común que se hace usando push():
<script>
names = [
'Amy',
'Bruce',
'Chris'
];
names.push('David');
</script>
Reactividad en pocas palabras
En el ejemplo anterior, se define una matriz de nombres y se asignan 3 valores: Amy, Bruce y Chris. Luego David se agrega a la lista usando el push()método. Con los marcos reactivos modernos, la mutación de valores puede desencadenar evaluaciones "dif" de un DOM de página contra un "DOM virtual" más nuevo por el marco, y como los valores de la matriz son diferentes, los valores de la página se pueden actualizar mediante JavaScript sin volver a cargar la ventana del navegador.La reactividad en las aplicaciones web es donde JavaScript se ha agregado realmente a nuestras capacidades y donde nuestras capacidades continúan avanzando a medida que el JavaScript moderno evoluciona en el servidor y en el navegador. Es difícil hacer un seguimiento de JavaScript escrito para el servidor en comparación con JavaScript que se envía al navegador. Por ejemplo, con ES6 puede hacer lo siguiente, incluida la capacidad de usar 'let' (y 'const') en las declaraciones de definición:
<script>
let names = [
'Amy',
'Bruce',
'Chris'
];
names = [...names, 'David'];
</script>
Compatibilidad con versiones anteriores
La mutación de la matriz de nombres anterior utiliza una nueva sintaxis de "operador de propagación" [...names]para representar los valores actuales de la matriz de nombres, y luego agrega a David mediante una operación de asignación en lugar del método push (). La nueva sintaxis no es compatible con Chrome 41 y, por lo tanto, no funcionaría antes de la actualización de Googlebot a Chrome 74. Para los desarrolladores es como la muerte por mil cortes tener que escribir o transpilar ES6 para obtener compatibilidad con versiones anteriores.Ahora, la sintaxis moderna de JavaScript empezará a funcionar directamente con Googlebot, y hay literalmente docenas de nuevas funciones disponibles, como la que se muestra arriba. Solo tenga en cuenta que Bing y DuckDuckGo (así como los rastreadores de redes sociales) pueden no ser capaces de interpretar la sintaxis de ES6.
Ejemplo de la vida real
La estructura Svelte se actualizó y revisó de manera significativa recientemente a la versión 3. Con esta importante revisión, se activó con mayor precisión la reactividad de la página basada en la asignación. Hay un divertido video viral sobre eso. Tener que escribir o transpilar el código de la matriz de 'nombres' a una sintaxis push () más antigua para Google en Svelte requiere un paso adicional porque push () agrega valores a una matriz pero no es una operación de asignación de variables, que es necesaria para activar la página reactividad en Svelte 3.<script>
let names = [
'Amy',
'Bruce',
'Chris'
];
names.push('David');
names = names; // Para activar la reactividad Svelte
</script>
Es fácil ver por qué ahora se puede usar ES6:
<script>
names = [...names, 'David'];
</script>
... es más amigable con los desarrolladores para los usuarios de Svelte que antes.
Representación de Evergreen Chromium
Ahora que se puede contar con el motor de renderizado Chromium de Googlebot, los usuarios de JavaScript React, Angular, Vue, Svelte 3 y vanilla pueden preocuparse un poco menos por los poli-rellenos específicos de Chrome 41 y escribir o transpilar la sintaxis de ES6 en los proyectos. Sin embargo, aún existen preocupaciones. Debe probar y asegurarse de que el motor de renderizado se comporte de la manera que anticipa. Google está más protegido sobre la exposición de sus recursos que el navegador de un usuario.Google recomienda que los usuarios consulten la documentación para encontrar referencias a las instancias del Servicio de representación web (WRS) de Google: básicamente Chromium 74, actualmente, en productos como la prueba compatible con dispositivos móviles y la herramienta de inspección de URL. Por ejemplo, un script de ubicación geográfica puede solicitar servicios de ubicación del navegador. El motor de renderizado de Google no expone esa API. Este tipo de excepciones en su JavaScript puede detener su indexación.
Seguimiento de Googlebot
Si aún está rastreando las visitas de versiones anteriores de Chrome en los registros de su servidor, eventualmente actualizarán la cadena de agente de usuario para reflejar la versión de Chrome que están ejecutando. Además, tenga en cuenta que Google es una empresa bastante grande y dispersa con divisiones que tienen acceso variable a sus recursos de red. Un departamento en particular puede tener configuraciones que modificar para comenzar a usar el nuevo motor Chrome, pero es lógico pensar que todo lo estará usando muy pronto, especialmente para los servicios críticos de rastreo web.Asesoramiento técnico de SEO
¿Qué significa esto para los SEO técnicos? Habrá menos problemas críticos de indexación para los sitios que ejecutan JavaScript moderno. El consejo tradicional, sin embargo, permanecerá en gran parte intacto. Por ejemplo, el nuevo motor de representación no realiza un acceso directo a la cola de procesamiento de indexación para el código reactivo. Eso significa que los sitios que ejecutan React, Angular o Vue, etc., seguirán siendo mejores que los sitios relativamente estáticos de representación previa, y los sitios verdaderamente dinámicos que se muestran mejor en el lado del servidor (SSR).Lo bueno de ser un SEO técnico es que asesoramos a los desarrolladores sobre las prácticas que deben alinearse con Googlebot y que, en primer lugar, deberían estar haciendo. Lo bueno de ser un desarrollador de SEO es que hay un río interminable de código moderno y emocionante para jugar, especialmente con Google que ahora está al tanto de Chromium 74. El único inconveniente es que Chromium Googlebot no te ayuda con Bing, DuckDuckGo, o redes sociales que comparten rastreadores.
Eso es un inconveniente bastante grande
Cuanto más cambian las cosas, más permanecen igual. Aún así, debe aconsejar a los clientes sobre la representación previa y SSR. Esto garantiza que no importa con qué agente de usuario esté tratando, recibirá contenido renderizado para buscar o compartir. El problema en el que nos encontramos es que si la aplicación planificada tiene un gran volumen de partes reactivas, por ejemplo, actualizar constantemente los puntajes deportivos o los precios del mercado de valores, debemos hacer reactividad y la SSR por sí sola no funcionará.Ahí es cuando es necesario realizar SSR y enviar JavaScript personalizado para la hidratación diferida, similar a la división de códigos. Básicamente, el HTML completo se entrega como completamente procesado en el servidor, y luego JavaScript se encarga de actualizar las partes de reactividad. Si JavaScript no se procesa en Bing o DuckDuckGo, entonces está bien porque ya ha enviado HTML completamente renderizado. Esto puede parecer excesivo, pero tenga en cuenta que el motor de búsqueda solo podrá representar los rankings de su página en el estado en que se encontraba en un momento determinado, de todos modos.
¿Por qué tal reactividad?
SSR puede lograr la proeza de representación SEO a través de agentes de usuario para usted, y los navegadores de usuarios pueden ejecutar JavaScript para características reactivas. Pero ¿por qué molestarse? Si está utilizando un marco reactivo solo porque puede, tal vez no necesitaba hacerlo en primer lugar. Si desea evitar todos los problemas y gastos de tener una gran cantidad de detalles complejos para administrar cuando la naturaleza de su sitio no requiere mucha reactividad, entonces es una muy buena idea crear sitios estáticos usando una estrategia con representación previa si es necesario. o escriba JavaScript de vainilla para la característica o dos que en realidad pueden requerir reactividad.Representación del lado del servidor
Si cree que la representación del lado del servidor es pan comido, lea una publicación que describa algunos de los horrores que podría encontrar antes de cargar, especialmente si está tratando de adaptar una aplicación preexistente. En resumen, debe estar escribiendo JavaScript universal y se vuelve complejo rápidamente, incluidas las implicaciones de seguridad. Afortunadamente, también hay un conjunto nuevo de publicaciones bien escritas que comprenden un tutorial de React bastante completo si trabajas desde cero. Recomendamos leerlo para complementar la guía oficial de React.Una nueva esperanza
Las cosas se mueven rápidamente y mantenerse al día puede ser difícil, incluso para Google. La noticia de que se ha actualizado a Chrome 74 para renderizar más de la Web moderna hace mucho tiempo que está atrasada. Es importante que sepamos que pretende mejorar Googlebot a pocas semanas de la versión para el consumidor de las versiones de Chrome. Ahora podemos probar más código usando software local para asegurarnos de que nuestros sitios funcionen con Googlebot. Un nuevo paradigma muy interesante para la reactividad es Svelte. Svelte tiene un modo de salida SSR que puedes probar directamente en su tutorial REPL. Svelte nos brinda una reactividad más cercana a JavaScript de vainilla que otras, un verdadero logro.Recuerda suscribirte:
Obtenga nuestro boletín de noticias diario | Suscríbete gratuitamente SUSCRIBIRSE
0 comments:
Publicar un comentario