标题和元标记未在服务器的角度SSR中呈现

Question

我已经在前端使用Angular 6开发了一个网站。默认情况下，Angular不是SEO友好的，因此，为了做到这一点，我以Angular-Universal或Angular SSR（服务器端渲染）的方式实现了它。我更新了代码并比较了以前和现在的页面源，我可以在标记<app-root>和中看到我的应用程序</app-root>，然后才出现“正在加载...”。

我现在用的是MetaService和TitleService从@angular/platform-browser更新所需<meta>的Facebook和Twitter和标签<title>分别标记。

问题是当我在本地系统中运行节点服务器时，view-source向我显示了渲染的meta标签，但是当我在AWS VM上的节点服务器中运行相同的代码时，我没有得到渲染的meta标签，但获得了其他应用程序代码可用。

更新： 添加meta标签的功能

updateMetaTags(egElement: Elements[]) {
    this.url = 'https://example.com/eg/' + this.id;
    const title = egElement[1].innerHTML;
    this.tweetText = 'Check the latest blog on \"' + title + '\"';
    this.meta.addTags([
      { property: 'og:url', content: this.url },
      { property: 'og:type', content: 'website' },
      { property: 'og:title', content: title },
      { property: 'og:description', content: 'Author: ' + egElement[2].innerHTML },
      { property: 'og:image', content: this.egElement[3].img }
    ]);
  }

我在ngOnInit（）中调用此函数。它可以在我的本地计算机上正确执行渲染，但不能在服务器上进行渲染。

egElement并id从服务调用返回到后端，并且meta服务已导入并注入到构造函数中。

Answer 1

如果您使用自定义 XHR 调用，例如不使用 Angular HttpClient，SSR 将不会等待 API 调用响应（如果使用第 3 方库检索 API 数据，也可能会发生这种情况）。查看您的网站，除了页面布局/页眉/页脚之外，没有发生服务器端渲染

我猜测这与 SSR 中未检索到 API 数据有关。也许您可以用一些相关信息来更新您的问题？

有一个经过良好测试和维护的库，称为ngx-meta通用（SSR）兼容。您可以查看他们的实现和演示，或者尝试一下他们的库https://github.com/fulls1z3/ngx-meta