Solucionar problemas de JavaScript relacionados con la Búsqueda | Centro de la Búsqueda de Google | Documentación

Ahora estamos en LinkedIn: para obtener noticias y recursos de la Búsqueda de Google sobre cómo hacer que tu sitio sea visible, síguenos en LinkedIn.

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 Google puede ejecutar 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 web con JavaScript para la Búsqueda de Google.

El robot de Google está diseñado para no entorpecer a los usuarios de 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 usan o son innecesarias para extraer el contenido esencial de la página. Las analíticas del cliente no siempre proporcionan una representación completa o precisa de la actividad y de las sugerencias del robot de Google y de WRS en tu sitio. Puedes monitorizar ambas desde Search Console.

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. Si no sabes si JavaScript es la causa principal del problema, consulta nuestra guía general de depuración para determinar cuál es.

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.

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.

A continuación se muestra un ejemplo de cómo se registran los errores de JavaScript en el controlador global onerror. Nota: 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);

});

Evita los errores soft 404, lo que puede ser bastante difícil en una aplicación de página única (APU). Para evitar que se indexen páginas de error, puedes usar una, o ambas, de las estrategias descritas a continuación:
- Redirige a una URL donde el servidor responda 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';
   }
 });
```
- Añade o cambia la etiqueta meta robots por 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 APU usa JavaScript del cliente para gestionar errores, suele avisar mostrando un código de estado HTTP 200 en lugar del código de estado adecuado. Esta situación puede hacer que se indexen las páginas de error y que, posiblemente, se muestren en los resultados de búsqueda.
El robot de Google rechazará las solicitudes de permisos de usuario.
Las funciones que necesitan permisos de usuario no tienen sentido 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, ofrece a los usuarios una forma de acceder a tu contenido sin que tengan que permitir el acceso a la cámara.
No utilices URLs de fragmentos para cargar contenido diferente.
Una APU puede cargar 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 URLs distintas en una APU, utilices History API.
No dependas de la persistencia de los datos para publicar contenido.
El WRS carga todas las URLs 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 Cómo funciona la Búsqueda de Google. 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.
Utiliza huellas digitales de contenido para evitar que haya problemas con el robot de Google y el almacenamiento en caché.
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.
Comprueba que tu aplicación utilice la detección de funcionescon todas las APIs de vital importancia que necesite y asegúrate de que proporcione una alternativa o un polyfill cuando corresponda.
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.
Comprueba que se pueda acceder a tu contenido con conexiones HTTP.
El robot de Google obtiene contenido de tu servidor mediante solicitudes HTTP, ya que no es compatible con otros tipos de conexiones, como 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.
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.
WRS unifica los elementos 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.
Una vez que hayas corregido los elementos de esta lista de comprobación, prueba 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.