使用 Angular Universal 更新 SEO 的元标记

2023-12-05

我正在构建一个 Angular Universal + Angular 2 网站,我想添加社交媒体分享按钮。我实现了服务器端渲染,并且还使用以下代码更新了必要的元标记:

 constructor(private dataService: DataService,
private activatedRoute: ActivatedRoute,
private auth: AuthService,
private router : Router,
private meta : Meta) {

this.currentUrl = window.location.href;
// testing if it changes something to add that outside of the service : it didnt
this.meta.updateTag({ property: 'og:title', content: "my new title" })



let id= this.activatedRoute.snapshot.paramMap.get('id');
this.dataService.getDataById(id).snapshotChanges().take(1)
.switchMap(result => {

console.log("slug switchmap")
let payloadValue = result[0].payload.val();

// facebook meta 
this.meta.updateTag({ property: 'og:url', content: this.currentUrl })
this.meta.updateTag({ property: 'og:title', content: payloadValue.title })
this.meta.updateTag({ property: 'og:description', content: payloadValue.description })
this.meta.updateTag({ property: 'og:image', content: 
 payloadValue.photoUrl })


return result;
})
 .subscribe(params => {

console.log(params)



    });
}

我使用 firebase 作为我的托管,但共享不起作用(它只是与我输入的默认值共享)。有趣的是,如果我检查浏览器中的元素,我会看到更新的元标记,但如果查看页面源,我会看到标记的默认值而不是更新的值。知道如何动态更新元标签吗?

Update :我认为问题在于构造函数在调用获取元值的 subscribe 方法结束之前结束。一旦构造函数完成,我认为您无法更改元标记。有办法解决这个问题吗?


None

本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系:hwhale#tublm.com(使用前将#替换为@)

使用 Angular Universal 更新 SEO 的元标记 的相关文章

随机推荐

  • django-nonrel 和管理页面

    我正在尝试在 AppEngine 上为我的网站设置 Django 管理套件 但它不起作用 我正在使用 django nonrel 设置与 我网站的其余部分似乎工作正常 但我需要让管理员工作 以便我可以开始使用数据存储区 这是我得到的错误 D
  • 格式化 Emacs 函数中的标头以将缓冲区打印到 PDF(带换行)

    Rupert Swarbrick 提出了以下三个函数来将 Emacs 缓冲区打印为 pdf 其中行被换行 使用时通常不会出现这种情况 ps print 功能 问题是这个函数要实现换行 必须复制当前缓冲区 这有效地破坏了ps print bu
  • 使用C将exec进程发送到后台?

    我的问题听起来与此相同 但事实并非如此 在Linux中用C在后台启动一个进程 我知道如何执行 fork 但不知道如何将进程发送到后台 我的程序应该像一个简单的命令 unix shell 一样工作 支持管道和后台进程 我可以做管道和叉子 但我
  • Selenium WebDriver 获取文本

    我有一个 div 0 div 我尝试编写 myDiv 的测试0其中的文字 使用 WebDriver 是 String text webDriver findElement By xpath div name myDiv getText 但在
  • 通过单点登录进行身份验证后移至 Facebook 应用程序页面

    我正在开发一个应用程序 需要集成 Facebook 的社交功能 我想要的是使用 SSO 单点登录 功能 当用户按下我的应用程序中的按钮时 网络视图将打开并向他显示我在 Facebook 中的应用程序页面 在用户进行身份验证后 现在他可以像其
  • React WebApp 调用 NestJS 后端中使用 PassportStrategy 的 Google 登录无法正常工作

    我已经在 NestJS 后端中使用 PassportStrategy 实现了 Google 登录 NestJS 后端开发基于此指南 https medium com nielsmeima auth in nest js and angula
  • 类中ShouldSerialize()的重构...我可以使用IContractResolver吗?

    我有一个返回大量汽车功能的 API 全部都是布尔值或整数 基本上我只想显示返回真值或整数 gt 0 的 API 我正在使用 JSON net 因此我可以使用 ShouldSerialize 属性来确定是否应该根据属性的值序列化该属性 我的代
  • Django cookie 没有保存在浏览器上

    我正在使用 React 和 Django 制作一个应用程序 当我使用 django 登录时 我在 cookie 中设置了令牌 但浏览器中未设置 Django 响应 cookie 我试图努力调试它但不能 不知道我哪里做错了 Request U
  • 如何在 jQuery UI Slider 设置 3 种不同的颜色

    我正在用这个用户界面滑块 我必须用 3 种不同的颜色来制作这个滑块 手柄颜色 句柄的前一部分 句柄的下一部分 Something like this 到目前为止 我只能设置手柄颜色 但是 如何设置另外两种不同的颜色 一个用于手柄的前一部分
  • 循环多维数组并删除某些键

    我有一个基于下面数组的嵌套树结构 Array 1 gt Array id gt 1 parent gt 0 name gt Startpage uri gt 125 basename gt index php child gt 23 gt
  • 使用外部库将 Jar 转换为 exe

    我一直在尝试将 jar 转换为 exe 该程序 jar 使用蓝牙库 Bluecove 它是某个目录中的另一个 jar 该程序还使用 Java Swing 通常JFrame和东西 当从 Netbeans 或 Eclipse 中运行时 该程序可
  • TypeScript 类型排除泛型参数为“any”的类型

    这是一个分支React FunctionComponent 的 TypeScript 类型恰好返回一个 IntrinsicElement React 定义 declare namespace JSX type Element React R
  • 打字稿显示错误“对象可能是‘未定义’”

    我定义了一个由接口注释的多种费用的对象 该接口包括索引签名 只读属性和可选属性 当我声明计算总费用的函数时 TypeScript 警告我该对象可能未定义 因为我知道可选属性可以是未定义的 所以我使用类型保护来检查循环中每个属性的值是否不是未
  • 通过将新行插入(添加)到 SQL Server 数据库表中来触发 Azure Function

    是否可以通过将新行插入表 使用 SQL Server 数据库 来触发 Azure 函数 或者 是否可以创建逻辑应用程序来通知我们 如果新记录已添加到表 SQL Server 数据库中 例如 一旦添加新记录即可发送新信息电子邮件 您可以使用A
  • 用于解析 google 搜索结果的 Chrome 扩展

    我正在尝试制作一个小扩展来检查维基百科文章的谷歌搜索结果 并在之后添加一些额外的链接 但我在解析搜索结果时遇到了一些麻烦 目前来说非常简单 显现 name Test version 0 1 description Test Test ico
  • 在 MDM 中更新 iOS 设备中安装的配置文件

    我想将配置有效负载发送到设备 例如 我想向特定设备发送限制负载 禁止 safari 即我想更新设备上安装的配置文件 我是否需要以与发送查询有效负载相同的方式发送此配置文件有效负载 我是否需要包含设备上存在的配置文件的所有配置负载 或者只需发
  • 使用 Jmeter xpath 提取器获取 oauth 令牌并在其他 Http 请求的路径中使用它

    如果我想提取访问令牌的值 那么正则表达式应该是什么 以便我可以在其他 Http 请求的路径中使用它 例如下面 http 响应中的 access token 93ee29b4 74dc 4uu7 8e10 6eac6845511b acces
  • 使用 Intel HD 4000 在 Mac 上进行 Cuda 编程 [已关闭]

    Closed 这个问题是无关 目前不接受答案 我需要做什么才能在配备 Intel HD 4000 显卡的 Macbook Air 上进行 Cuda 编程 设置虚拟机 购买外置 Nvidia 卡吗 有可能吗 如果您有一台新的 Macbook
  • IISnode - 使节点进程始终工作

    我正在使用 IIS7 5 和 iisnode 在 Windows 服务器上运行 nodeJS REST api 我注意到节点进程并不总是在后台活动 因此有时响应由于加载而需要更多时间 因为它需要创建所有连接和其他内容来获取响应数据 我在默认
  • 使用 Angular Universal 更新 SEO 的元标记

    我正在构建一个 Angular Universal Angular 2 网站 我想添加社交媒体分享按钮 我实现了服务器端渲染 并且还使用以下代码更新了必要的元标记 constructor private dataService DataSe