Configurar el SEO (Search Engine Optimization) de un proyecto en Angular 17 es crucial para que tu página aparezca en las búsquedas de Google. A continuación, te presento una guía paso a paso para lograrlo.
El primer paso para mejorar el SEO en Angular es configurar Angular Universal, que permite el renderizado del lado del servidor.
Ejecuta el siguiente comando en tu proyecto Angular para agregar Angular Universal:
ng add @nguniversal/express-engineEsto configurará automáticamente tu aplicación para que utilice el renderizado del lado del servidor con Express.
Revisa el archivo server.ts generado y asegúrate de que esté configurado correctamente. Por defecto, debería verse algo así:
import 'zone.js/dist/zone-node';
import { ngExpressEngine } from '@nguniversal/express-engine';
import * as express from 'express';
import { join } from 'path';
import { AppServerModule } from './src/main.server';
import { APP_BASE_HREF } from '@angular/common';
import { existsSync } from 'fs';
const app = express();
const PORT = process.env.PORT || 4000;
const DIST_FOLDER = join(process.cwd(), 'dist/YOUR_PROJECT_NAME/browser');
app.engine('html', ngExpressEngine({
bootstrap: AppServerModule,
}));
app.set('view engine', 'html');
app.set('views', DIST_FOLDER);
app.get('*.*', express.static(DIST_FOLDER, {
maxAge: '1y'
}));
app.get('*', (req, res) => {
res.render('index', { req, providers: [{ provide: APP_BASE_HREF, useValue: req.baseUrl }] });
});
app.listen(PORT, () => {
console.log(`Node Express server listening on http://localhost:${PORT}`);
});Reemplaza YOUR_PROJECT_NAME con el nombre de tu proyecto.
Construye tu aplicación para producción y ejecuta el servidor:
npm run build:ssr
npm run serve:ssrPara que Google pueda entender mejor tu página, es importante añadir metadatos adecuados. Esto incluye títulos de página, descripciones y etiquetas meta.
Asegúrate de tener el servicio de metaetiquetas disponible en tu proyecto:
ng add @angular/platform-browserEdita tus componentes para incluir metaetiquetas. Por ejemplo, en src/app/app.component.ts:
import { Component } from '@angular/core';
import { Meta, Title } from '@angular/platform-browser';
@Component({
selector: 'app-root',
templateUrl: './app.component.html',
styleUrls: ['./app.component.css']
})
export class AppComponent {
constructor(private meta: Meta, private titleService: Title) {
this.setTitleAndMetaTags();
}
setTitleAndMetaTags() {
this.titleService.setTitle('Mi Página de Angular');
this.meta.addTags([
{ name: 'description', content: 'Descripción de mi página en Angular.' },
{ name: 'keywords', content: 'angular, SEO, ejemplo' },
{ name: 'author', content: 'Tu Nombre' },
{ property: 'og:title', content: 'Mi Página de Angular' },
{ property: 'og:description', content: 'Descripción de mi página en Angular.' },
{ property: 'og:image', content: 'URL_de_imagen' },
]);
}
}Un sitemap ayuda a los motores de búsqueda a entender la estructura de tu sitio web.
Puedes usar una herramienta como xml-sitemaps.com para generar un sitemap XML.
Una vez generado, sube el sitemap.xml a la raíz de tu servidor.
Un archivo robots.txt indica a los motores de búsqueda qué páginas indexar y cuáles no.
Crea un archivo robots.txt en la raíz de tu proyecto con el siguiente contenido:
User-agent: *
Allow: /
Sitemap: http://tu-dominio.com/sitemap.xml
Ve a Google Search Console y verifica la propiedad de tu dominio siguiendo las instrucciones.
En Google Search Console, ve a "Sitemaps" y añade la URL de tu sitemap (http://tu-dominio.com/sitemap.xml).
Integra Google Analytics para rastrear el tráfico de tu sitio web.
Utiliza Google PageSpeed Insights para analizar y mejorar la velocidad de carga de tu sitio web.
Configurar el SEO de un proyecto en Angular 17 implica varios pasos, desde la configuración del renderizado del lado del servidor con Angular Universal hasta la optimización de metadatos y la creación de sitemaps. Siguiendo esta guía, mejorarás significativamente la capacidad de tu sitio para ser indexado y clasificado en los motores de búsqueda.
El uso de datos estructurados con Schema Markup ayuda a los motores de búsqueda a entender mejor el contenido de tu sitio web.
Puedes añadir Schema Markup directamente en el HTML de tus páginas. Un ejemplo de cómo hacerlo es mediante el uso de script en tu plantilla HTML. Abre src/index.html y añade:
<script type="application/ld+json">
{
"@context": "https://schema.org",
"@type": "WebSite",
"name": "Mi Página de Angular",
"url": "http://tu-dominio.com",
"potentialAction": {
"@type": "SearchAction",
"target": "http://tu-dominio.com/search?q={search_term_string}",
"query-input": "required name=search_term_string"
}
}
</script>Asegúrate de personalizar los valores según tu sitio web.
Las imágenes grandes y no optimizadas pueden ralentizar tu sitio, lo que afecta negativamente al SEO.
Usa herramientas como TinyPNG para comprimir las imágenes antes de subirlas a tu servidor.
En tus archivos de plantilla HTML, asegúrate de especificar las dimensiones de las imágenes:
<img src="path/to/image.jpg" width="600" height="400" alt="Descripción de la imagen">Lazy loading carga los componentes e imágenes solo cuando son necesarios, mejorando la velocidad de carga inicial.
Configura el lazy loading en tu archivo de rutas (src/app/app-routing.module.ts):
const routes: Routes = [
{
path: 'example',
loadChildren: () => import('./example/example.module').then(m => m.ExampleModule)
}
];Usa el atributo loading="lazy" en tus etiquetas de imagen:
<img src="path/to/image.jpg" loading="lazy" width="600" height="400" alt="Descripción de la imagen">La experiencia del usuario es un factor importante para el SEO. Asegúrate de que tu sitio sea fácil de navegar y rápido.
Asegúrate de que la navegación de tu sitio sea clara y accesible. Usa etiquetas <nav> para definir menús de navegación.
<nav>
<ul>
<li><a href="/home">Inicio</a></li>
<li><a href="/about">Acerca de</a></li>
<li><a href="/contact">Contacto</a></li>
</ul>
</nav>Asegúrate de que tu sitio web esté optimizado para dispositivos móviles. Usa media queries en tu CSS para ajustar el diseño según el tamaño de la pantalla.
@media (max-width: 600px) {
.container {
width: 100%;
padding: 10px;
}
}Después de implementar todas las configuraciones, es importante monitorear el rendimiento y el SEO de tu sitio web.
Continúa usando Google Analytics y Google Search Console para monitorear el tráfico y la visibilidad en los motores de búsqueda.
Usa herramientas como Ahrefs, SEMrush o Moz para realizar auditorías SEO y recibir recomendaciones sobre cómo mejorar tu sitio.
Configurar el SEO para un proyecto en Angular 17 es un proceso integral que abarca la configuración de renderizado del lado del servidor, la optimización de metadatos, la creación de sitemaps y robots.txt, la integración de Schema Markup, la optimización de imágenes, y la mejora de la experiencia del usuario. Siguiendo estos pasos y utilizando las herramientas adecuadas, mejorarás significativamente la visibilidad y el rendimiento de tu sitio web en los motores de búsqueda.