Question

我在AppModule中导入了Meta服务

但是它不起作用。我将包含meta.updateTag()的方法挂接到路由器的NavigationEnd事件中。

ngOnInit() {
    this.router.events
        .filter((event) => event instanceof NavigationEnd)
        .map(() => this.route)
        .map((route) => {
            while (route.firstChild) route = route.firstChild;
            return route;
        })
        .filter((route) => route.outlet === 'primary')
        .mergeMap((route) => route.data)
        .subscribe((event) => {
            console.log('NavigationEnd:', event);
            this.updateDescription(event['description'], event['keywords'],
                event['title']);
        });
}
updateDescription(desc: string, keywords: string, title: string) {
    this.titleService.setTitle(title);
    this.meta.updateTag({ name: 'description', content: desc })
    this.meta.updateTag({ name: 'keywords', content: keywords })
    this.meta.updateTag({ name: 'og:title', content: title })
    this.meta.updateTag({ name: 'og:description', content: desc })
}

Answer 1

根据 OG documentation，您应该使用 property 属性而不是 name。

updateDescription(desc: string, keywords: string, title: string) {
  this.titleService.setTitle(title);
  this.meta.updateTag({ name: 'description', content: desc })
  this.meta.updateTag({ name: 'keywords', content: keywords })
  this.meta.updateTag({ property: 'og:title', content: title })
  this.meta.updateTag({ property: 'og:description', content: desc })
}

请确保您的 index.html 文件中有相同的 property 名称。

Answer 2

进行快速研究以提供帮助。根据{{3}}在Manuel中的回答。

开放图OG标签必须在源代码中！您需要提供   包含打开的图形标签（例如og：image）的静态html页面   html源代码中的og：title和og：description，因为facebook，   twitter和co a只是在不渲染纯HTML的情况下抓取了纯HTML   通过javascript。 Angular通过js和   因此抓取工具只会获得初始index.html。

有几种方法可以提供包含开放式图形标签和   解决您的问题：


具有角度通用性的服务器端渲染

使用代理呈现页面

快速覆盖index.html替换og标签

提供静态html页面（不确定角度是否支持此页面）

另外，从Angular 4 - Update Meta tags dynamically for Facebook (Open graph) ，Social websites are not showing updated meta tags on share?的另一个线程开始，建议使用 Angular Universal （Toxicable），以便于使用Web爬网程序（SEO）。< / p>

请参阅see here了解更多信息。

您也可以尝试使用Angular Universal在同一线程上描述其解决方案的方式进行操作。 sathishcharykotha

我们暂时不使用Angle Universal，我们通过创建简单的Spring Web应用程序解决了这个问题，我们只是将元标记从客户端应用程序发送到简单的Web应用程序，在那里我们生成了新的url，并从中重定向到角度应用程序。但这不是一个好主意。我们希望将其更改为角度通用。谢谢

添加/更新meta标签在angular 6中不起作用

2 个答案: