Angular SEO: server-side rendering and metadata

Add server-side rendering

ng add @angular/ssr

This sets up server rendering and hydration. Angular's docs describe server-side rendering as improving SEO and performance because the HTML is available before the JavaScript runs. Prerender (static generation) routes whose content doesn't change on every request.

Titles and meta tags

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

export class ProductPage {
  private title = inject(Title)
  private meta = inject(Meta)
  ngOnInit() {
    this.title.setTitle('Blue Widget | Example')
    this.meta.updateTag({ name: 'description', content: 'A blue widget that...' })
  }
}

You can also set titles in route definitions with the title property.

Checklist

• Make sure data needed for the page is loaded during server rendering.
• Use routerLink on <a> elements so links are real hrefs.
• Use path-based routing, not hash routing.
• Return a real 404 status for unknown routes from the server.
• Avoid browser-only APIs during server rendering; guard them so rendering doesn't fail.

Angular and AI search

• Check robots.txt allows the AI search crawlers you want: OAI-SearchBot (ChatGPT search), Claude-SearchBot, PerplexityBot. See the AI crawler list and the robots.txt generator.
• Check your host's or CDN's bot protection doesn't block them even when robots.txt allows them.
• Make sure the main text is in the HTML the server sends. AI crawlers don't run JavaScript.
• Avoid nosnippet and tiny max-snippet values on pages you want quoted; they also keep pages out of Google's AI Overviews.