I want to create meta
tags based on a configuration that I have in the assets of my page. The idea is to use Angulars SSR feature to prerender the page with those meta tags in place.
I am currently unable to make this work and do not understand how this is supposed to work, so any help
would be really appreciated!
I tried to create a Service for the SEO.
@Injectable({
providedIn: 'root',
})
export class SeoService {
constructor(private readonly title: Title, private readonly meta: Meta) {}
updateTitle(title: string): void {
this.title.setTitle(title);
}
updateDescription(description: string): void {
this.meta.updateTag({ name: 'description', content: description });
}
...
}
Then I use this Service in my components OnInit
function to populate it:
@Component({
selector: 'stars-defered-blog-post',
standalone: true,
imports: [BlogPostComponent, LoadingComponent, AsyncPipe],
templateUrl: './defered-blog-post.component.html',
styleUrl: './defered-blog-post.component.scss',
changeDetection: ChangeDetectionStrategy.OnPush,
})
export class DeferedBlogPostComponent implements OnInit {
post: PostData;
constructor(
public readonly loadingService: LoadingService,
private readonly router: Router,
private readonly blogPostDataClientService: BlogPostDataClientService,
private readonly seo: SeoService
) {
// Get current route and get the post id from the route
const route = this.router.url.split('/');
// Get the last element of the route array and remove the fragment if it exists
const routeId = route[route.length - 1].split('#')[0];
// Get the post data from the service
this.blogPostDataClientService.getBlogPostData().subscribe((data) => {
this.post =
data.find((post) => post.route === routeId) || NOT_FOUND_BLOG_POST;
if (!this.post.published) {
this.post = NOT_FOUND_BLOG_POST;
}
});
}
ngOnInit() {
this.seo.updateTitle(this.post.title);
this.seo.updateDescription(this.post.description);
// add other tags...
}
}