Mejora el SEO de tu aplicación con Angular 4 (Universal + Angular CLI)

Contenido:

📋 Tabla de contenido:

1. Introducción
2. ¿Qué es Angular Universal?
3. Beneficios de hacer que tu aplicación Angular sea amigable para los motores de búsqueda
4. Instalación de Angular Universal en tu aplicación
5. Configuración de Angular Universal
6. Creación del módulo de la aplicación del servidor
7. Creación del servidor Express
8. Configuración de las opciones de compilador de Angular
9. Ejecución de la aplicación Angular Universal

1. Introducción

¡Hola a todos! En este artículo, vamos a abordar un tema que ha sido un dolor de cabeza para muchos desarrolladores de Angular, incluyéndome a mí mismo. Estoy hablando de cómo hacer que tu aplicación Angular sea amigable para los motores de búsqueda utilizando Angular Universal. Si has estado luchando con el SEO en tus aplicaciones Angular, no te preocupes, ¡estás en el lugar correcto! A lo largo de este artículo, te guiaré paso a paso en el proceso de configurar Angular Universal en tu aplicación y te mostraré cómo aprovechar sus beneficios para mejorar la clasificación de tu sitio web en los motores de búsqueda.

2. ¿Qué es Angular Universal?

Angular Universal es una biblioteca que te permite realizar la renderización del lado del servidor (server-side rendering, SSR) en tus aplicaciones Angular. Esto significa que Angular Universal genera y envía HTML completamente rendereizado desde el servidor al cliente antes de que el JavaScript se cargue y se ejecute. Esto es altamente beneficioso para el SEO, ya que los motores de búsqueda pueden rastrear y indexar adecuadamente tu contenido, lo que puede mejorar significativamente la clasificación de tu sitio web.

3. Beneficios de hacer que tu aplicación Angular sea amigable para los motores de búsqueda

Hacer que tu aplicación Angular sea amigable para los motores de búsqueda utilizando Angular Universal tiene numerosos beneficios. A continuación, se enumeran algunos de los principales:

✅ Mejor clasificación en los motores de búsqueda: Al permitir que los motores de búsqueda accedan y comprendan todo el contenido de tu sitio web, es más probable que tu sitio aparezca en los resultados de búsqueda relevantes.

✅ Mejor experiencia de usuario: Al mostrar el contenido renderizado en el servidor antes de que se cargue el JavaScript, los usuarios pueden acceder rápidamente al contenido principal de tu sitio web, lo que mejora la experiencia general del usuario.

✅ Mayor visibilidad en las redes sociales: Al tener URL limpias y contenido accesible para los motores de búsqueda, se mejora la forma en que se comparte tu contenido en las redes sociales, lo que aumenta su visibilidad y alcance.

4. Instalación de Angular Universal en tu aplicación

Antes de comenzar, asegúrate de tener la última versión de Angular instalada en tu máquina. Si no lo has hecho todavía, puedes instalarlo utilizando el siguiente comando:

npm install -g @angular/cli

Una vez que hayas instalado Angular, estás listo para comenzar con la instalación de Angular Universal en tu aplicación. Asegúrate de estar ubicado en la carpeta raíz de tu proyecto y ejecuta el siguiente comando:

ng add @nguniversal/express-engine --clientProject [nombre-de-tu-proyecto]

Sustituye [nombre-de-tu-proyecto] por el nombre de tu proyecto real.

5. Configuración de Angular Universal

Después de haber instalado Angular Universal en tu aplicación, necesitarás realizar algunas configuraciones adicionales para que funcione correctamente. A continuación, se detallan los pasos a seguir:

Paso 1: Añadir el módulo ServerModule en tu AppModule

En el archivo app.module.ts, importa el módulo ServerModule de @angular/platform-server y añádelo en los imports de tu AppModule. Esto permitirá que Angular Universal interactúe con tu aplicación correctamente. Asegúrate de que tu archivo app.module.ts se vea así:

import { NgModule } from '@angular/core';
import { ServerModule } from '@angular/platform-server';
import { AppModule } from './app.module';
import { AppComponent } from './app.component';

@NgModule({
  imports: [
    AppModule,
    ServerModule
  ],
  bootstrap: [AppComponent]
})
export class AppServerModule { }

Paso 2: Crear el archivo server.ts

El siguiente paso es crear un archivo server.ts en la carpeta raíz de tu proyecto. Este archivo será el punto de entrada para el servidor Express que utilizará Angular Universal para generar y enviar las páginas HTML renderizadas.

import 'zone.js/dist/zone-node';
import 'reflect-metadata';
import { renderModuleFactory } from '@angular/platform-server';
import { enableProdMode } from '@angular/core';
import * as express from 'express';
import { join } from 'path';
import { readFileSync } from 'fs';

const PORT = process.env.PORT || 4000;
const DIST_FOLDER = join(process.cwd(), 'dist');

enableProdMode();

const app = express();

const template = readFileSync(join(DIST_FOLDER, 'browser', 'index.html')).toString();

const { AppServerModuleNgFactory } = require('./dist/server/main');

app.engine('html', (_, options, callback) => {
  renderModuleFactory(AppServerModuleNgFactory, {
    document: template,
    url: options.req.url
  }).then(html => {
    callback(null, html);
  });
});

app.set('view engine', 'html');
app.set('views', join(DIST_FOLDER, 'browser'));

app.use(express.static(join(DIST_FOLDER, 'browser'), { index: false }));

app.get('*', (req, res) => {
  res.render('index', { req });
});

app.listen(PORT, () => {
  console.log(`Servidor Express en funcionamiento en el puerto ${PORT}`);
});

6. Creación del módulo de la aplicación del servidor

El siguiente paso es crear el módulo de la aplicación del servidor que se utilizará para iniciar tu aplicación Angular en el servidor. Este módulo se diferencia del módulo de la aplicación principal, ya que se configura específicamente para el entorno del servidor. A continuación, se muestra cómo puedes crear el módulo de la aplicación del servidor:

1. Crea un nuevo archivo llamado app.server.module.ts en la misma carpeta que el archivo app.module.ts.
2. Copia y pega el siguiente código en el archivo app.server.module.ts:

import { NgModule } from '@angular/core';
import { ServerModule } from '@angular/platform-server';
import { AppModule } from './app.module';
import { AppComponent } from './app.component';

@NgModule({
  imports: [
    AppModule,
    ServerModule
  ],
  bootstrap: [AppComponent]
})
export class AppServerModule { }

El módulo del servidor importa tanto el módulo principal de la aplicación como el módulo del servidor ServerModule. Asegúrate de que los nombres de los archivos y las clases sean correctos en tu aplicación.

7. Creación del servidor Express

Una vez que hayas configurado el módulo de la aplicación del servidor, necesitarás crear un servidor Express para ejecutar tu aplicación Angular en el servidor. A continuación, se muestra cómo puedes hacerlo:

1. Crea un nuevo archivo llamado server.ts en la raíz de tu proyecto Angular.
2. Copia y pega el siguiente código en el archivo server.ts:

import 'zone.js/dist/zone-node';
import 'reflect-metadata';
import { renderModuleFactory } from '@angular/platform-server';
import { enableProdMode } from '@angular/core';
import * as express from 'express';
import { join } from 'path';
import { readFileSync } from 'fs';

const PORT = process.env.PORT || 4000;
const DIST_FOLDER = join(process.cwd(), 'dist');

enableProdMode();

const app = express();

const template = readFileSync(join(DIST_FOLDER, 'browser', 'index.html')).toString();

const { AppServerModuleNgFactory } = require('./dist/server/main');

app.engine('html', (_, options, callback) => {
  renderModuleFactory(AppServerModuleNgFactory, {
    document: template,
    url: options.req.url
  }).then(html => {
    callback(null, html);
  });
});

app.set('view engine', 'html');
app.set('views', join(DIST_FOLDER, 'browser'));

app.use(express.static(join(DIST_FOLDER, 'browser'), { index: false }));

app.get('*', (req, res) => {
  res.render('index', { req });
});

app.listen(PORT, () => {
  console.log(`Servidor Express en funcionamiento en el puerto ${PORT}`);
});

El servidor Express utilizado en Angular Universal se encarga de renderizar la aplicación Angular en el servidor y enviar las páginas HTML generadas al cliente. Asegúrate de tener los paquetes y las dependencias necesarias instaladas correctamente en tu proyecto antes de ejecutarlo.

8. Configuración de las opciones de compilador de Angular

Una vez que hayas configurado el servidor Express, necesitarás realizar algunos ajustes en las opciones de compilador de Angular para que tu aplicación funcione correctamente con Angular Universal. A continuación, se detallan los pasos a seguir:

Paso 1: Configuración de tsconfig.app.json

Abre el archivo tsconfig.app.json ubicado en la raíz de tu proyecto y agrega la siguiente configuración:

{
  "extends": "../tsconfig.json",
  "compilerOptions": {
    "outDir": "../out-tsc/app",
    "baseUrl": "./",
    "module": "es2015",
    "types": []
  },
  "exclude": [
    "test.ts",
    "**/*.spec.ts"
  ],
  "include": [
    "**/*.ts"
  ]
}

La configuración anterior configurará las opciones del compilador de TypeScript para tu aplicación Angular. Asegúrate de guardar los cambios antes de continuar.

Paso 2: Configuración de tsconfig.json

Abre el archivo tsconfig.json ubicado en la raíz de tu proyecto y agrega la siguiente configuración:

{
  "extends": "./tsconfig.app.json",
  "compilerOptions": {
    "outDir": "./out-tsc/app",
    "types": []
  },
  "include": [
    "src/**/*.d.ts"
  ]
}

La configuración anterior permitirá que el compilador de TypeScript reconozca y compile correctamente los archivos de tu aplicación Angular. Asegúrate de guardar los cambios antes de continuar.

9. Ejecución de la aplicación Angular Universal

¡Felicidades! Ahora estás listo para ejecutar tu aplicación Angular utilizando Angular Universal. Asegúrate de que todos los ajustes y configuraciones se hayan realizado correctamente antes de continuar. Para ejecutar tu aplicación, sigue estos pasos:

1. Abre una terminal o línea de comandos en la carpeta raíz de tu proyecto Angular.
2. Ejecuta el siguiente comando para compilar tu aplicación:

ng build --prod

3. Una vez que la compilación se haya completado sin errores, ejecuta el siguiente comando para iniciar tu aplicación Angular Universal:

npm run start:ssr

4. Después de unos segundos, deberías ver un mensaje que indica que el servidor Express está en funcionamiento en un puerto específico. Puedes acceder a tu aplicación Angular Universal visitando http://localhost:<puerto> en tu navegador web.

¡Y eso es todo! Ahora tu aplicación Angular es amigable para los motores de búsqueda gracias a Angular Universal. Asegúrate de realizar pruebas exhaustivas para verificar que todo funcione correctamente.

✅ Pros:

• Mejora la clasificación de tu sitio web en los motores de búsqueda
• Proporciona una mejor experiencia de usuario al mostrar el contenido renderizado del lado del servidor antes de que se ejecute el JavaScript
• Aumenta la visibilidad en las redes sociales al tener URL limpias y contenido accesible para los motores de búsqueda

❌ Contras:

• Requiere una configuración adicional y puede llevar tiempo implementar Angular Universal en una aplicación existente.

¡Espero que esta guía te haya sido útil! Si deseas aprender más sobre Angular y cómo hacer que tus aplicaciones sean amigables para los motores de búsqueda, asegúrate de visitar mi sitio web curso.com donde encontrarás una variedad de cursos gratuitos y de pago sobre diseño y desarrollo moderno.

Recuerda suscribirte a mi canal de YouTube para recibir más tutoriales y contenido relacionado con Angular. ¡Hasta luego!

Preguntas frecuentes

❓ ¿Qué es Angular Universal?

Angular Universal es una biblioteca que permite la renderización del lado del servidor en aplicaciones Angular. Proporciona la capacidad de generar y enviar HTML completamente rendereizado desde el servidor antes de que se cargue y ejecute el JavaScript en el lado del cliente.

❓ ¿Por qué es importante hacer que tu aplicación Angular sea amigable para los motores de búsqueda?

Hacer que tu aplicación Angular sea amigable para los motores de búsqueda mejora la clasificación de tu sitio web en los resultados de búsqueda. Al permitir que los motores de búsqueda accedan y comprendan todo el contenido de tu aplicación, es más probable que aparezca en los resultados de búsqueda relevantes para tus usuarios.

❓ ¿Cómo puedo configurar Angular Universal en mi aplicación Angular existente?

Para configurar Angular Universal en tu aplicación Angular existente, debes seguir algunos pasos clave, como instalar las dependencias necesarias, configurar el módulo del servidor, crear el servidor Express y realizar ajustes en las opciones de compilador de Angular. Puedes seguir nuestra guía paso a paso anterior para obtener instrucciones detalladas sobre cómo hacerlo.

❓ ¿Cuáles son los beneficios de Angular Universal?

Los beneficios de utilizar Angular Universal incluyen una mejor clasificación en los motores de búsqueda, una mejora en la experiencia de usuario al mostrar contenido renderizado desde el servidor y una mayor visibilidad en las redes sociales debido a URL limpias y contenido accesible para los motores de búsqueda.

❓ ¿Es necesario utilizar Angular Universal en todas las aplicaciones Angular?

No es necesario utilizar Angular Universal en todas las aplicaciones Angular. Si tu aplicación no requiere un alto rendimiento en términos de SEO o si no necesitas renderizar contenido específico desde el servidor antes de cargar el JavaScript, es posible que Angular Universal no sea necesario. Sin embargo, si deseas mejorar la clasificación de tu sitio web en los motores de búsqueda y proporcionar una experiencia de usuario más rápida, Angular Universal puede ser una excelente opción.

Recursos:

• Angular Universal
• Angular SEO: Making your Angular app discoverable by search engines