Solucionar problemas de JavaScript relacionados con la Búsqueda

Con esta guía, podrás identificar y solucionar problemas de JavaScript que quizá impidan que tus páginas o parte del contenido de páginas con JavaScript se muestren en la Búsqueda de Google. Aunque el robot de Google puede ejecutar código JavaScript, debes tener en cuenta ciertas diferencias y limitaciones al diseñar tus páginas y aplicaciones para adaptarlas a la forma en que los rastreadores acceden a tu contenido y lo renderizan.

En nuestra guía de conceptos básicos de SEO en JavaScript, encontrarás más información sobre cómo optimizar tu sitio con JavaScript para la Búsqueda de Google.

El robot de Google está diseñado para tener un funcionamiento ejemplar en la Web. Aunque su principal prioridad es rastrear contenido, también procura que, al hacerlo, no se degrade la experiencia de los usuarios que visitan el sitio. El robot de Google, junto con su componente de servicio de renderizado web (WRS), está constantemente analizando e identificando los recursos que no aportan nada al contenido esencial de las páginas para después elegir si los omite. Por ejemplo, es el caso de las solicitudes de informes, de errores y otras similares, que no se utilizan o son innecesarias para extraer el contenido esencial de la página.

Las analíticas que registras en tu sitio no siempre ofrecen una representación completa o precisa de la actividad del robot de Google y de WRS. Puedes monitorizar esta actividad desde Search Console, que también incluye más información sobre tu sitio.

Si crees que hay algún problema con JavaScript que puede estar impidiendo que tus páginas o parte del contenido de páginas con JavaScript aparezcan en la Búsqueda de Google, sigue los pasos que se indican más abajo.

En el caso de que no sepas si JavaScript es la causa principal del problema, consulta nuestra guía general sobre las depuraciones para determinar cuál es.

1. Comprueba cómo se rastrea y renderiza una URL en Google con la prueba de optimización para móviles o la herramienta de inspección de URLs de Search Console. Puedes ver los recursos que se han cargado, el resultado y las excepciones de la consola de JavaScript y el DOM renderizado, entre otros datos.
   No depures tus páginas mediante enlaces en caché; mejor utiliza la herramienta de inspección de URLs, ya que incluye la versión más reciente de tus páginas.

   También te recomendamos que registres y audites los errores de JavaScript que encuentren tanto los usuarios como el robot de Google al visitar tu sitio web; de este modo, podrás identificar posibles problemas que puedan afectar a la forma en que se renderiza el contenido.

   Ejemplo

   A continuación se muestra un ejemplo de cómo se registran los errores de JavaScript en el controlador global onerror.

   Con este método no pueden registrarse algunos tipos de errores de JavaScript, como los de análisis.

   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. Evita los errores soft 404, lo que puede ser particularmente difícil en una aplicación de página única (APU). Para evitar que se indexen páginas de error, puedes utilizar una, o ambas, de las estrategias descritas a continuación:
   • Redirigir a una URL donde el servidor responde con un código de estado 404.

     Ejemplo

     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';
        }
      });

   • Añadir o cambiar la metaetiqueta robots por noindex.

     Ejemplo

     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);
        }
      });

   Más información: Cuando una APU utiliza JavaScript del cliente para gestionar errores, suele avisar mostrando un código de estado HTTP 200 en lugar del código de estado adecuado, lo que puede provocar que se indexen páginas de error y que, posiblemente, aparezcan en resultados de búsqueda.
3. El robot de Google rechazará las solicitudes de permisos de usuario.
   Más información: Las funciones que necesitan permisos de usuario no son útiles para el robot de Google ni para los usuarios. Por ejemplo, si haces que Camera API sea obligatorio, el robot de Google no puede proporcionarte ninguna cámara. En vez de eso, deberías proporcionar una manera de que los usuarios puedan acceder al contenido sin tener que permitir el acceso a la cámara.
4. No utilices URLs de fragmentos para cargar contenido diferente.
   Más información: Es posible que una APU cargue vistas distintas mediante URLs de fragmentos, como https://example.com/#/products. El esquema de rastreo de AJAX está obsoleto desde el 2015, por lo que no esperes que las URL de fragmentos funcionen con el robot de Google. Te recomendamos que, para cargar contenido diferente en URL distintas en una APU, utilices History API.
5. No dependas de la persistencia de los datos para publicar contenido.
   Más información: El WRS carga todas las URL siguiendo las redirecciones del servidor y del cliente, del mismo modo que un navegador normal. Consulta un resumen de cómo descubre Google contenido en el artículo Introducción a la indexación. El WRS no conserva el estado de las páginas de una carga de página a otra.

   • Los datos del almacenamiento local y de sesión se borran cada vez que se carga una página.
   • Las cookies HTTP se borran cada vez que se carga una página.
6. Utiliza huellas digitales de contenido para evitar que haya problemas con el robot de Google y el almacenamiento en caché.
   Más información: Para reducir las solicitudes de red que se hacen y disminuir el uso de recursos, el robot de Google almacena mucho contenido en caché. A veces, el WRS ignora los encabezados de almacenamiento en caché, por lo que quizá acabe usando recursos CSS o JavaScript obsoletos. Para resolver este problema, crea una huella digital del contenido e inclúyela en el nombre del archivo (por ejemplo, main.2bb85551.js). Como las huellas digitales dependen del contenido, cada vez que modifiques un archivo, su nombre cambiará. Puedes consultar más información al respecto en la guía de web.dev sobre estrategias de almacenamiento en caché de larga duración.
7. Comprueba que tu aplicación utilice la detección de funciones con todas las API de vital importancia que necesite y asegúrate de que proporcione una alternativa o un polyfill cuando corresponda.
   Más información: Es posible que algunos user-agent no hayan adoptado todavía todas las funciones web, y puede que otros hayan inhabilitado ciertas funciones intencionadamente. Por ejemplo, si usas WebGL para renderizar efectos fotográficos en el navegador, la detección de funciones indicará que el robot de Google no es compatible con WebGL. Para solucionarlo, puedes saltarte los efectos fotográficos o renderizarlos previamente en el servidor para que todo el mundo pueda verlos, incluido el robot de Google.
8. Comprueba que se pueda acceder a tu contenido con conexiones HTTP.
   Más información: El robot de Google obtiene contenido de tu servidor mediante solicitudes HTTP; no admite otros tipos de conexiones, como las de WebSockets o WebRTC . Para evitar problemas con este tipo de conexiones, tienes que proporcionar un método alternativo HTTP para obtener contenido y usar potentes sistemas de gestión de errores y de detección de funciones.
9. Comprueba que los componentes web se renderizan como estaba previsto. Con la prueba de optimización para móviles o la herramienta de inspección de URLs, puedes comprobar si el HTML renderizado tiene todo el contenido previsto.
   Consulta más información sobre cómo el WRS unifica Light DOM y Shadow DOM. Si los componentes web que usas no utilizan el mecanismo <slot> en el contenido de Light DOM, consulta más información en la documentación del componente web o utiliza otro componente web. Consulta más información sobre las prácticas recomendadas sobre componentes web.
10. Una vez que hayas corregido los elementos de esta lista de comprobación, vuelve a probar tu página con la prueba de optimización para móviles o con la herramienta de inspección de URLs de Search Console.

    Si el problema se ha solucionado, verás una marca de verificación verde y no se mostrará ningún error. Si siguen apareciendo errores, escribe un mensaje en el grupo de trabajo sobre sitios con JavaScript en la Búsqueda.