angular universal update meta tags with dynamic content

问题

Hey I'm having an issue I have this blogs page that brings in dynamic data, and with that data I want to use it to populate meta tags so for example I'm doing something like this

getBlogPost() {
  this.http.get(...)
     .subscribe(result => {
         this.blogPost = result;
         this.meta.updateTag({ name: 'description', content: this.blogPost.fields.metaDescription });
         this.meta.updateTag({name: 'robots', content: 'INDEX, FOLLOW'});
         this.title.setTitle(this.blogPost.fields.blogName);
         this.meta.updateTag({name: 'twitter:image:src', content: this.blogPost.includes.Asset[0].fields.file.url });
         this.meta.updateTag({name: 'twitter:title', content: this.blogPost.fields.blogName });
         this.meta.updateTag({name: 'twitter:description', content: this.blogPost.fields.metaDescription });
         this.meta.updateTag({property: 'og:title', content:  this.blogPost.fields.blogName});
         this.meta.updateTag({property: 'og:description',  content: this.blogPost.fields.metaDescription});
         this.meta.updateTag({property: 'og:image', content: this.blogPost.includes.Asset[0].fields.file.url });
         this.meta.updateTag({property: 'og:image:secure_url', content: this.blogPost.includes.Asset[0].fields.file.url});
     })
}

Now all signs point to this should work but I don't see the updated meta tags when I view the source code and I don't see them when I check SEO tools...

Is there a solution to this?

Thanks in Advance!!

回答1:

I have a blog fully implemented in Angular 7. Here's how I was able to use Facebook meta tags dynamically without using Angular Universal:

1) in my backend (in my case it's Spring Boot) I created a service to generate an HTML file according to my current blog post. I am adding all the specific Facebook tags in the header of this HTML according to my blog post (like title, thumbnail, etc.)

2) In my HTML I add a "Go to Blog post" link

3) When I want to share the post blog, I am sharing the generated HTML URL on Facebook. And thus the title, thumbnail, etc. are according to my current post content.

来源：https://stackoverflow.com/questions/53406926/angular-universal-update-meta-tags-with-dynamic-content

标签

javascript

angular

typescript

angular-universal