可以在没有SSR的情况下通过Googlebot识别的Angular 8组件来设置HTML标题和元标记吗？

问题描述

我的组件使用setTitle和updateTag更新标题和标签。屏幕上的剩余数据通过模板绑定更新到通过主机请求获得的对象。 Google搜索控制台会显示正确的屏幕数据，但会显示默认的标题和元标记。

没有通用汽车，有没有办法解决这个问题？

constructor(private dataService: DataService,private route: ActivatedRoute,private Meta: Meta,private title: Title,private canonicalService: CanonicalService) {}

ngOnInit() {
  this.canonicalService.setCanonicalURL();
  this.route.params.subscribe(
    params => {
      const id = +params['id'];
      this.getLicense(id);
    }
  );
  let list = sessionStorage.getItem('liclist');
  if (list) {
    this.licList = JSON.parse(list);
  }
  this.dataService.getEnum().subscribe((data: Enum[]) => {
    this.enums = data;
  });
}

getLicense(id) {
  this.dataService.getLicense(id).subscribe((data: License) => {
    this.license = data;
    this.licListPtr = this.licList.findindex(x => x === id);
    this.Meta.updateTag({
      name: "keywords",content: !!this.license.keywords ? this.license.keywords.toLowerCase().replace("~",",") : ' '
    });
    let desc = this.license.licDesc;
    if (!!this.license.occs) {
      this.license.occs.forEach(o => {
        desc += `\nOccupation ${o.occCode} ${o.occTitle.toLowerCase()}`;
      });
      this.Meta.updateTag({
        name: "description",content: desc
      });
      this.title.setTitle(`Licensing for ${this.license.licTitle}`);
    }

  })
}

解决方法

我认为，如果没有像Angular Universal这样的SSR，就不可能实现。

我在一些项目中遇到了同样的问题。您的元标记确实已在更新，但是网络搜寻器可能只查看了一次。我注意到某些社交网络对爬虫也有相同的限制。我认为随着SPA的普及，我们可能会看到爬虫开始适应。

查看@ angular / platform-browser。

setTitle('blah blah') with a constructor:
  constructor(private titleService: Title) {
    const title = 'MyPage-Title'; // set from the server
    this.titleService.setTitle(title);
  }

angular angular meta