Error de redirección en Google Search Console con Angular Universal RESUELTO

Si no sale en Google no existe.

Hoy en día, cuando cualquier persona necesita algo lo primero que hace es buscarlo en Google.

Es así, incluso mi cuñado que está en contra de todo lo tecnológico, que no tiene RRSS... cuando necesita algo lo busca en Google.

Te doy un dato, no es opinable, es un dato.

El 92% del tráfico en buscadores en internet se genera a través de Google.

Concretamente se hacen 99.000 búsquedas en Google por segundo, lo que equivale a más de 8.500 millones de búsquedas al día.

Fuente Hubspot.

Puedes ser el mejor en fontanería, tener la mejor página web, tener un producto revolucionario... en principio puede parecer que lo tienes todo, pero si no apareces en Google no tendrás lo más importante...

Una infinidad de clientes potenciales.

Si estás leyendo este artículo es muy probable que te hayas encontrado con la siguiente pantalla en tu Google Search Console.

Y también es muy probable que estés prerenderizando con Angular Universal.

Te ayudo a solvertar el error de indexación por redirección.

¿Por qué no se indexan páginas en Google por error de redirección en páginas prerenderizadas con Angular Universal?

Empecemos por el principio.

¿Qué es Angular Universal?

Angular Universal es la tecnología que permite renderizar aplicaciones Angular en el lado del servidor (Server-Side Rendering o SSR).

En una aplicación Angular típica, la renderización ocurre en el navegador del cliente, pero con Angular Universal se renderizará también en el servidor.

El renderizar en el servidor tiene varias ventajas, las más importantes son:

• Mejora la indexación de motores de búsqueda (SEO)
• Compatibilidad con redes sociales y arañas de internet

¿Cómo prerenderiza Angular Universal?

El procedimiento que sigue Angular Universal para el renderizado previo es que para cada ruta se genera un directorio/carpeta con el nombre de esa ruta con un archivo "index.html" en su interior.

Entonces, digamos que si tengo una ruta "fjmduran.com/pagina01", Angular Universal generará un directorio "pagina01" con un archivo index.html dentro que contiene el código HTML de esa página.

Normalmente, en los servidores Web un directorio está representado por un "/" relativo al directorio base.

Entonces, si el servidor desea acceder al archivo index.html dentro de esa carpeta de la página01, la ruta se representaría como "/pagina01/", observe la barra diagonal al final, lo que significa que estamos dentro del directorio de la pagina01.

Como decía mi abuelo, para muestra un botón.

Te dejo una imagen del directorio que genera Angular Universal de mi blog.

¿Por qué se produce el error por redirección 301?

Entonces, cuando visitamos por primera vez cualquier ruta, digamos "/pagina01", nuestro servidor ingresa al directorio pagina01 y abre el archivo index.html dentro, y como es un directorio y no un archivo en el directorio raíz, agrega "/" en al final y una vez que se procesa el archivo index.html, se ejecuta el script angular, lo redirecciona a la ruta que ha definido en sus rutas.

Si no tiene un "/", lo redireccionará, eliminando así la barra.

Esta es la razón por la que se agrega y luego se elimina el slash o barra diagonal.

Solucionando el error por redirección en Angular Universal

La solución es hacer que todas tus rutas terminen con una barra diagonal o slash de forma predeterminada.

En cada módulo definirás tus rutas como:

const routes: Routes = [
    { path: 'pagina01/.', component: pagina01Component, data: 
        { 
            title: "Página 1",
            subTitle: "Aquí la descripción de tu artículo" 
        } 
    },
...
];
        

Es importante que te fijes que la final de la ruta se escribe un /. que hará que la ruta termine con el slash.

La carga de tus componentes los harás llamando a esa ruta que termina con el /.

<a href="" routerLink="/pagina01/.">Página 1</a>
        

En tu main.ts agrega el siguiente código para añadir un slash a los enlaces sin una.

import { Location } from '@angular/common';

const __stripTrailingSlash = (Location as any).stripTrailingSlash;
(Location as any).stripTrailingSlash = function _stripTrailingSlash(url: string): string {
  const queryString$ = url.match(/([^?]*)?(.*)/);
  if (queryString$ && queryString$[2].length > 0) {
    return /[^\/]\/$/.test(queryString$[1]) ? queryString$[1] + '.' + queryString$[2] : __stripTrailingSlash(url);
  }
  return /[^\/]\/$/.test(url) ? url + '.' : __stripTrailingSlash(url);
};
        

Si no entiendes las expresiones reguladas que uso en el código te dejo un artículo donde las explico.

Entiende de una vez las expresiones regulares (regex) 🚀

Deja de copiar expresiones regulares de internet y aprende a crear las tuyas propias

Hasta luego 🖖