Por que SSR importa para SEO

Aplicações Angular são Single Page Applications (SPAs) que renderizam conteúdo no browser via JavaScript. O problema: crawlers de busca têm limites para executar JavaScript. Sem SSR, seu conteúdo pode não ser indexado corretamente.

Server-Side Rendering resolve isso entregando HTML completo na primeira resposta do servidor. Crawlers recebem a página pronta, incluindo meta tags, conteúdo e structured data.

Configurando SSR no Angular 21

Server Routes

O Angular 21 introduziu app.routes.server.ts para configurar como cada rota é renderizada:

  • RenderMode.Server: renderiza no servidor a cada request (SSR)
  • RenderMode.Prerender: gera HTML estático no build (SSG)
  • RenderMode.Client: renderiza no browser (CSR)

Para um blog, rotas com conteúdo dinâmico (posts, categorias, tags) usam RenderMode.Server. Páginas estáticas (home, sobre) usam RenderMode.Prerender.

HTTP Transfer Cache

O Angular automaticamente cacheia responses HTTP durante SSR e as transfere para o browser durante hydration. Isso evita requests duplicados: a API é chamada uma vez no servidor, e o browser reutiliza a resposta.

Por padrão, GET e HEAD requests sem headers de autenticação são cacheados. Para arquivos estáticos (nosso caso com blog estático), o comportamento padrão é perfeito.

Meta Tags automáticas

O serviço de SEO

Crie um SeoService centralizado que gerencia todas as meta tags:

  • title e og:title via Angular Title service
  • description, og:description, twitter:description via Meta service
  • canonical via manipulação do DOM com DOCUMENT token
  • article:published_time, article:author, article:section para posts

O serviço deve ser chamado no ngOnInit de cada componente de página, configurando as meta tags apropriadas para a rota atual.

JSON-LD Structured Data

Structured data em formato JSON-LD ajuda buscadores a entender o conteúdo da página. Para um blog, os schemas mais importantes são:

BlogPosting

Descreve cada artigo: título, autor, data de publicação, imagem, tempo de leitura. É o schema mais importante para aparecer em rich results do Google.

FAQPage

Se o post tem perguntas frequentes, o schema FAQPage aumenta drasticamente as chances de aparecer em AI Overviews e featured snippets.

Mostra a hierarquia de navegação nos resultados de busca: Home > Blog > Post.

Person

Na página do autor, o schema Person com sameAs (links para LinkedIn, GitHub) fortalece E-E-A-T (Experience, Expertise, Authority, Trust).

Core Web Vitals

SEO em 2026 não é só sobre conteúdo — performance importa. Os três Core Web Vitals que o Google mede:

LCP (Largest Contentful Paint)

Use NgOptimizedImage com atributo priority na imagem principal do post. Isso adiciona preload hints automaticamente e otimiza o carregamento.

CLS (Cumulative Layout Shift)

Sempre defina width e height em imagens. NgOptimizedImage exige isso por padrão, prevenindo layout shifts.

INP (Interaction to Next Paint)

Use ChangeDetectionStrategy.OnPush em todos os componentes para minimizar re-renders desnecessários. Signals do Angular também ajudam com change detection granular.

Sitemap e RSS

Para que buscadores descubram todas as páginas, gere um sitemap.xml com lastmod em formato ISO 8601. Evite changefreq e priority — Google e Bing os ignoram.

Um RSS feed permite que agregadores e ferramentas de AI descubram seu conteúdo automaticamente.

Resultado final

Com SSR configurado corretamente, meta tags automáticas, JSON-LD structured data e Core Web Vitals otimizados, seu blog Angular terá performance de SEO comparável a sites estáticos como Jekyll ou Hugo, com toda a interatividade de um SPA.