Vamos a presentar una introducción a Angular y cómo podemos beneficiarnos de esta tecnología para mejorar nuestros proyectos SEO. Podríamos concretarlo en que es una plataforma de desarrollo para crear aplicaciones web y móviles.
Como dato curioso, recordaremos que el nombre de Angular nace de los paréntesis angulares (<>) utilizados en código HTML.
¿Qué es Angular?
Angular es un framework creado por Google muy utilizado en el desarrollo de aplicaciones web. Podríamos decir que Angular vincula JavaScript con HTML y reduce la cantidad de código a escribir. Es una evolución de AngularJS, aunque son frameworks distintos que no debemos confundir.
Se trata de un framework muy ligero, open source, rápido y completamente adaptado al desarrollo actual Web Front.
Angular utiliza la arquitectura Model, View, Controller (MVC) que podemos explicar en:
- Modelo: la estructura de datos que gestiona la información y recibe las órdenes del controlador.
- Vista: cómo es representada la información.
- Controlador: cómo responde a la entrada e interactúa con el modelo.
En la comunidad de desarrollo hay cierto debate sobre si este framework debería considerarse MVC ya que tiende a llamarse Modelo, Vista, Vista Modelo, debido a la sincronización de datos bidireccional,
Gracias a Angular se pueden crear aplicaciones muy robustas y escalables.
Características y ventajas de Angular
Quizá la principal característica de Angular es que la curva de aprendizaje no es especialmente elevada. Los programadores que ya conocen otros lenguajes como JavaScript, HTML y CSS pueden aprender con facilidad Angular. Si el código se organiza bien, la reutilización es bastante sencilla.
Angular es uno de los lenguajes de programación más extendidos en el desarrollo de aplicaciones web, especialmente en los proyectos de Single Page Application.
Una Single Page Application es una aplicación web que ejecuta todo su contenido en una única página. Pero no debemos confundirla con una página estática ya que una Single Page Application sobreescribe el contenido de manera dinámica en una misma página.
Un ejemplo de este tipo de tecnología que todos conocemos es un servicio de correo electrónico como Gmail. Cuando consultamos nuestro correo electrónico, la página carga una única vez pero de manera dinámica sobreescribe la información, bien con nuevos mensajes entrantes o bien con los eliminados.
Ventajas de Angular
- Los tiempos de desarrollo se reducen gracias a los componentes reutilizables. Además cuenta con una documentación muy detallada.
- El backend y el frontend están divididos y resulta más sencillo hacer cambios de diseño.
- Si renderizamos en el servidor es posible cargar toda la web en caché, ideal para conexiones inestables.
- Se trata de un código Open Source y mantenido por Google. Tener a un gigante de la tecnología detrás genera confianza y los desarrolladores confían en que será mantenido durante bastantes años.
- La comunidad. Como en todos los sistemas de código abierto, lo más importante es la comunidad que activamente la hacen crecer. Comparten nuevas herramientas de terceros o fragmentos de código que puedan ser reutilizados en otros proyectos.
- Vinculación bidireccional de datos. Facilita la sincronización de la vista en el navegador y en el modelo.
- Experiencia de usuario mejorada. La navegación es fluida y el usuario no nota que está siempre en la misma página ya que se va actualizando contenido.
Desventajas de Angular
- El robot de un buscador como Google solo verá el HTML en la primera carga de la web, dejando el JavaScript para la segunda. Esto implica una indexación mucho más lenta al necesitar ese segundo paso.
- Los usuarios deben tener JavaScript habilitado en el navegador (la mayoría de las personas lo tienen disponible).
- Mala velocidad de carga. La mayoría de sitios construidos con tecnología Angular cargan como una pantalla en blanco durante décimas de segundo antes de que se visualice la página. Esto hace que los visitantes cambien a otro sitio web antes de acceder a él.
- Puede ser más inseguro ya que se podría inyectar malware desde el lado del usuario.
- Si el usuario comienza a interactuar antes de que se renderice completamente el html, Angular Universal graba los eventos del usuario para realizarlos cuando la carga ha sido completada.
Angular tiene sus pros y sus contras y solo las necesidades del proyecto deberán hacernos decantarnos por una tecnología u otra. Cuando un equipo se plantea elegir Angular suele valorar realizar el proyecto en React, una tecnología mantenida por Facebook.
¿Cómo se estructura Angular?
Los componentes son la estructura base de una aplicación Angular. Como en la mayoría de frameworks, los componentes pueden albergar a su vez otros componentes. La principal ventaja es la reutilización, así es posible crear un componente que gestione una lista de otros específicos.
Por ejemplo, en una página web que está formada por un encabezado y una lista de artículos, estos serían los dos componentes identificables. Lo ideal es crearlos una única vez y llamarlos cuando sea necesario. Así mantendremos el código limpio y si debemos hacer algún cambio lo realizaremos en un único fichero, un código más fácil de mantener que ayuda a evitar errores.
Los componentes incluyen clases TypeScript. Este lenguaje fue creado por Microsoft y también es open source. Aunque es posible desarrollar aplicaciones Angular solo con JavaScript, si usamos Typescript el código será más estable ya que está compuesto por un conjunto de funcionalidades y mejoras que no están disponibles en JavaScript.
Angular Universal permite renderizar las aplicaciones desarrolladas con Angular en el servidor. Gracias a esta opción podemos crear aplicaciones web que ofrecen grandes ventajas de rendimiento. Se renderizan los archivos HTML y CSS que se muestran a los usuarios, archivos que corresponden al front-end. Con toda la representación gráfica de una página precargada en el servidor, la página cargará más rápido en el navegador del usuario. Si la página cuenta con muchos elementos estáticos HTML, mejoraremos notablemente las Core Web Vitals.
Consejos para asegurar el SEO de páginas con Angular
Crear un sitio amigable para el SEO no siempre es sencillo. Sabemos que el posicionamiento orgánico es una ventaja competitiva en los proyectos digitales. Las arañas de los buscadores obtienen la información de los metadatos de la aplicación web o de los títulos disponibles, entre otros muchos factores. Tenemos que facilitarles el rastreo y los datos para que los lean de la forma más eficiente posible.
Si tenemos alguna duda sobre cómo ve el robot de Google nuestra web, podemos usar nuestro Google Search Console y con el probador de URLs comprobar esa página concreta. Seleccionando “Ver página probada” veremos el código html tal y como lo ve el robot de Google.
Ya conocemos la importancia que tiene una buena experiencia de usuario para el SEO, una página que cargue rápido evitará una alta tasa de abandono (si el usuario encuentra la información que estaba buscando).
Como veremos, hay una serie de puntos a tener en cuenta para el SEO en Angular.
Renderizar en el lado del servidor
Uno de los problemas más frecuentes que se encuentra un consultor SEO son los problemas de indexación de archivos JavaScript. Utilizando Angular Universe se compila todo el código en el lado del servidor para que tanto usuarios como crawlers puedan analizar el sitio.
Recordemos que un proyecto Angular incluye código HTML y JavaScript. La ejecución de JavaScript no puede ser lenta (más aún si se visita desde dispositivos móviles) y los crawlers a veces no lo ejecutan correctamente y terminan leyendo una página en blanco. Si se renderizan los archivos desde el servidor, el contenido se cargará mucho más rápido ya que todo el procesamiento de archivos (HTML y CSS) se habrá realizado en el servidor y solo tendrá que enviar los archivos estáticos al navegador del usuario.
Si el renderizado se hace en el servidor, cuando un crawler llegue a la web podrá interpretar todo el contenido sin ejecutar JavaScript. Una mejora para la velocidad de carga y, por tanto, para la experiencia de usuario.
La gran ventaja para el SEO de este tipo de renderizado es que el contenido estará disponible para las arañas en el momento de visitar la página, no tendrá que esperar a que se carguen los diferentes scripts, leerá un archivo estático HTML.
Incluir meta tags en webs desarrolladas con Angular
Las metaetiquetas sirven para describir el contenido de la página y ayuda a los motores de búsqueda a entender el contexto y la relevancia de la página. El equipo SEO debe trasladar al equipo de desarrollo que la página debe contar con meta tags.
No es una tarea establecida por defecto pero al tratarse de código opensource y de una funcionalidad necesaria para el posicionamiento, es fácil conseguir las librerías que ayuden a su desarrollo.
En primer lugar, es necesario configurar una aplicación Angular Universal. Angular está pensado para mostrarse en el lado del cliente, con Angular Universal se puede forzar ese desarrollo en el lado del servidor.
Una vez completada la configuración, hay que abrir el archivo app/app.component.ts e importar el servicio Angular Meta. Este servicio permite a los desarrolladores de Angular incluir importantes metaetiquetas de SEO, palabras clave, fecha, ventana gráfica y juego de caracteres a la aplicación de Angular, todo lo que necesitamos para ayudarle a los robots a entender el contenido de nuestro sitio web.
Uso de datos estructurados
El uso de datos estructurados (schema.org) ayuda a los motores de búsqueda a entender mejor el contenido de nuestro site. Para implementar este formato de información se puede utilizar el paquete ngx-json-ld, muy fácil de implementar y ligero. Con Angular se pueden renderizar los datos estructurados con el código HTML o en el DOM (estructura de objetos que genera el navegador para los elementos de la página), se recomienda implementarlos en el HTML
Enlazar a urls completas
Si generamos URLS con puntos de anclaje “#” no estarán indexando o no se rastrearán. Estas urls suelen utilizarse para la navegación interna de nuestra página, especialmente para las llamadas desde botones. También pueden crearse por filtros de buscador. Si queremos que las urls se indexen, debemos evitar este tipo de urls e incluir los enlaces para que sean rastreables. Hay que utilizar las etiquetas <a> e incluir el atributo href. Con estas etiquetas Google podrá rastrear los enlaces si se insertan con JavaScript de forma dinámica.
Podemos concluir que la principal ventaja de Angular es el renderizado en el lado del servidor. Para una aplicación estática, Angular no es la mejor opción pero es un framework muy adecuado para renderizar desde el servidor, así la carga será rápida. Permite que la carga sea más rápida, especialmente en dispositivos móviles.
Si tenemos en cuenta los consejos expuestos anteriormente para mejorar el SEO podremos disponer de una aplicación web que pueda posicionar y que solo cuente con los elementos necesarios.