Soluciona problemas de JavaScript relacionados con la Búsqueda

Esta guía te ayudará a identificar y solucionar los problemas de JavaScript que podrían impedir que tu página (o que el contenido específico en las páginas con tecnología JavaScript) aparezca en la Búsqueda de Google. Si bien Google ejecuta JavaScript, hay algunas diferencias y limitaciones que debes considerar cuando diseñes tus apps y páginas para ajustar la manera en que los rastreadores acceden a tu contenido y lo procesan. En nuestra Guía sobre aspectos básicos de JavaScript SEO encontrarás más información sobre cómo optimizar tu sitio de JavaScript para la Búsqueda de Google.

El robot de Google está diseñado para usar la Web de manera apropiada. Si bien su prioridad es el rastreo, también se asegura de no perjudicar la experiencia de los usuarios que visitan el sitio. Junto con su componente de Servicio de procesamiento web (WRS), Googlebot identifica y analiza continuamente recursos que no contribuyen al contenido esencial de la página, y es posible que no recupere tales recursos. Un ejemplo son las solicitudes de informes y errores que no contribuyen al contenido esencial de la página, así como otros tipos de solicitudes similares, que no se utilizan o no son necesarias para extraer el contenido esencial de la página. Es posible que las estadísticas del cliente no brinden una representación completa o precisa de la actividad de WRS y Googlebot en tu sitio. Usa Search Console para supervisar la actividad y los comentarios de WRS y Googlebot relacionados con tu sitio.

Si sospechas que los problemas de JavaScript impiden que tu página (o el contenido específico de las páginas que utilizan JavaScript) aparezca en la Búsqueda de Google, sigue estos pasos. En caso de que no sepas con certeza si JavaScript es la causa principal, sigue nuestra guía de depuración general para determinar el problema específico.

1. Para probar el modo en que Google rastrea y procesa una URL, usa la Prueba de resultados enriquecidos o la Herramienta de inspección de URL de Search Console. Podrás ver recursos cargados, resultados y excepciones de la Consola de JavaScript, DOM renderizados y otros detalles.

   De manera opcional te recomendamos que recopiles y audites los errores de JavaScript que encuentren en tu sitio los usuarios (incluido Googlebot) para identificar problemas potenciales que puedan afectar la manera en que se procesa el contenido.

   Aquí tienes un ejemplo en el que se muestra cómo registrar los errores de JavaScript que se incluyen en el controlador de onerror global. Nota: Hay algunos tipos de errores de JavaScript, como los de análisis, que no se pueden registrar con este método.

   window.addEventListener('error', function(e) {
       var errorText = [
           e.message,
           'URL: ' + e.filename,
           'Line: ' + e.lineno + ', Column: ' + e.colno,
           'Stack: ' + (e.error && e.error.stack || '(no stack trace)')
       ].join('\n');
   
       // Example: log errors as visual output into the host page.
       // Note: you probably don't want to show such errors to users, or
       //       have the errors get indexed by Googlebot; however, it may
       //       be a useful feature while actively debugging the page.
       var DOM_ID = 'rendering-debug-pre';
       if (!document.getElementById(DOM_ID)) {
           var log = document.createElement('pre');
           log.id = DOM_ID;
           log.style.whiteSpace = 'pre-wrap';
           log.textContent = errorText;
           if (!document.body) document.body = document.createElement('body');
           document.body.insertBefore(log, document.body.firstChild);
       } else {
           document.getElementById(DOM_ID).textContent += '\n\n' + errorText;
       }
   
       // Example: log the error to remote service.
       // Note: you can log errors to a remote service, to understand
       //       and monitor the types of errors encountered by regular users,
       //       Googlebot, and other crawlers.
       var client = new XMLHttpRequest();
       client.open('POST', 'https://example.com/logError');
       client.setRequestHeader('Content-Type', 'text/plain;charset=UTF-8');
       client.send(errorText);
   
   });

2. Asegúrate de evitar los errores de soft 404. En una aplicación de una sola página (SPA), esto puede ser bastante difícil. Para evitar que se indexen páginas de error, puedes usar una de las siguientes estrategias o ambas:
   • Redireccionar a una URL en la que el servidor responde con un código de estado 404.

     fetch(`https://api.kitten.club/cats/${id}`)
      .then(res => res.json())
      .then((cat) => {
        if (!cat.exists) {
          // redirect to page that gives a 404
          window.location.href = '/not-found';
        }
      });

   • Agrega o cambia la etiqueta robots meta a noindex.

     fetch(`https://api.kitten.club/cats/${id}`)
      .then(res => res.json())
      .then((cat) => {
        if (!cat.exists) {
          const metaRobots = document.createElement('meta');
          metaRobots.name = 'robots';
          metaRobots.content = 'noindex';
          document.head.appendChild(metaRobots);
        }
      });

   Cuando una SPA usa JavaScript del lado del cliente para procesar errores, a menudo informa un código de estado HTTP 200 en lugar del código de estado adecuado. Esto puede provocar que se indexen las páginas de error y, posiblemente, se muestren en los resultados de la búsqueda.

3. Googlebot rechazará las solicitudes de permiso del usuario.
   Googlebot (o los usuarios en general) no comprenden las funciones que requieren permisos de usuario. Por ejemplo, si estableces el Camera API requerido, Googlebot no podrá proporcionarte una cámara. En su lugar, ofrece un método para que los usuarios puedan acceder a tu contenido sin verse obligados a otorgar acceso a la cámara.
4. No uses URLs de fragmento para cargar diferentes tipos de contenido.
   Una SPA puede usar URLs de fragmentos (por ejemplo, https://example.com/#/productos) para cargar diferentes vistas. El esquema de rastreo AJAX dejó de estar disponible en 2015, por lo que no puedes confiar en que las URL de fragmento funcionen con Googlebot. Te recomendamos usar History API para cargar contenido diferente según la URL en una SPA.
5. No confíes en la persistencia de datos para publicar contenido.
   WRS carga cada URL (consulta el documento sobre el funcionamiento de la Búsqueda de Google para obtener una descripción general sobre el modo en que Google descubre contenido) siguiendo los redireccionamientos de servidores y clientes, de la misma manera en que lo hace un navegador común. Sin embargo, WRS no conserva su estado en todas las cargas de páginas:
   • Los datos de almacenamiento local y de sesión se borran entre una carga de página y otra.
   • Las cookies HTTP se borran entre una carga de página y otra.
6. Usa el reconocimiento de huellas digitales de contenido para evitar problemas de almacenamiento en caché con Googlebot.
   Googlebot almacena en caché de forma resolutiva para reducir las solicitudes de red y el uso de recursos. WRS puede ignorar los encabezados de almacenamiento en caché. Como consecuencia, es posible que WRS use recursos JavaScript o CSS desactualizados. El reconocimiento de huellas digitales de contenido evita este problema porque incluye una huella digital de contenido como parte del nombre del archivo, por ejemplo, main.2bb85551.js. La huella digital depende del contenido del archivo, por lo que cada vez que se lanza una actualización se genera un nombre de archivo diferente. Consulta la guía de web.dev sobre estrategias de almacenamiento en caché de larga duración para obtener más información.
7. Asegúrate de que tu aplicación use la detección de funciones para todas las APIs principales que necesite y proporciona un polyfill o un comportamiento de resguardo cuando corresponda.
   Es posible que no todos los usuarios-agentes hayan adoptado algunas funciones web, y puede que algunos inhabiliten funciones intencionalmente. Por ejemplo, si usas WebGL para procesar los efectos de una foto en el navegador, la detección de funciones mostrará que Googlebot no admite WebGL. Para solucionar este problema, puedes omitir el efecto de la foto o usar el procesamiento del servidor para procesar previamente los efectos de la foto, lo que permitirá que todos puedan acceder a tu contenido, incluido Googlebot.
8. Asegúrate de que tu contenido funcione con conexiones HTTP.
   Googlebot usa solicitudes HTTP para recuperar contenido de tu servidor. No admite otros tipos de conexiones, como WebSockets o WebRTC. Para evitar problemas con estas conexiones, asegúrate de proporcionar un resguardo HTTP para recuperar contenido y usar la detección de funciones y un sistema de resolución de errores sólido.
9. Asegúrate de que los componentes web se procesen según lo esperado. Usa la Prueba de resultados enriquecidos o la Herramienta de inspección de URLs para comprobar si el código HTML procesado tiene todo el contenido que esperas.
   WRS acopla los DOM claros y oscuros. Si los componentes web que usas no utilizan el mecanismo <slot> para contenido de DOM claros, consulta la documentación del componente web para obtener más información o utiliza otros. Si quieres obtener más información, consulta las prácticas recomendadas para componentes web.
10. Una vez que corrijas todos los elementos de la lista de tareas, vuelve a probar tu página con la Prueba de resultados enriquecidos o la Herramienta de inspección de URL en Search Console.

    Si el problema se solucionó, aparecerá una marca de verificación verde y no se mostrará ningún error. Si aún ves errores, publícalos en el grupo de trabajo de sitios web con JavaScript en la Búsqueda.