Question

我想使用API调用在meta标签中设置动态信息。当我通过检查检查时，它将显示更新的数据，但是当我在Facebook上共享链接时，它不会反映更新的数据。

Index.html

  <meta name="description" content="Create and share your biography">
  <meta name="og:url" content="window.location.href"> 
  <meta name="og:title" content="TEACHERLIFE -SPANISH LESSONS">
  <meta name="og:description" content="So I’m in my classroo...">

在component.ts中：

import { Meta, Title } from '@angular/platform-browser';
 constructor(private metaService: MetaService,
    private meta: Meta,) {}
  ngOnInit() {
this.meta.updateTag( {name: 'og:description', content:"testdescription"});
}

Answer 1

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

constructor(private meta: Meta) {}

ngOnInit() {
  this.meta.updateTag(
     {name: 'twitter:title', content:'Front-end Web Development'},
     `name='twitter:title'`
   );
}

Answer 2

Facebook共享不会解析javascript，因此它只会拦截index.html页面上的静态元数据。

请参阅github社区中的完整讨论。

https://github.com/jvandemo/angular-update-meta/issues/13

Answer 3

默认情况下，angular 不使用服务器端渲染。出于 SEO 的目的，您需要在项目中添加 Angular Universal，以便启用服务器端渲染。然后 SEO 元标记将起作用。

https://angular.io/guide/universal

下面是我遇到的 YouTube 教程，它解释了这个概念。 https://www.youtube.com/watch?v=lncsmB5yfzE

Angular 6：使用og：description标签在Facebook上共享页面时，动态元标签不起作用

3 个答案: