Solucionar problemas de JavaScript relacionados con la Búsqueda
Entendiendo a los robots de Google. Para empezar, debes entender que el robot de Google es como un visitante amigable. Aunque está interesado en rastrear tu contenido, se preocupa por no afectar la experiencia de los usuarios que visitan tu sitio. Pero también tiene una característica única: es capaz de identificar los recursos que no son esenciales y omitirlos. Por ejemplo, los informes, errores y otras solicitudes que no contribuyen al contenido esencial de tu página.
Y aquí viene la parte interesante: la herramienta de Google, el servicio de renderizado web (WRS), no siempre proporciona una representación completa de lo que hace en tu sitio. Por eso, siempre es una buena idea monitorizar ambos desde Search Console.
¿Cómo detectar problemas de JavaScript?
Detectar problemas de JavaScript puede parecer una tarea compleja, pero gracias a las herramientas de Google, es más sencillo de lo que parece. Las pruebas de optimización para móviles y la herramienta de inspección de URLs de Search Console son tus mejores aliados para encontrar y solucionar posibles problemas de JavaScript. ¿Y por qué son tan útiles? Sencillo, te muestran una visión detallada de cómo Google «ve» tu página.
Imagina que tu página es un libro. Con estas herramientas, puedes abrir el libro y revisar cada página, viendo cuáles se han cargado correctamente, qué excepciones ha encontrado la consola de JavaScript y cómo se ha renderizado el DOM, entre otros datos. Es como tener un súper poder que te permite ver más allá de la superficie de tu página y adentrarte en su esencia.
Pero ahí no acaba la cosa. Te recomiendo, y no me cansaré de hacerlo, que registres y audites todos los errores de JavaScript que encuentres. Piensa en esto como tu propio archivo de detective, donde registras cada error que encuentras para poder rastrearlos, analizarlos y finalmente, resolverlos.
Por ejemplo, si te encuentras con un error que impide que se muestre un elemento importante en tu página, puedes registrar este problema y, a continuación, usar tus habilidades de detective para encontrar la solución en el código JavaScript. Así, garantizas que se renderice correctamente el contenido, mejorando la experiencia del usuario y tu posicionamiento SEO.
No subestimes el poder de una buena auditoría de errores. ¡Te ayudará a mantener tu sitio web funcionando a la perfección!
Ejemplo de seguimiento de errores de JavaScript
Una de las cosas fascinantes del desarrollo web es tener la capacidad de rastrear y corregir problemas. ¿Pero cómo se hace esto en el caso de los errores de JavaScript? Aquí te dejo un ejemplo práctico para que entiendas mejor.
El controlador global onerror es una excelente herramienta para rastrear errores de JavaScript. Imagínalo como una red de seguridad que captura todos los errores que puedan surgir en tu código. Cada vez que hay un error, este controlador se activa, permitiéndote registrar y examinar el problema.
Por ejemplo, supongamos que tienes un script que realiza una operación matemática. Si hay un error en tu código que impide que se realice correctamente la operación, el controlador onerror saltará al rescate.
Podrías tener algo como esto en tu código:
window.onerror = function(message, source, lineno, colno, error) {
console.log(«Ha ocurrido un error: » + message);
};
En este código, cada vez que ocurra un error, se registrará un mensaje en la consola con los detalles del mismo.
Sin embargo, no todo es color de rosa. El controlador onerror tiene sus limitaciones. Por ejemplo, los errores de análisis, aquellos que surgen cuando JavaScript no puede interpretar el código, no pueden ser rastreados con este método. Así que, si tienes un «3 * * 2» en tu código (un error de sintaxis), onerror no podrá ayudarte.
Pero no te preocupes, hay otras técnicas y herramientas para rastrear esos errores. Lo importante es tener un enfoque proactivo y siempre buscar soluciones a los desafíos que te encuentres en el camino del desarrollo web.
Evitando los errores soft 404
Aquí viene un obstáculo más: los errores soft 404. En una aplicación de página única (APU), esto puede ser un verdadero quebradero de cabeza. Pero tranquilo, tengo dos estrategias para ti:
- Redirige a una URL donde el servidor responda con un código de estado 404. En lugar de permitir que tu APU muestre un código de estado HTTP 200 cuando ocurre un error, puedes redirigir a los usuarios a una URL específica que tenga un código de estado 404. De este modo, Google entiende que la página no existe y no la indexará erróneamente. Por ejemplo, si la página de productos de tu sitio web está dando problemas, podrías redirigir a los usuarios a una página de error personalizada con un código de estado 404.
- Cambia la etiqueta meta robots a noindex. La etiqueta meta robots es una forma directa de decirle a los motores de búsqueda cómo deben tratar una página específica de tu sitio. Si no quieres que una página se indexe, puedes cambiar la etiqueta meta robots a «noindex». Así, estarás dando instrucciones claras a Google de que no debe indexar esa página en los resultados de búsqueda. Por ejemplo, si tienes una página de «Gracias por registrarte» que está causando errores soft 404, podrías añadir la etiqueta meta robots con «noindex» para evitar que sea indexada.
¿Por qué es importante? Porque cuando una APU utiliza JavaScript del cliente para gestionar errores, puede terminar mostrando un código de estado HTTP 200 en lugar del código de estado adecuado, lo que puede dar lugar a la indexación de páginas de error.
Solicitudes de permisos de usuario
Aquí va un consejo muy importante que quizás no sepas: El robot de Google no se lleva muy bien con las solicitudes de permisos de usuario. ¿Por qué? Bueno, piénsalo. ¿De qué le sirve a un robot tener acceso a la cámara de tu móvil? Exacto, de nada. Entonces, ¿qué hacer si tienes una función en tu página que requiere permisos del usuario, como la Camera API?
La respuesta es simple, pero crucial para garantizar una óptima experiencia de usuario y la adecuada indexación de tu página: proporciona una alternativa. Imagina que tienes una función en tu página que permite a los usuarios subir una foto desde su cámara. Cuando Google rastrea esa página, simplemente ignorará esa función, ya que no tiene una cámara para usar. Sin embargo, si ofreces una opción alternativa, por ejemplo, subir una foto desde los archivos del dispositivo, entonces Google podrá entender esa funcionalidad y rastrear e indexar adecuadamente tu página.
Recuerda siempre pensar en Google como un usuario más de tu página, con algunas limitaciones. Así, podrás asegurarte de que tu contenido está optimizado para todos los usuarios, humanos o no.
No uses URLs de fragmentos para cargar contenido diferente
Las aplicaciones de página única (SPA) son geniales, ¿verdad? Todo fluye sin problemas, sin recargas de página. Pero ten cuidado con cómo cargas tus diferentes vistas. Si estás utilizando URLs de fragmentos, como «https://example.com/#/products«, para cargar diferentes vistas, podrías estar yendo en contra de las normas de SEO.
Resulta que desde 2015, Google decretó obsoleto el esquema de rastreo de AJAX, el que solía permitir el funcionamiento de estas URLs de fragmentos. Esto significa que si sigues usando este método, el robot de Google no podrá rastrear e indexar correctamente las diferentes secciones de tu SPA.
Entonces, ¿qué puedes hacer? Aquí es donde la History API viene al rescate. Esta API te permite manipular el historial del navegador para cambiar la URL sin recargar la página, permitiendo a Google rastrear e indexar correctamente cada vista de tu SPA.
Un ejemplo práctico sería si tienes una tienda online como APU. En vez de usar «https://example.com/#/products/shoes» para mostrar la sección de zapatos, podrías usar «https://example.com/products/shoes» con ayuda de la History API. De este modo, cada sección de tu tienda será correctamente indexada como una página única por el robot de Google. ¡Un gran impulso para tu SEO!