Configura el SEO de Angular 6 en segundos. ¡Te enseño cómo!
Contenidos:
1. Introducción a SEO y Angular
2. Configuración inicial de Angular
3. Creación de un nuevo proyecto Angular
4. Instalación de Angular CLI
5. Agregar enrutamiento a la aplicación Angular
6. Creación de componentes en Angular
7. Configuración de la optimización para SEO
8. Integración de Angular Universal
9. Solución de problemas comunes
10. Conclusiones
Introducción a SEO y Angular
🔍🌐 Si estás interesado en mejorar la visibilidad de tu sitio web en los motores de búsqueda, como Google, y al mismo tiempo estás utilizando Angular para desarrollar tu aplicación, estás en el lugar correcto. En este artículo, aprenderás cómo optimizar tu proyecto de Angular para aplicaciones SEO-friendly.
👉Es bien sabido que los motores de búsqueda no pueden ver ni interpretar el contenido generado por JavaScript, lo cual puede ser un problema para las aplicaciones desarrolladas con Angular, ya que se basan en gran medida en el uso de JavaScript. Sin embargo, al hacer uso de técnicas y herramientas adecuadas, es posible hacer que tu aplicación Angular sea visible y rastreable por los motores de búsqueda.
Configuración inicial de Angular
En primer lugar, antes de obtener una aplicación Angular lista para SEO, necesitamos configurar un nuevo proyecto Angular desde cero. Aquí te mostraremos los pasos necesarios para lograrlo.
- Abre tu terminal y asegúrate de tener instalada la interfaz de línea de comandos de Angular (Angular CLI). Para verificar si ya la tienes instalada, escribe el comando
ng -v
y debería mostrarte la versión que tienes.
⭐ En caso de no tenerlo instalado, te recomendamos visitar el sitio web oficial de Angular CLI en https://cli.angular.io/ para obtener instrucciones sobre cómo instalarlo.
- Una vez que hayas confirmado que tienes Angular CLI instalado, vamos a crear un nuevo proyecto Angular ejecutando el siguiente comando en la terminal:
ng new mi-proyecto-angular
Este comando creará un nuevo proyecto llamado "mi-proyecto-angular" en la carpeta actual. Puedes cambiar el nombre del proyecto por el que desees. Ten en cuenta que este proceso puede tardar unos minutos dependiendo de la velocidad de tu conexión a internet.
- Luego de que se haya creado el proyecto, ingresa a su carpeta ejecutando el siguiente comando:
cd mi-proyecto-angular
🎉 Ahora tienes un nuevo proyecto Angular listo para ser configurado y optimizado para SEO. En los siguientes apartados, veremos qué pasos debemos seguir para lograrlo.
Creación de un nuevo proyecto Angular
En este apartado, veremos cómo crear un nuevo proyecto Angular desde cero utilizando el Angular CLI. Sigue los siguientes pasos:
- Abre tu terminal y asegúrate de tener instalada la interfaz de línea de comandos de Angular (Angular CLI). Para verificar si ya la tienes instalada, escribe el comando
ng -v
y debería mostrarte la versión que tienes.
⭐ En caso de no tenerlo instalado, te recomendamos visitar el sitio web oficial de Angular CLI en https://cli.angular.io/ para obtener instrucciones sobre cómo instalarlo.
- Una vez que hayas confirmado que tienes Angular CLI instalado, vamos a crear un nuevo proyecto Angular ejecutando el siguiente comando en la terminal:
ng new mi-proyecto-angular
Este comando creará un nuevo proyecto llamado "mi-proyecto-angular" en la carpeta actual. Puedes cambiar el nombre del proyecto por el que desees. Ten en cuenta que este proceso puede tardar unos minutos dependiendo de la velocidad de tu conexión a internet.
- Luego de que se haya creado el proyecto, ingresa a su carpeta ejecutando el siguiente comando:
cd mi-proyecto-angular
🎉 Ahora tienes un nuevo proyecto Angular listo para ser configurado y optimizado para SEO. En los siguientes apartados, veremos qué pasos debemos seguir para lograrlo.
Instalación de Angular CLI
Para poder trabajar con Angular y seguir los pasos de este artículo, necesitarás tener instalada la interfaz de línea de comandos de Angular (Angular CLI). A continuación, te mostraremos cómo instalarlo:
- Abre tu terminal y asegúrate de tener instalado Node.js en tu sistema. Puedes verificar esto escribiendo el siguiente comando:
node -v
Este comando te mostrará la versión de Node.js instalada en tu sistema. Si no lo tienes instalado, visita el sitio web oficial de Node.js en https://nodejs.org/es/ y descarga la versión adecuada para tu sistema operativo.
- Una vez que hayas confirmado que tienes Node.js instalado, abre tu terminal y ejecuta el siguiente comando para instalar Angular CLI de forma global en tu sistema:
npm install -g @angular/cli
Este comando descargará e instalará Angular CLI en tu sistema. Puede tardar unos minutos dependiendo de la velocidad de tu conexión a internet.
- Una vez finalizada la instalación, verifica si Angular CLI se instaló correctamente ejecutando el siguiente comando:
ng version
Este comando mostrará la versión de Angular CLI instalada en tu sistema.
¡Listo! Ahora tienes Angular CLI instalado y estás listo para comenzar a trabajar con Angular y optimizar tus proyectos para SEO. En los siguientes apartados, veremos cómo configurar y optimizar un proyecto Angular para obtener un mejor posicionamiento en los motores de búsqueda.
Es importante destacar que Angular CLI es una herramienta poderosa que simplifica en gran medida el desarrollo de aplicaciones Angular. Te permitirá generar componentes, módulos, servicios y mucho más de manera rápida y sencilla. Además, proporciona características útiles, como la compilación y minificación automática del código, la generación de estructuras de proyecto optimizadas y la posibilidad de ejecutar pruebas unitarias y de integración de forma sencilla.
Agregar enrutamiento a la aplicación Angular
En esta sección, aprenderemos a agregar enrutamiento a nuestra aplicación Angular. Esto nos permitirá navegar entre diferentes páginas en nuestra aplicación y optimizarla aún más para SEO.
- Abre tu proyecto Angular en tu editor de código favorito. Si estás utilizando Visual Studio Code, puedes abrirlo ejecutando el siguiente comando en la terminal desde la raíz de tu proyecto:
code .
Este comando abrirá tu proyecto Angular en Visual Studio Code.
-
Dentro del proyecto, busca el archivo app.module.ts
ubicado en la carpeta src/app/
. Este archivo es el módulo principal de nuestra aplicación Angular y es donde importaremos y configuraremos el enrutamiento.
-
Abre el archivo app.module.ts
y agrega los siguientes import al inicio del archivo:
import { NgModule } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';
import { RouterModule, Routes } from '@angular/router';
-
Debajo de los imports, crear una constante llamada routes
que contendrá la configuración de las rutas de nuestra aplicación. Por ejemplo, podríamos tener las siguientes rutas:
const routes: Routes = [
{ path: '', redirectTo: '/home', pathMatch: 'full' },
{ path: 'home', component: HomeComponent },
{ path: 'about', component: AboutComponent },
{ path: 'contact', component: ContactComponent },
];
En este ejemplo, tenemos una ruta vacía que redirige a la ruta '/home', una ruta '/home' que carga el componente HomeComponent
, una ruta '/about' que carga el componente AboutComponent
y una ruta '/contact' que carga el componente ContactComponent
.
- A continuación, es necesario importar los componentes que utilizaremos en nuestras rutas. Puedes importarlos en la sección de imports del archivo
app.module.ts
. Por ejemplo, podrías tener algo como esto:
import { HomeComponent } from './home/home.component';
import { AboutComponent } from './about/about.component';
import { ContactComponent } from './contact/contact.component';
Recuerda que estos componentes deben existir en tu proyecto y tener sus respectivos archivos y carpetas.
-
Luego de los imports, agrega el módulo RouterModule
a la lista de imports del módulo principal (@NgModule
). Esto nos permitirá utilizar las rutas configuradas en nuestra aplicación. Asegúrate de incluir el método forRoot
y pasarle la constante routes
que definimos anteriormente. Por ejemplo:
@NgModule({
declarations: [
AppComponent,
HomeComponent,
AboutComponent,
ContactComponent,
],
imports: [
BrowserModule,
RouterModule.forRoot(routes),
],
providers: [],
bootstrap: [AppComponent]
})
export class AppModule { }
-
Finalmente, necesitamos agregar un lugar en nuestro archivo HTML principal donde Angular renderizará los componentes correspondientes a cada ruta. En tu archivo app.component.html
, agrega el siguiente código al final del archivo:
<router-outlet></router-outlet>
Este elemento <router-outlet></router-outlet>
actúa como un marcador para que Angular sepa dónde debe mostrar los componentes correspondientes a cada ruta.
- ¡Listo! Ahora puedes utilizar las rutas configuradas para navegar entre diferentes páginas en tu aplicación. Por ejemplo, puedes agregar enlaces en tu archivo HTML principal que apunten a las diferentes rutas. Por ejemplo:
<nav>
<ul>
<li><a routerLink="/home">Home</a></li>
<li><a routerLink="/about">About</a></li>
<li><a routerLink="/contact">Contact</a></li>
</ul>
</nav>
En este ejemplo, hemos creado una barra de navegación con enlaces que apuntan a las rutas '/home', '/about' y '/contact'.
Recuerda que, para que las rutas funcionen correctamente, debes tener los respectivos componentes creados y configurados. En este ejemplo, estamos utilizando los componentes HomeComponent
, AboutComponent
y ContactComponent
.
🌐🚀 Ahora tienes configurado el enrutamiento en tu aplicación Angular, lo que te permitirá crear páginas adicionales y navegar entre ellas. Además, mejorarás la experiencia de usuario al proporcionar una navegación intuitiva. ¡Sigue leyendo para descubrir cómo puedes optimizar tu aplicación Angular para mejorar su SEO!