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 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.
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 visiten 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.
Si crees que hay algún problema con JavaScript que quizá impida 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 a continuación.
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. En el enlace "Más información" que aparece en la tarjeta de veredicto de la página que hayas probado, se muestran 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.
Ejemplo
A continuación se muestra un ejemplo de cómo se registran los errores de JavaScript en el controlador global onerror.
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 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';
}
});
Cambiar la metaetiqueta robots por noindex o añádela si no la hay.
No utilices URLs de fragmentos para cargar contenido diferente.
No dependas de la persistencia de los datos para publicar contenido.
Utiliza huellas digitales de contenido para evitar que haya problemas con el robot de Google y el almacenamiento en caché.
Asegúrate de que tu aplicación utiliza la detección de funciones con todas las API de vital importancia que necesite y de que proporcione una alternativa o un polyfill cuando corresponda.
