SEO Y ANGULAR

Este proyecto consisiterá en crear un Server Side Rendering (SSR) y cómo implementarlo para que nuestra aplicación SPA con Angular pueda ser detectada por la web (SEO) haciendo uso de Angular Universal (@nguniversal/express-engine)

Si necesitas ayuda esta disponible el siguiente video explicativo: https://www.youtube.com/watch?v=J8PDfVY2FfI.

Peligro de SPA con el SEO

La gran ventaja de las aplicaciones SPA(Aplicaciones del lado cliente) es que trabajan en el lado del cliente. Por ejemplo una web creada en el framework de Angular se ejecuta en el cliente, es decir, en el navegador del usuario y no en un servidor remoto. Este tipo aplicaciones web muestran todas las pantallas en una misma página, sin recargar el navegador.

El problema surge con Google. Cuando se rastrea una web; los robots/rastreadores de motores de búsqueda de Google o Yahoo funcionan de forma similar al comando curl. ¿Por qué? Simple, iniciar el navegador y ejecutar JavaScript es una tarea costosa y, por lo tanto, no viable. No hay tiempo ni recursos para hacerlo cuando necesita buscar miles de páginas.

La solución

La solución a este problema es usar @nguniversal/express-engine . Con este módulo podremos utilizar el Server Side Rendering para renderizar el contenido en el servidor y así servirla al usuario completa.

¿Que necesitamos? Para ello necesitamos tener instalado:

• Tener instalado Node y NPM.
• Tener instalado Angular CLI

La importancia de implementar SEO en un proyecto

Es una parte importantísima para cualquier negocio sea pequeño, mediano o grande. El objetivo del SEo es conseguir que visiten nuestra página web o la de nuestra empresa la mayor cantidad de gente posible y para ello se definen una serie de procedimiento y técnias que permitirán tener una mayor repercusión a nuestra web

Hay dos tipos:

• SEO on page: se trata de todo lo que puedes hacer respecto al código de nuestra web para que genere más tráfico y es lo que vamos a ver en esta sección
• TSEO off page: como su nombre indica es todo lo relacionado con tu negocio fuera de tu página, es decir, lo que corresponde a redes sociales, publicidad, etc.

Para obtener estos objetivos, en nuestra aplicación de angular vamos a implementar la siguiente solución:

• El usuario solicita la página.
• La solicitud llega al servidor
• NodeJS genera HTML y lo envía al navegador
• El navegador muestra la vista desde el HTML e inmediatamente la muestra al usuario, simultáneamente se está ejecutando JavaScript
• Cuando JavaScript finaliza el arranque de la aplicación, cambia la vista representada en HTML con la aplicación angular
• El usuario ve una aplicación angular totalmente interactiva

Bueno. Conocemos la teoria. Vamos a practicar ahora.

  ng add @nguniversal/express-engine

Lanzar la aplicación

Para lanzar la aplicación se ejecutan los siguientes comandos:

  npm run build:ssr
  npm run serve:ssr

  curl localhost:4000

      

  public ngOnInit (): void {
  console.log (window.URL);
  }
    

  

    import {Component, Inject, OnInit, PLATFORM_ID} from '@angular/core';
import {isPlatformBrowser} from '@angular/common';
@Component ( {
...

export class xxxxComponent implements OnInit {
    isBrowser;

  constructor(@Inject(PLATFORM_ID) private platformId: object) {
    this.isBrowser = isPlatformBrowser(platformId);
  }
    ngOnInit() {
    if (this.isBrowser) {

      if (document.cookie.indexOf(this.cookie_name + '=1') >= 0) {
    ....
      }

    }
  }
  

Puesta en producción

En mi caso, he decidido utilizar pm2 para ejecutar el servidor, próximamente creare un proyecto explicando como llevar a cabo una puesta en marcha de un proyecto en angular de estas caracteristicas, pero mientras tanto dejo el siguiente comando:

  sudo npm install -g pm2
  

Una vez instalado, tengo que copiar el directorio raiz (por ejemplo, utilizando el comando scp) creado por el comando:

   npm run build:ssr
  

EL directorio raiz es por defector /dist pero depende de la configuración del proyecto. Una vez copiado el directorio, simplemente se genera un fichero con el siguiente código:

  
  // generated by @nguniversal/express-engine
  const port = process.env.PORT || 8590;

  const server = require('./dist/server');

  server.app.listen(port, () => {
  console.log(`Listening on: http://localhost:${port}`);
  });
  
  

Con este fichero creado y el entorno pm2 instalado se ejecuta el siguiente comando:

  pm2 start node filename.js (en mi caso server.js)
  

Y ya tendremos en ejecutación en la url http://xxxx:8590 nuestro Server Side Rendering. Si por ejemplo estamos en un entorno apacher, si añadimos a nuestro archivo .conf del dominio las siguientes tres linea redireccionariamos las peticiones 80 al Server Side Rendering de la siguiente forma:

  

  <VirtualHost www.example.com:80>
    ProxyPreserveHost On
    ProxyRequests Off
    ServerName www.example.com
    ServerAlias example.com
    ProxyPass / http://localhost:8080/
    ProxyPassReverse / http://localhost:8080/
  </VirtualHost>
  
      

Es necesario tener instalado tanto el paquete proxy y proxy_http de apache y configurado.

    sudo a2enmod proxy
    sudo a2enmod proxy_http