SEO & metadata

This page sets its tags by hand to make the mechanism visible, but the app doesn't repeat that per route. A single TitleStrategy runs on every navigation: it composes the title from the route's title, reads the description off the leaf route's data, and writes the description, Open Graph / Twitter, robots, and canonical tags — all through the SSR-safe Title/Meta services so they land in the first HTML response.

import { DOCUMENT } from '@angular/common';
import { Injectable, inject } from '@angular/core';
import { Meta, Title } from '@angular/platform-browser';
import { type RouterStateSnapshot, TitleStrategy } from '@angular/router';

// The production origin — canonical URLs and Open Graph tags point here.
const SITE_ORIGIN = 'https://demo.miguelcarino.com';
const SITE_NAME = 'Enterprise Angular Showcase';
const AUTHOR = 'Miguel Carino';

/*
 * A `TitleStrategy` that does the whole per-route metadata job on every navigation: the
 * document title (from the route's `title`), the meta description, the canonical URL, and
 * Open Graph / Twitter card tags (from the route's `data.description`). The /seo page
 * demonstrates the technique in isolation; this applies it app-wide so every route a blog
 * post links is correct in a tab and shares cleanly as a preview card.
 *
 * SSR-safe: `Title`/`Meta` render into the prerendered head on the server, and the canonical
 * link is written through `DOCUMENT` (which Angular provides server-side too), so the tags
 * are present in the static HTML, not only after hydration.
 */
@Injectable({ providedIn: 'root' })
export class MetadataStrategy extends TitleStrategy {
  private readonly title = inject(Title);
  private readonly meta = inject(Meta);
  private readonly document = inject(DOCUMENT);

  override updateTitle(snapshot: RouterStateSnapshot): void {
    /*
     * Compose the full document title from the route's page name and the site brand, so every
     * tab and search result reads "<Page> · Enterprise Angular Showcase — Miguel Carino".
     */
    const page = this.buildTitle(snapshot);
    const title = page ? `${page} · ${SITE_NAME} — ${AUTHOR}` : `${SITE_NAME} — ${AUTHOR}`;
    this.title.setTitle(title);

    const description = this.deepestData(snapshot)['description'] as string | undefined;
    const url = `${SITE_ORIGIN}${snapshot.url.split(/[?#]/)[0]}`;

    if (description) {
      this.meta.updateTag({ name: 'description', content: description });
      this.meta.updateTag({ property: 'og:description', content: description });
      this.meta.updateTag({ name: 'twitter:description', content: description });
    }
    this.meta.updateTag({ property: 'og:title', content: title });
    this.meta.updateTag({ property: 'og:type', content: 'website' });
    this.meta.updateTag({ property: 'og:site_name', content: SITE_NAME });
    this.meta.updateTag({ property: 'og:url', content: url });
    this.meta.updateTag({ name: 'twitter:card', content: 'summary_large_image' });
    this.meta.updateTag({ name: 'twitter:title', content: title });
    /*
     * Every demo route is unique interactive content meant to be found — so the whole of demo.
     * is index,follow. The thin surfaces (the federated remotes, Storybook) opt out on their own.
     */
    this.meta.updateTag({ name: 'robots', content: 'index, follow' });

    this.setCanonical(url);
  }

  // The metadata lives on the leaf route, so walk to the deepest activated snapshot.
  private deepestData(snapshot: RouterStateSnapshot): Record<string, unknown> {
    let route = snapshot.root;
    while (route.firstChild) {
      route = route.firstChild;
    }
    return route.data;
  }

  private setCanonical(url: string): void {
    const head = this.document.head;
    if (!head) {
      return;
    }
    let link = head.querySelector<HTMLLinkElement>('link[rel="canonical"]');
    if (!link) {
      link = this.document.createElement('link');
      link.setAttribute('rel', 'canonical');
      head.appendChild(link);
    }
    link.setAttribute('href', url);
  }
}