El marco Angular es un marco estructural basado en javascript para aplicaciones web. Se utiliza para crear páginas web dinámicas con contenido generado a través de servicios web. El marco Angular es muy fácil de usar para desarrolladores. Ha existido durante varios años y ha acumulado una sólida comunidad de herramientas y utilidades, incluidas herramientas Angular CMS, marcos de backend y más.

El ecosistema Angular

Las aplicaciones creadas con el marco Angular se denominan Aplicaciones de página única (SPAs) debido a la forma en que funcionan. Una aplicación Angular, una vez cargada, renderiza otras páginas dinámicamente sin volver a cargar las páginas web de nuevo. Esta experiencia se entrega con la potencia del framework javascript Angular. Modifica dinámicamente las páginas ejecutando código javascript o cargando solo el contenido requerido. Esto le da al usuario una experiencia fluida sin esperar a que ocurra una recarga. Sin embargo, los sitios Angulares pueden sufrir efectos adversos en su optimización de motores de búsqueda (SEO).

En este artículo, explicamos cómo las aplicaciones de Angular necesitan un tratamiento SEO especial, y proporcionamos algunas instrucciones de implementación específicas para facilitar un buen SEO Angular.

Comprensión de los rastreadores de motores de búsqueda y SEO

Antes de abordar la solución, entendamos cómo funcionan realmente los rastreadores de motores de búsqueda (o bots). Los motores de búsqueda de todo el mundo rastrean sus sitios web para comprender las páginas y el objetivo final de su negocio. Para ello, los rastreadores leen los metadatos de las páginas, como el título, la descripción, las etiquetas de imagen y las categorías. Estos metadatos deben ser diferentes para cada página para permitir que los motores de búsqueda comprendan la intención de cada página.

Resultados tradicionales del rastreador de búsqueda SEO

Un bot de motor de búsqueda llega a una página específica, encuentra los hipervínculos en la página, lee los metadatos en la página y comienza a recorrer los hipervínculos. Se repite este proceso en su sitio web hasta que no pueda encontrar nuevos vínculos. Durante este proceso, el bot descarga el contenido estático de su sitio web y entiende la página. Por lo tanto, es importante maximizar los detalles de cada página en los metadatos y el contenido estático.

Nuestro CMS Angular permite contenido dinámico que sus especialistas en marketing pueden actualizar.

El SEO se ha convertido en una de las inversiones más importantes para cualquier negocio en línea hoy en día. En el pasado, las aplicaciones web que se estaban desarrollando eran bastante simples y contenían en su mayoría páginas estáticas. Estas páginas contenían toda la información requerida pre-codificada en ellas. A medida que evolucionó el desarrollo de aplicaciones web, entramos en una era de renderizado de contenido dinámico en la que el contenido de las páginas web se almacena en algún lugar y se obtiene según sea necesario.

Hay dos formas de hacer esto:

  1. Renderizado del lado del servidor
  2. Renderizado del lado del cliente

Debido a la falta de marcos sofisticados de renderizado del lado del cliente en el pasado, el renderizado del lado del servidor de las páginas era la tendencia. Había numerosos lenguajes y marcos para manejar lo mismo. Por ejemplo, PHP, Java Spring, NodeJS con Manillares y otros frameworks renderizan las páginas por adelantado y envían solo el contenido HTML simple al frontend.

Este enfoque garantiza que la página tenga las etiquetas meta correctas y todo el contenido renderizado antes de que sea recibido por el rastreador del motor de búsqueda. Por lo tanto, las aplicaciones web convencionales eran prácticamente simples cuando se trataba de SEO. Sin embargo, seguramente tenían un inconveniente de tiempos de carga más largos. Con servidores de gama baja, procesar miles de solicitudes de páginas se volvió difícil. Esto trajo a la imagen marcos de interfaz como Angular.

SEO para Aplicaciones de una sola página (SPAs)

Una aplicación de una sola página es un concepto en el que el diseño base de la aplicación se carga solo una vez y el resto de las páginas y componentes se cargan solo según sea necesario. Esto es posible gracias a la potencia de Javascript que decide dinámicamente qué contenido se requiere, obtiene los datos y los renderiza en el formato deseado.

Nuestro CMS Angular permite contenido dinámico que sus especialistas en marketing pueden actualizar.

Beneficios de una aplicación de una sola página

Debido a su naturaleza dinámica, una aplicación de una sola página tiene muchos beneficios inherentes asociados a ella. Algunos de ellos se enumeran a continuación:

  • Tiempo de transición más rápido una vez que la aplicación se ha cargado
  • Experiencias más fluidas en comparación con una aplicación web convencional
  • Menos carga en el servidor web que procesa las páginas
  • Tiempo de desarrollo más rápido con marcos sofisticados como Angular

A pesar de estos beneficios, un desafío importante con las aplicaciones de una sola página es el SEO.

Retos de SEO de Angular

Según se entiende, Angular no recarga las páginas a menos que se lo pida explícitamente. Angular admite el cambio de metadatos para las páginas de forma dinámica, pero depende completamente de JavaScript. Como se mencionó anteriormente, los rastreadores de motores de búsqueda no suelen entretener a Javascript. Esto puede hacer que las aplicaciones de Angular fallen al renderizar el contenido o los metadatos correctos.

Angular SEO - Resultados del rastreador de motores de búsqueda

Sin embargo, a lo largo de los años, Angular SEO ha evolucionado y la comunidad ha traído una solución para evitarlo. La solución nos permite crear páginas estáticas de Angular páginas. Estas páginas estáticas contienen los metadatos correctos y el contenido pre-renderizado. Más adelante en este artículo, profundizaremos en este proceso para comprender los desafíos involucrados e implementar tácticas para optimizar el SEO Angular.

Angular SEO: Desarrollo de páginas fáciles de buscar

Antes de comenzar a construir una solución de Angular SEO que funcione, comencemos por crear una aplicación Angular JS en blanco.

ng new seo-friendly-app

El comando crea una nueva aplicación Angular JS donde crearemos una página de inicio y una página de blog simples, renderizaremos contenido en la página de blog usando las API de ButterCMS y las haremos amigables con el SEO.

Comencemos creando páginas y rutas para las mismas. Ejecute los siguientes comandos en el terminal para crear sus páginas de inicio y blog.

ng g c pages/home --skipTests=trueng g c pages/blog --skipTests=true

Esto creará los componentes y los importará a la aplicación.módulo.archivo ts. Ahora, agregue las páginas al módulo de enrutamiento para permitirnos enrutar a estas páginas. Modifica el enrutamiento de tu aplicación.módulo.archivo ts.

import { NgModule } from '@angular/core';import { Routes, RouterModule } from '@angular/router';import { HomeComponent } from './pages/home/home.component';import { BlogComponent } from './pages/blog/blog.component';const routes: Routes = ;@NgModule({ imports: ,exports: })export class AppRoutingModule { }

El código anterior asigna los componentes respectivos con sus rutas y establece HomeComponent como componente predeterminado. Ahora, modifica la aplicación.componente.archivo html para contener una sola línea de código.

<router-outlet></router-outlet>

Por último, ejecute la aplicación con el siguiente comando y compruebe que la aplicación está configurada correctamente. Una vez que el comando se ejecuta, puede presionar la URL localhost:4200 para asegurarse de que las cosas estén bien configuradas. Deberías ver el texto » home works!».

ng serve

Ahora agreguemos un encabezado que nos permita navegar por las páginas. Cree un componente de encabezado con el siguiente comando.

ng g c header --skipTests=true

A continuación, modifique el contenido del encabezado.componente.html para contener los elementos de navegación.

<div><a ="">Home</a></div><div><a ="">Blog</a></div>

Finalmente, tienes una aplicación completa donde tienes dos páginas y una navegación simple sin estilo que te permite moverte entre las páginas. Ahora, analicemos esta aplicación desde una perspectiva SEO. Haga clic derecho en el navegador y seleccione «Ver fuente de página». Deberías poder ver cómo los rastreadores de motores de búsqueda verían tu página sin Javascript. El código se parece al siguiente fragmento.

<!doctype html><html lang="en"><head> <meta charset="utf-8"> <title>SeoFriendlyApp</title> <base href="/"> <meta name="viewport" content="width=device-width, initial-scale=1"> <link rel="icon" type="image/x-icon" href="favicon.ico"></head><body> <app-root></app-root><script src="runtime.js" type="module"></script><script src="polyfills.js" type="module"></script><script src="styles.js" type="module"></script><script src="vendor.js" type="module"></script><script src="main.js" type="module"></script></body></html>

Ahora, vaya a la página del blog y realice la misma acción y observe el contenido de la página. Es similar. Esto incluye el título de la página, así como el cuerpo. Esto se debe a que Angular modifica su DOM mediante javascript.

Creando páginas dinámicas

Por este medio, logramos implementar esto en las páginas estáticas. Ahora rendericemos nuestros blogs y página de contenido de blog usando la API ButterCMS. Esto nos permitirá realizar SEO en contenido web estático y dinámico. Antes de comenzar con él, registre una cuenta de prueba gratuita con ButterCMS para poder crear contenido dinámico fácilmente.

Para hacer esto, instalemos el complemento ButterCMS usando NPM.

npm install --save buttercms

Una vez instalado, vamos a crear un archivo de servicio en la ruta de acceso services / butterCMS.Servicio.ts y poner el contenido a continuación dentro del archivo.

import * as Butter from 'buttercms';export const butterService = Butter('your_api_token');

Reemplace su token en el código anterior. Este archivo de servicio garantiza que el token se administre globalmente en un solo archivo. Podemos importar este archivo donde sea que necesitemos usar los servicios ButterCMS. Ahora, implementemos rápidamente el siguiente código en el blog.componente.archivo ts para obtener una lista de publicaciones.

import { Component, OnInit } from '@angular/core';import { butterService } from '../../services/butter-cms.service';@Component({ selector: 'app-blog', templateUrl: './blog.component.html', styleUrls: })export class BlogComponent implements OnInit { posts:any; constructor() { this.fetchPosts(); } private fetchPosts() { butterService.post.list({ page: 1, page_size: 10 }) .then((res) => { console.log('Content from ButterCMS'); console.log(res); this.posts = res.data.data; }); } ngOnInit() { }}

Ahora, vaya al navegador e inspeccione la salida de la consola en la consola. Deberías poder ver la lista de tus publicaciones en la consola del navegador. Como puedes ver en el fragmento de código a continuación, esto demuestra dos de las publicaciones que he creado para este tutorial.

Ahora, rendericemos este contenido en la página del blog. Para hacerlo, actualiza tu blog.componente.archivo html con el siguiente código:

<div *ngIf="posts!=undefined"><div *ngFor="let post of posts.data"> <hr> <h1>{{post.title}}</h1> <div ="post.body"></div></div></div> 

Esto renderizará las publicaciones de su plataforma ButterCMS en la página web. Ahora vamos a entender cómo establecer un título personalizado y etiquetas meta para cada página.

Configuración de etiquetas de título y meta para Angular SEO

Angular entiende este problema y ya tiene una solución para esto. Para agregar metadatos y modificar el título de la página dinámicamente, todo lo que necesita hacer es utilizar estos módulos de Angular. Actualice el código de su hogar.componente.archivo ts con el siguiente. Realiza cambios similares en tu blog.componente.ts también.

import { Component, OnInit } from '@angular/core';import { Meta,Title } from '@angular/platform-browser';@Component({ selector: 'app-home', templateUrl: './home.component.html', styleUrls: })export class HomeComponent implements OnInit { constructor(private meta: Meta,private title: Title) { this.meta.addTags(); this.setTitle('Home Page'); } public setTitle( newTitle: string) { this.title.setTitle( newTitle ); } ngOnInit() { }}

Una vez que se guardan estos cambios, observe el título en la pestaña del navegador. Cambia dinámicamente a medida que navega por las páginas. Además, si inspecciona el código en la consola del navegador, verá que también se han adjuntado los metadatos correspondientes. Sin embargo, si marca la fuente de página, el contenido sigue siendo el mismo. Esto significa que si se permite Javascript, podemos generar un título y meta dinámicos, pero no sin ellos.

Por lo tanto, necesitamos una forma de tomar el contenido de esta página renderizada y enviarlo al usuario. Este proceso se denomina pre-renderizado del contenido, y es fundamental para lograr un buen SEO Angular. Hay varios métodos para realizar el pre-renderizado. En la siguiente sección, exploraremos uno de ellos.

Entender la necesidad de pre-renderizado

Pre-renderizado esencialmente significa que el contenido HTML de la página se compilaría de antemano. Esto aseguraría que el título y los metadatos de la página estén presentes cuando llegue al lado del cliente. Con el pre-renderizado, podemos exponer el contenido HTML final al rastreador en lugar de exponer HTML en blanco.

Implementación de pre-renderizado para aplicaciones de Angular

Con las actualizaciones de Angular, ahora viene con una solución estandarizada para pre-renderizado también. El proceso es bastante simple. Aprovecharíamos el paquete Angular Universal para admitir la representación previa de las páginas. Para agregar el paquete Angular universal, ejecute el siguiente comando con el nombre del proyecto que utilizó al crear la aplicación Angular.

ng add @nguniversal/express-engine --clientProject seo-friendly-app

Esto crea algunos archivos dentro del proyecto y configurar su proyecto de apoyo a la pre-procesamiento con un servidor NodeJS. Para ejecutar esto, ejecute el siguiente comando.

npm run build:ssr && npm run serve:ssr

Este comando compila, construye sus páginas estáticas, las coloca en la carpeta dist y las sirve ejecutando un servidor NodeJS. Con esto, hemos mejorado enormemente nuestro SEO Angular al asegurarnos de que nuestra aplicación se construya de manera amigable con el SEO y que todo su contenido se renderice dinámicamente.

Validar su SPA Angular amigable para SEO

Para validar la implementación, puede ir al navegador y ver la fuente de página de cada página. Ahora, podrá ver que el navegador renderiza el contenido HTML exacto como esperaría. Con esto, establecimos nuestra implementación de un blog simple sin estilo con una representación amigable para SEO en Angular framework. Con ButterCMS, puedes hacer mucho más, como buscar dinámicamente las etiquetas SEO, las meta descripciones e incluso el contenido de la página en sí. Consulte nuestra documentación de API Angular para obtener más información.

Regístrese para recibir artículos y tutoriales sobre SEO Angular.

Deja una respuesta

Tu dirección de correo electrónico no será publicada.