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)
? `${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-detailponent.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.
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.
Share Improve this question asked Feb 7 at 21:18 Carlos RodriguezCarlos Rodriguez 663 silver badges11 bronze badges1 Answer
Reset to default 0This problem usually arises when the application becomes stable before the meta tag have been set.
When doing SSR, Angular sends the generated HTML to the client the first time the application becomes stable (applicationRef.isStable).
In a zone app, you can usually keep the app unstable with a pending setTimeout(). and clear it when all the work you require is done and the page is ready to be sent to the client.