Angular SSR does not include SEO on the page source

I've been doing some tests for a page where I'm trying to implement SEO, but my SEO tags seem to not be inserting into the Page Source only in the inspector which is already client side.

I've tried it in different versions of Angular (had the page in 16 with Universal upgraded it to 17 for the new SSR, but the tests I'm running on a 19 app yield the same results).

I have Client Hydration on in this test app too.

My SEO service looks like this:

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

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

setTitle(title: string) {
this.titleService.setTitle(title);
}

updateMetaTags(description: string) {
this.meta.addTag({ name: 'description', content: description });
}
}


And I call it in the components like Home as follows:

import { Component, OnInit } from '@angular/core';
import { SeoService } from '../seo.service';

@Component({
selector: 'app-home',
imports: [],
providers: [SeoService],
templateUrl: './home.component.html',
styleUrl: './home.component.scss',
})
export class HomeComponent implements OnInit {
constructor(private seoService: SeoService) {}

ngOnInit(): void {
this.seoService.setTitle('SEO - BUT THE HOME PAGE');
this.seoService.updateMetaTags('This is the home page for the SEO app!!!');
}
}


For example the home component, renders page source the updated title but not the meta tag for description:

<!DOCTYPE html><html lang="en" data-beasties-container><head>
<meta charset="utf-8">
<title>SEO - BUT THE HOME PAGE</title>
<base href="/">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="icon" type="image/x-icon" href="favicon.ico">
<link rel="stylesheet" href="styles-5INURTSO.css"><meta name="description" content="This is the home page for the SEO app!!!"></head>
<body><!--nghm-->
<app-root ng-version="19.0.5" ngh="1" ng-server-context="ssr"><a href="/">Base</a><a href="/home">Home</a><a href="/topics">Topics</a><router-outlet></router-outlet><app-home ngh="0"><p>home works!</p></app-home><!----></app-root></html>


In the Inspector though it shows correctly (already Client side I guess):



How can I have the server rendering my dynamic description tag (and other dynamic tags as well, like keywords and canonical URL)?

Continue reading...