Angular SEO en Chile: SSR, Meta tags y Core Web Vitals

🔴 EL PROBLEMA: ANGULAR Y SEO

Angular es el framework más completo para aplicaciones web enterprise, pero tiene un problema conocido: por defecto, es una SPA (Single Page Application) que renderiza TODO en el navegador del usuario.

¿Qué significa esto para Google?

El crawlbot de Google llega a tu URL y recibe un HTML así:

<!DOCTYPE html> <html> <head><title>My App</title></head> <body> <app-root></app-root> <script src="main.js"></script> </body> </html>

¡Vacío! Sin contenido, sin texto, sin imágenes. Google no puede indexar lo que no puede leer.

Resultado: tu sitio Angular queda invisible en búsquedas orgánicas.

✅ LA SOLUCIÓN: ANGULAR UNIVERSAL (SSR)

Angular Universal es el módulo oficial para Server-Side Rendering. Funciona así:

SIN SSR (SPA puro): 1. Google llega → recibe HTML vacío 2. Google debe ejecutar JavaScript 3. A veces funciona, a veces no 4. Demora 3-5 días en indexar

CON SSR: 1. Google llega → recibe HTML COMPLETO 2. Lee todo el contenido inmediatamente 3. Indexa en horas 4. Ranking significativamente mejor

🛠️ IMPLEMENTANDO SSR EN ANGULAR

Paso 1: Agregar Angular Universal

ng add @nguniversal/express-engine

Paso 2: Verificar app.server.module.ts

Paso 3: Build con prerender

ng run myapp:prerender:production

Esto genera HTML estático para cada ruta — ideal para sitios con contenido mayormente estático (portafolios, landing pages, blogs).

📋 META TAGS DINÁMICOS EN ANGULAR

Cada ruta de tu Angular debe tener meta tags únicos:

import { Title, Meta } from '@angular/platform-browser';

this.title.setTitle('Desarrollador web Santiago Chile | Miguel'); this.meta.updateTag({ name: 'description', content: 'Desarrollo web profesional en Santiago, Chile.' }); this.meta.updateTag({ property: 'og:title', content: 'Miguel — Desarrollador web Santiago' });

✅ Crea un SeoService centralizado para reutilizar en todos los componentes.

🗺️ SCHEMA MARKUP PARA SITIOS CHILE

En index.html agrega JSON-LD para SEO local:

<script type="application/ld+json"> { "@context": "https://schema.org", "@type": "LocalBusiness", "name": "Miguel — Desarrollo web", "address": { "@type": "PostalAddress", "addressLocality": "Santiago", "addressCountry": "CL" }, "telephone": "+56912345678", "url": "https://mijeldev.com" } </script>

Esto le dice explícitamente a Google que eres un negocio local chileno.

⚡ CORE WEB VITALS EN ANGULAR

Con SSR configurado, el siguiente paso es optimizar los 3 indicadores:

1️⃣ LCP (Largest Contentful Paint) — Meta: < 2.5s

✓ Preload de imagen principal: <link rel="preload" as="image" href="hero.jpg" fetchpriority="high"> ✓ Convertir imágenes a WebP ✓ Usar CDN (Firebase Hosting incluye CDN global)

2️⃣ CLS (Cumulative Layout Shift) — Meta: < 0.1

✓ Definir width/height explícito en todas las imágenes ✓ Reservar espacio para fuentes antes de cargar ✓ Evitar contenido que se inserta dinámicamente arriba del fold

3️⃣ INP (Interaction to Next Paint) — Meta: < 200ms

✓ No bloquear el main thread con cálculos pesados ✓ Usar ChangeDetectionStrategy.OnPush en componentes ✓ Lazy load de módulos por ruta

📁 ESTRUCTURA DE RUTAS SEO-FRIENDLY

En tu app-routing.module.ts, cada ruta debe corresponder a una keyword relevante:

✓ /servicios — para "servicios de desarrollo web" ✓ /portafolio — para "portafolio desarrollador web" ✓ /desarrollo-landing-pages — para "landing pages Chile" ✓ /tiendas-online — para "tiendas online Chile" ✓ /blog/[slug] — para keywords long-tail

Evita rutas genéricas como /page1, /item/123 que no aportan SEO.

🔗 CANONICAL Y HREFLANG

Para evitar contenido duplicado:

<link rel="canonical" href="https://mijeldev.com/servicios"> <link rel="alternate" hreflang="es-cl" href="https://mijeldev.com/servicios">

El hreflang es especialmente importante si tu sitio podría mostrarse a usuarios de otros países hispanohablantes.

🗂️ SITEMAP Y ROBOTS.TXT

Sitemap.xml: Lista todas las URLs para que Google las descubra rápido.

<?xml version="1.0" encoding="UTF-8"?> <urlset xmlns="http://www.sitemaps.org/schemas/sitemap/0.9"> <url><loc>https://mijeldev.com/</loc></url> <url><loc>https://mijeldev.com/portafolio</loc></url> <url><loc>https://mijeldev.com/servicios</loc></url> <url><loc>https://mijeldev.com/blog</loc></url> </urlset>

Robots.txt (en la raíz, NO en /assets):

User-agent: * Allow: / Sitemap: https://mijeldev.com/sitemap.xml

⚠️ Error común: Muchas apps Angular ponen robots.txt en /assets/ — Google no lo encuentra ahí. Debe estar en el dominio raíz.

📈 RESULTADOS ESPERADOS EN CHILE

Un sitio Angular bien optimizado con SSR puede lograr:

Mes 1-2: Indexación completa de todas las rutas Mes 2-3: Posiciones 10-30 para keywords long-tail locales Mes 4-6: Posiciones 5-15 para keywords medias ("desarrollador web santiago") Mes 6-12: Posiciones 1-5 con backlinks y contenido consistente

✨ CONCLUSIÓN

Angular + SSR + Meta tags dinámicos + Schema local + Core Web Vitals optimizados = base técnica perfecta para competir en Google Chile.

El SEO técnico es el punto de partida. Agrega contenido de calidad y backlinks locales para acelerar los resultados.