Question

我有使用Angular Universal进行服务器端渲染的Angular 7应用程序。（主要关注教程https://blog.angular-university.io/angular-universal/）

当前代码已在nodejs上部署和运行（4000-使用apache2服务器使用反向代理，以便我可以使用端口80-在此情况下可以提及）。

在我的组件内部（我的所有组件都被深嵌套），我正在使用以下代码

....
constructor(private title: Title){}
....

ngOnInit() {
   this.title.setTitle('my title')
}

请检查（http://public.ecokrypt.com）。如果单击“仪表盘”，则在浏览器上确实看到标题已更改。我还会看到带有“检查”的新标题。但是，如果我尝试“查看源代码”，则不会显示新标题。它总是向我显示我的第一个默认页面（登录=>标题“用户”）中的数据。请不要让我的index.html包含“ EcokryptUiapp”作为标题，我的第一个默认登录页面包含“ User”作为标题。因此，它第一次从服务器渲染。

在我的第一页之后，似乎没有任何服务器端渲染。同样的问题也与facebook / twitter meta标签有关。由于这个原因，如果我尝试调试facebook链接/验证twitter卡，则会出现错误。

我也在我的本地开发环境上进行了验证，查看源始终显示我的首页，内容从未更改。

我错过任何一步了吗？最近三天，我一直在坚持这一点，只是找不到任何解决方案。任何帮助将不胜感激。

Answer 1

首先呈现HTML，然后在基于JavaScript框架（Angular，React ..）的网站中执行JavaScript。搜索引擎读取呈现的HTML，其中缺少标题和大部分内容，这些内容后来由JavaScript创建。尽管从2018年起，Google会使用JavaScript执行和CSS来抓取页面，但并非所有搜索引擎都可以抓取页面。

您需要使用Node.js将Angular应用设置为服务器端，以具有SEO。

将Angular Universal for SEO软件包与Node.js结合使用以具有服务器端Angular应用程序。

参考： https://snipcart.com/blog/angular-seo-universal-server-side-rendering

Answer 2

经过大量尝试错误后，我发现了问题。在我的代码深处的某些地方，我正在使用Windows位置，并且由于相同而在服务器端出现错误。因此，在第一个默认页面之后，服务器未呈现任何内容。一切都只在浏览器端得到评估。

希望有人会觉得有用。

Angular Universal-在“查看源代码”中看不到标题，但可以在检查期间看到

2 个答案: