有没有办法动态更新Angular中的og元标签

Question

我有一个 ecom Angular 网站，我希望允许用户使用 WhatsApp 分享产品。内容是从 REST API 动态生成的。因此，我在 component.ts 文件中使用 Angular Meta 类来使用动态内容更新 index.html 中的默认元标记属性。

当我将 URL 导航到我想要更新 og 元标记的特定页面时。元标记已添加到 DOM 中。但是当我与 WhatsApp 共享相同的页面 URL 时。产品图片、描述等动态内容不会出现。产品网址示例：https://www.kekouda.com/#/products/dtl/2075/3509

我已经阅读了很多建议（（1）服务器端 - 我不想移动到服务器端，（2）使用代理/缓存服务器 - 我不确定我喜欢这个 - 它似乎不是自由的）。我似乎找不到任何直接的解决方案。请帮忙。

Answer 1

您需要了解这些事情是如何工作的：如果您共享一个链接，那么 WhatsApp（在您的情况下）将look 到该链接并看到“index.html”，其中包含其内容和元数据。 WhatsApp（以及它们显示此类预览的所有其他应用程序/网站）不会运行 javascript 部分并等待您的应用程序呈现一些内容（单页）。他们只能看到第一个呈现的 html。 那就是问题所在。您更改元和内容，但第一个渲染的 index.html 是重要的部分。

使用服务器端渲染（

Angular Universal

），index.html 会在您调用它（或任何应用程序/站点调用它）时呈现，并且元数据将在应用程序/站点可以读取它之前设置。因此您的元数据和内容将会出现。 如果你想做这样的事情，你需要使用

Angular Univeral

。 超级容易使用

顺便说一句：备份你的项目总是一个好主意 添加

universal

ng add @nguniversal/express-engine

帮助客户补充水分

import {provideClientHydration} from '@angular/platform-browser';
// ...

@NgModule({
  // ...
  providers: [ provideClientHydration() ],  // add this line
  bootstrap: [ AppComponent ]
})
export class AppModule {
  // ...
}

运行您的应用程序并感受 ssr 的强大功能！

npm run dev:ssr

在此处

阅读所有相关内容。