Angular Universal: Cómo hacer renderizado en el servidor para mejorar SEO
El rendimiento y la visibilidad en los motores de búsqueda son fundamentales para el éxito de cualquier aplicación web. En el caso de las aplicaciones basadas en Angular, el renderizado del lado del cliente puede dificultar el rastreo por parte de los motores de búsqueda, lo que afecta negativamente el SEO. Aquí es donde Angular Universal entra en juego, proporcionando una solución de renderizado en el servidor (SSR) que puede mejorar tanto el rendimiento como el SEO de una aplicación Angular.
¿Qué es Angular Universal?
Angular Universal es una tecnología que permite renderizar una aplicación Angular en el servidor antes de enviarla al navegador del cliente. Esto significa que el servidor genera la página HTML completa con todo el contenido, lo que permite que los motores de búsqueda puedan rastrear y clasificar mejor el contenido de la página. Además, mejora la experiencia del usuario al reducir el tiempo de carga inicial.
En un entorno tradicional de Angular, el navegador del usuario descarga el código JavaScript y construye la aplicación en el cliente, lo que puede causar problemas con el SEO y el rendimiento, especialmente en dispositivos móviles o en conexiones lentas. Con Angular Universal, se entrega una versión HTML estática de la página al usuario, lo que permite que los buscadores indexen el contenido correctamente.
Ventajas del uso de Angular Universal para SEO
1. Mejor indexación por parte de motores de búsqueda: Al servir una página completamente renderizada desde el servidor, los motores de búsqueda pueden leer e indexar el contenido sin necesidad de ejecutar JavaScript, lo que mejora la clasificación en los resultados de búsqueda.
2. Reducción del tiempo de carga inicial: Los usuarios reciben un contenido renderizado de inmediato en lugar de esperar a que la aplicación se cargue completamente en el navegador.
3. Mejora en la experiencia del usuario: Una carga más rápida da lugar a una menor tasa de rebote y una mejor interacción por parte del usuario, factores que también influyen en el SEO.
Cómo implementar Angular Universal
El proceso para integrar Angular Universal en una aplicación Angular existente no es complicado, pero requiere seguir una serie de pasos para configurar correctamente el entorno.
Paso 1: Instalar Angular Universal
Lo primero que debes hacer es agregar los paquetes necesarios de Angular Universal a tu proyecto. Para ello, ejecuta el siguiente comando en la terminal de tu proyecto Angular:
ng add @nguniversal/express-engineEste comando añade las dependencias necesarias, incluyendo la integración con Express, que es el servidor por defecto utilizado para el renderizado en el servidor.
Paso 2: Crear un servidor Node.js
Angular Universal utiliza Node.js para ejecutar la aplicación Angular en el servidor. El paquete @nguniversal/express-engine crea automáticamente un archivo de servidor básico para ti. Este archivo se encuentra en server.ts y se configura para servir la aplicación Angular pre-renderizada.
El código básico de este archivo se verá algo así:
import 'zone.js/node';
import { ngExpressEngine } from '@nguniversal/express-engine';
import * as express from 'express';
import { join } from 'path';
const app = express();
const PORT = process.env.PORT || 4000;
const DIST_FOLDER = join(process.cwd(), 'dist/browser');
app.engine('html', ngExpressEngine({ bootstrap: AppServerModule }));
app.set('view engine', 'html');
app.set('views', DIST_FOLDER);
app.get('*.*', express.static(DIST_FOLDER));
app.get('*', (req, res) => {
res.render('index', { req });
});
app.listen(PORT, () => {
console.log(`Server listening on http://localhost:${PORT}`);
});Este archivo configura un servidor Express que sirve la aplicación Angular renderizada en el servidor.
Paso 3: Modificar los scripts de compilación
Para construir la aplicación para el SSR, es necesario configurar dos salidas separadas: una para el cliente y otra para el servidor. Modifica los scripts en tu archivo package.json para incluir los comandos de construcción y ejecución de SSR:
"scripts": {
"build:ssr": "ng build --prod && ng run your-app-name:server",
"serve:ssr": "node dist/server/main.js"
}Esto garantiza que Angular construya dos versiones de la aplicación: una para el navegador y otra para el servidor.
Paso 4: Ejecutar la aplicación en modo SSR
Finalmente, después de construir la aplicación, puedes ejecutarla en modo SSR con el siguiente comando:
npm run serve:ssrEste comando levanta el servidor Express en Node.js y comienza a servir la aplicación Angular pre-renderizada.
Estrategias avanzadas de optimización
Además de implementar Angular Universal, hay varias estrategias que pueden mejorar aún más el SEO y el rendimiento de tu aplicación:
1. Precarga de módulos
La precarga de módulos es una técnica en Angular que permite cargar módulos de manera anticipada para mejorar el rendimiento general de la aplicación. Esta técnica es especialmente útil cuando se usa con Angular Universal, ya que reduce el tiempo necesario para mostrar contenido interactivo.
Puedes habilitar la precarga de módulos en tu aplicación Angular de la siguiente manera:
RouterModule.forRoot(routes, { preloadingStrategy: PreloadAllModules })2. Cacheo de contenido estático
El cacheo de las respuestas del servidor puede mejorar la velocidad con la que los usuarios reciben las páginas renderizadas. Utilizando soluciones como Redis o memcached para almacenar en caché el HTML pre-renderizado, puedes reducir la carga en el servidor y mejorar la experiencia del usuario.
3. Uso de metadatos dinámicos
Angular Universal permite modificar dinámicamente las etiquetas meta (como el título, descripción y palabras clave) en función de la ruta actual. Esto es crucial para el SEO porque proporciona a los motores de búsqueda información relevante sobre cada página.
Para lograr esto, Angular proporciona el servicio Meta y Title, que puedes utilizar para actualizar las etiquetas meta dinámicamente:
import { Meta, Title } from '@angular/platform-browser';
constructor(private meta: Meta, private title: Title) {}
ngOnInit() {
this.title.setTitle('Título dinámico para SEO');
this.meta.updateTag({ name: 'description', content: 'Descripción dinámica para SEO' });
}Conclusión
Implementar Angular Universal es una estrategia poderosa para mejorar el SEO y la experiencia del usuario en aplicaciones Angular. Al aprovechar el renderizado en el servidor, puedes asegurarte de que tu aplicación sea accesible tanto para los motores de búsqueda como para los usuarios con conexiones lentas o dispositivos menos potentes.
Con la integración correcta de Angular Universal, no solo mejorarás la clasificación de tu sitio en los motores de búsqueda, sino que también ofrecerás una experiencia más rápida y fluida a tus usuarios.
Jorge García
Fullstack developer