SEO with Angular SSR

flowchart TD
    A["Angular SEO Checklist"] --> B["Server-Side Rendering (SSR)"]
    A --> C["Dynamic Meta Tags"]
    A --> D["Semantic HTML"]
    A --> E["Performance (Core Web Vitals)"]
    A --> F["Structured Data (JSON-LD)"]
    A --> G["Sitemap & Robots.txt"]

    B --> B1["ng add @angular/ssr"]
    B --> B2["provideClientHydration()"]

    C --> C1["Title service"]
    C --> C2["Meta service"]

    E --> E1["Lazy loading"]
    E --> E2["NgOptimizedImage"]
    E --> E3["@defer"]

    style A fill:#4f46e5,color:#fff

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

@Injectable({ providedIn: 'root' })
export class SeoService {
  constructor(private title: Title, private meta: Meta) {}

  updatePage(config: { title: string; description: string; image?: string }) {
    this.title.setTitle(`${config.title} | MyApp`);

    // Standard meta tags
    this.meta.updateTag({ name: 'description', content: config.description });

    // Open Graph (Facebook, LinkedIn)
    this.meta.updateTag({ property: 'og:title', content: config.title });
    this.meta.updateTag({ property: 'og:description', content: config.description });
    if (config.image) {
      this.meta.updateTag({ property: 'og:image', content: config.image });
    }

    // Twitter Cards
    this.meta.updateTag({ name: 'twitter:card', content: 'summary_large_image' });
    this.meta.updateTag({ name: 'twitter:title', content: config.title });
    this.meta.updateTag({ name: 'twitter:description', content: config.description });
  }
}

// Route definition
{
  path: 'product/:slug',
  component: ProductComponent,
  resolve: { seo: productSeoResolver },
}

// Resolver
export const productSeoResolver: ResolveFn<void> = (route) => {
  const seo = inject(SeoService);
  const productService = inject(ProductService);

  return productService.getProduct(route.paramMap.get('slug')!).pipe(
    tap(product => seo.updatePage({
      title: product.name,
      description: product.description.slice(0, 160),
      image: product.imageUrl,
    })),
    map(() => void 0) // return void
  );
};

@Injectable({ providedIn: 'root' })
export class JsonLdService {
  private injector = inject(Injector);

  setStructuredData(data: Record<string, any>) {
    // Remove existing JSON-LD script
    document.querySelector('script[type="application/ld+json"]')?.remove();

    const script = document.createElement('script');
    script.type = 'application/ld+json';
    script.text = JSON.stringify({
      '@context': 'https://schema.org',
      ...data,
    });
    document.head.appendChild(script);
  }
}

// Usage for a product page
this.jsonLd.setStructuredData({
  '@type': 'Product',
  name: 'Angular Pro Course',
  description: 'Complete Angular course.',
  offers: {
    '@type': 'Offer',
    price: '49.99',
    priceCurrency: 'USD',
  },
});

import { isPlatformServer } from '@angular/common';

@Component({ ... })
export class ProductDetailComponent {
  private platformId = inject(PLATFORM_ID);

  ngOnInit() {
    // Meta tags should be set on server (for crawlers)
    this.seo.updatePage({
      title: this.product().name,
      description: this.product().description,
    });

    // Client-only features (analytics, etc.)
    if (isPlatformServer(this.platformId)) {
      // Set HTTP headers for crawlers (status codes, redirects)
    }
  }
}