javascript - 具有动态内容的角度通用更新元标记
问题描述
嘿,我遇到了一个问题,我有一个引入动态数据的博客页面,我想用这些数据来填充元标记,例如我正在做这样的事情
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});
})
}
现在所有迹象都表明这应该可以工作,但是当我查看源代码时没有看到更新的元标记,当我检查 SEO 工具时也没有看到它们......
有针对这个的解决方法吗?
提前致谢!!
解决方案
我有一个完全在 Angular 7 中实现的博客。以下是我如何在不使用 Angular Universal 的情况下动态使用 Facebook 元标记:
1) 在我的后端(在我的情况下是 Spring Boot)中,我创建了一个服务来根据我当前的博客文章生成 HTML 文件。我根据我的博客文章(如标题、缩略图等)在此 HTML 的标题中添加了所有特定的 Facebook 标签
2) 在我的 HTML 中,我添加了一个“转到博客文章”链接
3) 当我想分享博文时,我在 Facebook 上分享生成的 HTML URL。因此标题,缩略图等是根据我当前的帖子内容。
推荐阅读
- node.js - GraphQL 教程 - 预期未定义为 GraphQL 模式
- javascript - 如何在 Unity/C# WebGL 平台中调用 async/await JavaScript 函数?
- javascript - 是否可以查看正在 vscode.dev 中编辑的网页?
- node.js - Nodejs 获取 GET 查询字符串参数
- django - 我如何查询多个对象,使用多个 id 进行过滤
- android - DataBindingUtil 类型不匹配
- html - 如何使用css为嵌套列表着色?
- javascript - 如何使用 jQuery 函数单击或按 Enter 与 PHP
- angular - 如何从 Angular 引用 Eclipse 本地部署的 Spring 应用程序?
- html - css 过渡(悬停和之后)