Angular & SEO – Making Angular 6 Single-Page Web Apps Search-Engine Friendly

En el siguiente tutorial vamos a echar un vistazo al enfoque más fácil que está disponible para deshacerse de esa limitación para su aplicación Angular 6 mediante el uso de renderizado del lado del servidor con Angular Universal.

Para empezar vamos a configurar primero una nueva aplicación Angular en los siguientes pasos.

Para configurar una nueva aplicación Angular estamos utilizando Angular CLI. Para instalar Angular CLI en tu sistema utiliza el Node.js Package Manager de la siguiente manera en tu línea de comandos:

$ npm install -g @angular/cli

Habiendo instalado Angular CLI con éxito es posible utilizar el nuevo comando ng para configurar un nuevo proyecto Angular desde cero:

$ ng new ngseo --routing

Con la opción new estamos diciendo que se cree un nuevo proyecto de Angular, ngseo es el nombre del nuevo proyecto y al usar la opción – routing nos aseguramos de que también se añada una configuración básica de routing al proyecto.

Una vez que el proyecto ha sido configurado con éxito somos capaces de cambiar a la carpeta del proyecto recién creado:

$ cd ngseo

Y arrancar el servidor web de desarrollo mediante el uso de Angular CLI de nuevo de la siguiente manera:

$ ng serve -o

Ahora debería ser capaz de ver el siguiente resultado en el navegador:

Cómo ven los rastreadores las aplicaciones web de una sola página

Ahora que tenemos una aplicación Angular en funcionamiento vamos a explorar cómo ven los rastreadores de los buscadores nuestro sitio web. Estamos recibiendo una buena impresión cuando estamos utilizando la herramienta de línea de comandos curl para acceder a nuestro sitio:

$ curl localhost:4200

El resultado que está recibiendo de vuelta debe ser similar a la siguiente:

Aquí puedes ver que el contenido principal de la web no forma parte de ese documento HTML. En su lugar encontrarás el elemento placeholder <app-root> dentro de la sección body. Esto es muy Angular está insertando el contenido del sitio web cuando se ejecuta el código JavaScript del lado. Sin embargo, el rastreador no es capaz de ver ese contenido porque el código JavaScript no se ejecuta.

Angular Universal For Server-Side Rendering

Entonces, ¿cuál podría ser una solución para ese problema? Sí, es el renderizado del lado del servidor (SSR). Cuando se realiza el renderizado del lado del servidor, el código JavaScript de la aplicación Angular ya se ejecuta en el servidor y la estructura HTML completa y el contenido estarán disponibles también para los rastreadores web.

La tecnología que permite el renderizado del lado del servidor para las aplicaciones Angular se llama Angular Universal. Angular Universal genera páginas de aplicaciones estáticas en el servidor a través de un proceso llamado renderización del lado del servidor.

Una descripción detallada de cómo utilizar Angular Universal está disponible en https://angular.io/guide/universal. Sin embargo, existe otro enfoque que hace que añadir Angular Universal sea muy sencillo: utilizar el paquete @ng-toolkit/universal.

Añadir Angular Universal con @ng-toolkit/universal Para que tu aplicación Angular sea amigable con el motor de búsqueda

El paquete @ng-toolkit/universal se añade a nuestro proyecto usando el comando ng una vez más de la siguiente manera:

$ ng add @ng-toolkit/universal

Después de haber añadido el paquete, abre package.json y asegúrate de que el paquete webpack-cli aparece en la sección de dependencias con al menos la versión 3.1:

"webpack-cli": "^3.1.0"

Si no es así cambia esta entrada en consecuencia y ejecuta el siguiente comando:

$ npm install

A continuación, en lugar de ejecutar ng serve -o ejecuta:

$ npm run build:prod

y

$ npm run server

El servidor se inicia en localhost:8080 y si estás accediendo a esa URL en el navegador deberías poder ver de nuevo la web de la aplicación angular por defecto.

Vamos a probar a acceder de nuevo a la web mediante curl:

$ curl localhost:8080

La salida debería ser ahora como la que puedes ver en la siguiente captura de pantalla:

Esta vez se incluye el contenido completo del sitio HTML. El motivo es que la parte HTML se ha renderizado como parte del proceso de construcción (del lado del servidor) y ahora está disponible sin necesidad de ejecutar código JavaScript del lado del cliente. Por lo tanto, un rastreador de un motor de búsqueda es capaz de encontrar el contenido del lado y puede asegurarse de que se añade a los resultados de búsqueda correctamente.

Conclusión

Por defecto Angular utiliza el renderizado del lado del cliente que es un problema cuando su sitio web debe aparecer en los resultados del motor de búsqueda. La solución es renderizar la aplicación del lado del servidor y generar elementos HTML finales que los rastreadores de los motores de búsqueda puedan interpretar fácilmente.

La renderización del lado del servidor para las aplicaciones de Angular se puede lograr con Angular Universal. Añadir Angular Universal a tu aplicación Angular existente es muy fácil utilizando el paquete @ng-toolkit/universal.

Este post ha sido publicado primero en CodingTheSmartWay.com.

#1 Angular 6 – The Complete Guide

Master Angular (Angular 2+, incl. Angular 6) y construir aplicaciones web impresionantes y reactivas con el sucesor de Angular.js
Ir al curso …

Descargo de responsabilidad: Este post contiene enlaces de afiliados, lo que significa que si haces clic en uno de los enlaces de productos, recibiré una pequeña comisión. Esto ayuda a mantener este blog!