JavaScript es una parte importante de la plataforma web porque proporciona muchas funciones que convierten a la Web en una potente plataforma de apps. Permitir que tus aplicaciones web con tecnología JavaScript sean detectables por medio de la Búsqueda de Google puede ayudarte a encontrar nuevos usuarios y volver a captar el interés de los usuarios existentes a medida que buscan el contenido que proporciona tu aplicación web. Si bien la Búsqueda de Google ejecuta JavaScript con una versión de Chromium perdurable, hay algunas funciones que puedes optimizar.
En esta guía, se explica cómo la Búsqueda de Google procesa JavaScript y se describen las prácticas recomendadas de optimización de aplicaciones web con JavaScript para la Búsqueda de Google.
Cómo el robot de Google procesa JavaScript
El robot de Google procesa las aplicaciones web con JavaScript en tres fases principales:
- Rastreo
- Procesamiento
- Indexación
El robot de Google rastrea, procesa y, por último, indexa una página.
Cuando el robot de Google recupera una URL desde la cola de rastreo mediante una solicitud HTTP, primero verifica si permites el rastreo. Para ello, lee el archivo robots.txt. Si la URL se marcó como no permitida, entonces el robot de Google no envía la solicitud HTTP para esta URL y la omite.
Luego, el robot de Google analiza la respuesta de las otras URL en el atributo href de los vínculos HTML y agrega las URL a la cola de rastreo. Para evitar la detección de vínculos, usa el mecanismo nofollow.
El rastreo de una URL y el procesamiento de la respuesta HTML funcionan bien para los sitios web clásicos o las páginas procesadas por el servidor, en las que el HTML de la respuesta HTTP incluye todo el contenido. Algunos sitios de JavaScript pueden usar el modelo de shell de la app donde el HTML inicial no incluye el contenido real y el robot de Google necesita ejecutar JavaScript para poder ver el contenido real de la página generado por JavaScript.
El robot de Google pone en cola todas las páginas para su procesamiento, a menos que un encabezado o una metaetiqueta robots le indique que no indexe la página. La página puede permanecer en esta cola durante unos segundos, pero podría tardar más. Una vez que los recursos del robot de Google lo permiten, un Chromium sin interfaz gráfica procesa la página y ejecuta el JavaScript. El robot de Google vuelve a analizar el HTML procesado para los vínculos y pone en cola las URL que encuentra para rastrear. También usa el HTML procesado para indexar la página.
Ten en cuenta que el procesamiento previo o del servidor sigue siendo una buena opción, ya que hace que el sitio web funcione más rápido para los usuarios y los rastreadores, y no todos los bots pueden ejecutar JavaScript.
Describe tu página con títulos y fragmentos únicos
Los títulos únicos y descriptivos, así como las metadescripciones, ayudan a los usuarios a identificar rápidamente el mejor resultado para su propósito. Consulta cómo crear títulos y descripciones interesantes en nuestros lineamientos.
Puedes usar JavaScript para establecer o cambiar la metadescripción y el título.
Escribe código compatible
Los navegadores ofrecen muchas API y JavaScript es un lenguaje que evoluciona rápidamente. El robot de Google tiene algunas limitaciones con respecto a las API y las funciones de JavaScript que admite. Para asegurarte de que tu código sea compatible con el robot de Google, sigue nuestros lineamientos de solución de problemas de JavaScript.
Usa códigos de estado HTTP significativos
El robot de Google usa códigos de estado HTTP para detectar si se produjo algún error al rastrear la página.
Debes usar un código de estado significativo para indicarle al robot de Google si una página no debe rastrearse o indexarse, como un código 404 para una página que no pudo encontrarse o 401 para páginas que requieren acceso. Puedes usar los códigos de estado HTTP para indicarle al robot de Google si una página se movió a una nueva URL, de manera que el índice pueda actualizarse correctamente.
A continuación, se muestra una lista de códigos de estado HTTP y cuándo usarlos:
| Estado HTTP | Cuándo debe utilizarse |
|---|---|
| 301/302 | Se movió la página a una nueva URL. |
| 401/403 | La página no está disponible debido a problemas con los permisos. |
| 404/410 | La página ya no está disponible. |
| 5xx | Se produjo un error en el servidor. |
Usa las metaetiquetas robots cuidadosamente
Puedes impedir que el robot de Google indexe una página o acceda a vínculos mediante la metaetiqueta robots. Por ejemplo, si agregas la siguiente metaetiqueta en la parte superior de tu página, impedirás que el robot de Google la indexe:
<!-- Googlebot won't index this page or follow links on this page --> <meta name="robots" content="noindex, nofollow">
Puedes usar JavaScript para agregar una metaetiqueta robots a una página o cambiar su contenido. El siguiente código de ejemplo muestra cómo cambiar la metaetiqueta robots con JavaScript para evitar la indexación de la página actual si una llamada a la API no muestra contenido.
fetch('/api/products/' + productId)
.then(function (response) { return response.json(); })
.then(function (apiResponse) {
if (apiResponse.isError) {
// get the robots meta tag
var metaRobots = document.querySelector('meta[name="robots"]');
// if there was no robots meta tag, add one
if (!metaRobots) {
metaRobots = document.createElement('meta');
metaRobots.setAttribute('name', 'robots');
document.head.appendChild(metaRobots);
}
// tell Googlebot to exclude this page from the index
metaRobots.setAttribute('content', 'noindex');
// display an error message to the user
errorMsg.textContent = 'This product is no longer available';
return;
}
// display product information
// ...
});
Cuando el robot de Google encuentra noindex en la metaetiqueta robots, no procesa ni indexa la página.
Soluciona los problemas con las imágenes y el contenido de carga diferida
Las imágenes pueden consumir mucho ancho de banda y rendimiento. Una buena estrategia es utilizar la carga diferida para cargar imágenes solo cuando el usuario esté a punto de verlas. Para asegurarte de que estás implementando una carga diferida que sea fácil de buscar, sigue nuestros lineamientos de carga diferida.