I’m currently working on an Angular 9 application, and I’m implementing SSR (Server-Side Rendering) and SEO for it. I’ve added dynamic metadata tags to my components, using resolvers and within the component itself via ActivatedRoute. The tags are updating correctly in the head element when I inspect the page in the browser’s developer tools, so the client-side rendering seems to be working fine.

The issue: When I check the page source, the metadata tags aren’t being reflected. This leads me to believe that while the metadata tags are dynamically updating on the client side, they’re not rendering server-side, which is crucial for SEO.

Here’s what I’ve tried so far:

Verified that the dynamic metadata is present in the head during client-side navigation.

Used Angular resolvers to ensure data is ready before routes are activated.

What I need help with:

Any ideas on why the metadata is not appearing in the page source?

Could this be related to the SSR setup or a misconfiguration with Angular Universal?

What steps can I take to further diagnose the issue?

I would really appreciate any advice or pointers from anyone who has experienced this issue or has insights into SSR/SEO with Angular!

import { MetaService } from “@ngx-meta/core”;

this.router.events
.pipe(
filter((event) => event instanceof NavigationEnd),
map(() => this.activatedRoute),
map((route) => {
while (route.firstChild) route = route.firstChild;
return route;
}),
mergeMap((route) => route.data)
)
.subscribe((data) => {

    const metaData = data["meta"];
    this.titleService.setTitle(data.title || metaData.title);
    if (data.allowMetadata && data.allowMetadata == true) {
      this.meta.setTag("description", metaData["description"]);
      this.meta.setTag("keywords", metaData["keywords"]);

      this.meta.setTag("og:title", `${metaData["title"]}`);
      this.meta.setTag("og:description", `${metaData["description"]}`);
      this.meta.setTag("og:url", `${metaData["url"]}`);
      this.meta.setTag("og:type", `${metaData["type"]}`);
      this.meta.setTag("og:image", `${metaData["image"]}`);

      this.meta.setTag("twitter:card", "summary_large_image");
      this.meta.setTag("twitter:title", `${metaData["title"]}`);
      this.meta.setTag("twitter:description", `${metaData["description"]}`);
      this.meta.setTag("twitter:image", `${metaData["image"]}`);
    }
  });