Cómo lograr que JavaScript y la Búsqueda de Google funcionen en conjunto

Entérate de las actualizaciones y estadísticas más recientes de Google I/O 2019.

Con la Búsqueda de Google, están sucediendo grandes cosas, y nos entusiasma compartirlas en Google I/O 2019.

En esta publicación, nos centraremos en las prácticas recomendadas para que las aplicaciones web con JavaScript sean detectables en la Búsqueda de Google, incluidas las siguientes:

  • La nueva versión perdurable de Googlebot
  • Canalización de Googlebot para rastreo, indexación y procesamiento
  • Detección de atributos y manejo de errores
  • Estrategias de renderización
  • Herramientas de prueba para tu sitio web en la Búsqueda de Google
  • Desafíos comunes y posibles soluciones
  • Prácticas recomendadas de SEO en apps web con JavaScript

Conoce al robot de Google perdurable

Este año anunciamos el esperado nuevo Googlebot perdurable.

Googlebot con el logotipo de Chrome
El robot de Google ahora ejecuta un moderno motor de renderización de Chromium.

Googlebot ahora usa un motor de Chromium moderno para procesar sitios web para la Búsqueda de Google. Además, probaremos versiones más recientes de Chromium para mantener al robot de Google actualizado, por lo general, unas pocas semanas después de cada versión estable de Chrome. Este anuncio es una gran noticia para los desarrolladores web y los especialistas en SEO, ya que marca la llegada de más de 1,000 funciones nuevas, como ES6+, IntersectionObserver y Web Components v1, en Googlebot.

Descubre cómo funciona Googlebot

Googlebot es una canalización con varios componentes. Veamos cómo el robot de Google indexa las páginas para la Búsqueda de Google.

Un diagrama en el que se muestra una URL que pasa de una cola de rastreo a un paso de procesamiento que extrae las URLs vinculadas y las agrega a la cola de rastreo, una cola de procesamiento que se envía a un procesador que produce HTML. El procesador usa este código HTML para extraer las URLs vinculadas nuevamente y, luego, indexar el contenido.
Canalización de Googlebot para rastrear, renderizar e indexar una página.

El proceso funciona de la siguiente manera:

  1. Googlebot pone en cola las URLs para rastrearlas.
  2. Luego, recupera las URLs con una solicitud HTTP en función del presupuesto de rastreo.
  3. Googlebot analiza el código HTML en busca de vínculos y pone en cola los vínculos descubiertos para rastrearlos.
  4. Luego, Googlebot pone la página en cola para su procesamiento.
  5. Tan pronto como sea posible, una instancia de Chromium sin interfaz gráfica procesa la página, lo que incluye la ejecución de JavaScript.
  6. Googlebot usa el HTML procesado para indexar la página.

Tu configuración técnica puede influir en el proceso de rastreo, renderización e indexación. Por ejemplo, los tiempos de respuesta lentos o los errores de servidor pueden afectar el presupuesto de rastreo. Otro ejemplo sería solicitar que JavaScript renderice los vínculos puede conducir a un descubrimiento más lento de estos vínculos.

Usa la detección de funciones y soluciona errores

El robot de Google perdurable tiene muchas funciones nuevas, pero algunas aún no se admiten. confiar en funciones no compatibles o no manejar correctamente los errores puede impedir que Googlebot no pueda procesar ni indexar tu contenido.

Veamos un ejemplo:

 <body>
   <script>
     navigator.geolocation.getCurrentPosition(function onSuccess(position) {
       loadLocalContent(position);
     });
   </script>
 </body>

En algunos casos, es posible que esta página no muestre ningún contenido porque el código no controla los casos en que el usuario rechaza el permiso o cuando la llamada getCurrentPosition muestra un error. De forma predeterminada, Googlebot rechaza este tipo de solicitudes de permisos.

Esta es una mejor solución:

 <body>
   <script>
     if (navigator.geolocation) {
       // this browser supports the Geolocation API, request location!
       navigator.geolocation.getCurrentPosition(
         function onSuccess(position) {
           // we successfully got the location, show local content
           loadLocalContent(position);
         }, function onError() {
           // we failed to get the location, show fallback content
           loadGlobalContent();
         });
     } else {
       // this browser does not support the Geolocation API, show fallback content
       loadGlobalContent();
     }
   </script>
 </body>

Si tienes problemas para indexar tu sitio de JavaScript, sigue nuestra guía de solución de problemas para encontrar soluciones.

Elige la estrategia de renderización adecuada para tu app web

En la actualidad, la estrategia de renderización predeterminada para apps de una sola página es la renderización del cliente. El código HTML carga el código JavaScript, que luego genera el contenido en el navegador a medida que se ejecuta.

Veamos una aplicación web que muestra una colección de imágenes de gatos y usa JavaScript para renderizarse por completo en el navegador.

Cuadro de código que muestra HTML que carga algunas secuencias de comandos. Captura de pantalla de una página web en un dispositivo móvil que muestra imágenes de marcador de posición mientras se carga el contenido real.
La estrategia de renderización influye en el rendimiento y la solidez de tus aplicaciones web.

Si puedes elegir tu estrategia de renderización, considera usar la renderización previa o del servidor. Ejecutan JavaScript en el servidor para generar el contenido HTML inicial, lo que puede mejorar el rendimiento de los usuarios y los rastreadores. Estas estrategias permiten que el navegador comience a renderizar el código HTML a medida que llega a través de la red, lo que hace que la página se cargue más rápido. En la sesión de renderización en I/O o en la entrada de blog sobre el procesamiento en la Web, se muestra cómo la hidratación y renderización del servidor pueden mejorar el rendimiento y la experiencia del usuario de las apps web, y se proporcionan más ejemplos de código para estas estrategias.

Si buscas una solución alternativa para los rastreadores que no ejecutan JavaScript (o si no puedes realizar cambios en tu base de código de frontend), considera usar el procesamiento dinámico, que puedes probar en este codelab. Sin embargo, ten en cuenta que no obtendrás la experiencia del usuario ni los beneficios de rendimiento que obtendrías con el procesamiento previo o el procesamiento del servidor, ya que el procesamiento dinámico solo publica código HTML estático para los rastreadores. Esto lo convierte en un factor temporal en lugar de una estrategia a largo plazo.

Prueba tus páginas

Si bien la mayoría de las páginas suelen funcionar bien con Googlebot, te recomendamos que pruebes tus páginas con frecuencia para asegurarte de que el contenido esté disponible para el robot de Google y de que no haya problemas. Existen varias herramientas excelentes para ayudarte a hacerlo.

La forma más sencilla de verificar una página rápidamente es mediante la prueba de optimización para dispositivos móviles. Además de mostrarte los problemas relacionados con la optimización para dispositivos móviles, también se muestra una captura de pantalla del contenido de la mitad superior de la página y del HTML procesado tal como lo ve Googlebot.

La prueba de optimización para dispositivos móviles muestra el HTML procesado que ve Googlebot después de procesar la página
La prueba de optimización para dispositivos móviles te muestra el HTML procesado que usa Googlebot.

También puedes averiguar si hay problemas con la carga de recursos o errores de JavaScript.

La Prueba de optimización para dispositivos móviles muestra errores de JavaScript y un seguimiento de pila.

Te recomendamos que verifiques tu dominio en Google Search Console para que puedas usar la Herramienta de inspección de URLs y obtener más información sobre el estado de indexación y rastreo de una URL, recibir mensajes cuando Search Console detecte problemas y obtener más detalles sobre el rendimiento de tu sitio en la Búsqueda de Google.

La Herramienta de inspección de URLs muestra una página indexada con información sobre la detección, el rastreo y la indexación de una URL
La Herramienta de inspección de URLs de Search Console muestra el estado de una página en el rastreo, el procesamiento y la indexación.

Para obtener orientación y sugerencias generales sobre SEO, puedes usar las auditorías de SEO en Lighthouse. Para integrar auditorías de SEO en tu paquete de pruebas, usa la CLI de Lighthouse o el bot de CI de Lighthouse.

Un informe de prueba de SEO con una puntuación de 44 y advertencias sobre la optimización para dispositivos móviles, así como advertencias sobre las prácticas recomendadas de contenido
Lighthouse muestra recomendaciones generales de SEO para una página.

Estas herramientas te ayudan a identificar, depurar y solucionar problemas con las páginas en la Búsqueda de Google, y deben formar parte de tu rutina de desarrollo.

Mantente al tanto de las novedades y comunícate con nosotros

Si quieres mantenerte al tanto de los anuncios y cambios en la Búsqueda de Google, visita nuestro blog para webmasters, el canal de YouTube para webmasters de Google y nuestra cuenta de Twitter. Para obtener más información sobre SEO y JavaScript, consulta también nuestra guía para desarrolladores sobre la Búsqueda de Google y nuestra serie de videos sobre SEO en JavaScript.