具有动态内容的角度通用更新元标签 [英] 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});
})
}
现在所有迹象都表明这应该可行,但是在查看源代码时我看不到更新的meta标签,而在检查SEO工具时也看不到它们.
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...
对此有解决方案吗?
先谢谢了!
推荐答案
我有一个在Angular 7中完全实现的博客.这就是我无需使用Angular Universal就能动态使用Facebook元标记的方法:
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)在我的后端(在我的情况下是Spring Boot)中,我根据当前的博客文章创建了一个服务来生成HTML文件.我要根据我的博客文章(例如标题,缩略图等)在HTML的标题中添加所有特定的Facebook标签.
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)在我的HTML中,添加转到博客文章"链接
2) In my HTML I add a "Go to Blog post" link
3)当我想分享帖子博客时,我是在Facebook上分享生成的HTML URL.因此标题,缩略图等均根据我当前的帖子内容而定.
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.
这篇关于具有动态内容的角度通用更新元标签的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持IT屋!