Angular Universal Metatags not updating at server when loading from service

When navigating to this route user/:username I load the user data from a service to render it, but when updating the metatags with that data for page's SEO, it does not update it at the server just the client.

user.page.ts

ngOnInit(): void {
this.route.params.subscribe( (params: ProfileParams) => this.getUserProfile(params.username) );
}

private getUserProfile(username: string): void {
this.profiles.getUserProfile(username).subscribe({
next: profile => {
this.profile = profile;
this.updateMetas();
}, error: error => {
this.router.navigate(['404']);
console.error(error);
}
});

private updateMetas(): void {
const PROFILE_NAME: string = `${this.profile?.name || 'Profile'} ${this.profile?.last_name || ''}`.trim();
this.title.setTitle(`${PROFILE_NAME} | ${environment.appName}`);
this.seo.updateUrlMetas({
title: PROFILE_NAME,
description: this.profile?.description,
image: this.profile?.profile_picture,
keywords: [PROFILE_NAME, this.profile?.profession, this.profile?.locale]
});


}

seo.service.ts

private platformId = inject(PLATFORM_ID);
constructor(
private title: Title,
private meta: Meta,
private router: Router
) {}

private sanitizeText(text?: string): string {
return text ? text.replace(/(\r\n|\n|\r)/gm, ' ') : '';
}

public updateUrlMetas(seoData: SeoData): void {
//this.title.setTitle(seoData.title);
this.meta.updateTag({ name: 'title', content: seoData.title }, `name='title'`);
this.meta.updateTag({ property: 'og:title', content: seoData.title }, `property='og:title'`);
this.meta.updateTag({ name: 'twitter:title', content: seoData.title }, `name='twitter:title'`);

if (seoData.description) {
const cleanDescription = this.sanitizeText(seoData.description);
this.meta.updateTag({ name: 'description', content: cleanDescription }, `name='description'`);
this.meta.updateTag({ property: 'og:description', content: cleanDescription }, `property='og:description'`);
this.meta.updateTag({ name: 'twitter:description', content: cleanDescription }, `name='twitter:description'`);
}

if (seoData.image) {
this.meta.updateTag({ property: 'og:image', content: seoData.image }, `property='og:image'`);
this.meta.updateTag({ name: 'twitter:image', content: seoData.image }, `name='twitter:image'`);
}

if (seoData.keywords?.length) {
this.meta.updateTag({ name: 'keywords', content: seoData.keywords.join(', ') }, `name='keywords'`);
}

const fullUrl = isPlatformServer(this.platformId)
? `https://konfii.com${this.router.url}`
: window.location.href;
this.meta.updateTag({ property: 'og:url', content: fullUrl }, `property='og:url'`);
this.meta.updateTag({ property: 'al:web:url', content: fullUrl }, `property='al:web:url'`);
this.meta.updateTag({ property: 'al:android:url', content: `com.konfii.app:${this.router.url}` }, `property='al:android:url'`);

this.meta.updateTag({ property: 'og:type', content: 'website' }, `property='og:type'`);
this.meta.updateTag({ name: 'twitter:card', content: seoData.image ? 'summary_large_image' : 'summary' }, `name='twitter:card'`);
}


I have other component using that service function and it works fine, all meta tags update and the SEO aswell.

service-detail.component.ts

ngOnInit(): void {
if(!this.uuid) { this.router.navigate(['404']); }
this.refreshFunction.subscribe( event => this.handleRefresh(event) );
this.services.getService(this.uuid, this.auth?.user?.unique_code).subscribe({
next: res => {
this.serviceDetail = res;
this.setMetaTags(res);
this.reviews.getReviewsPerService(this.uuid, 1).subscribe(reviews => this.serviceReviews = reviews);
this.reviews.getReviewScorePerService(this.uuid).subscribe(score => this.serviceScore = score);
}, error: error => {
console.error(error);
if(error.status === 404) { return this.router.navigate(['404']); }
}
});


}

I'm using Angular 16.1.7, NgUniversal 16.1.1 and Ionic 8.

Continue reading...