用于网络爬虫的 Angular 2+ SEO [重复]

Posted 2023-02-23

【中文标题】用于网络爬虫的 Angular 2+ SEO [重复]

【英文标题】：Angular 2+ SEO for web crawlers [duplicate]

【发布时间】：2018-08-22 15:07:15

【问题描述】：

我有我的 angular 4+ webapp，它在不同的路由上有不同的标题。所有组件都通过 angular 代码加载，因此，一切都是 javascript，除了根组件之外没有太多 html。因此，谷歌无法抓取任何链接。搜索引擎优化受到了打击。我想知道如果我添加页眉和页脚 HTML 代码并将其默认标记为隐藏，谷歌和其他社交网站是否能够抓取我的页面。

我知道我们可以使用 Angular Universal 并使用服务器端渲染，但是对于临时修复，上述解决方案是否可行？另外，除了从服务器到客户端传输的额外字节之外，它还有什么缺点吗？

这个问题不是重复的，因为它指的是 angular 2+ 版本。大多数答案都是 angularjs。

【参考方案1】：

Google 能够抓取有角度的网站。如果您的意思是给定一个页面，它不会抓取其他链接页面，这可能是因为您指向其他页面的链接不是正确的锚点（<a ...>）。您可以提供站点地图以确保 Google 可以看到您的所有页面。

然后，您需要确保在每个页面上设置正确的标题和元数据

您可以使用 Angular 的 meta 和 TitleService (https://angular.io/guide/set-document-title) 来设置页面时的标题

 this.titleService.setTitle( "Page-specific title" )

还有 Angular 的 Meta 服务 (https://angular.io/api/platform-browser/Meta)

this.meta.updateTag( name: 'description', content: 'My page-specific description' );

但他们最好的解决方案仍然是角度通用

【讨论】：

我已经向 webmaster.btw 添加了一个合适的站点地图，你能详细说明没有合适的锚标签吗？我需要为锚标签添加任何属性吗？

@jalakvora 你能抓取这个网站吗？

【参考方案2】：

两件事。首先，不管你没有 HTML，Google bot 无论如何都能够解析你的网站（他们的问题是其他 bot 可能没有）。

如果您正确使用 Angular 而不以奇怪的方式（奇怪 = jQuery 或类似方式）操作 DOM，您不会使用 setInterval 或 setTimeout 并且您只使用了 Angular 方法，您应该会发现运行您的应用程序时有任何问题角通用。

在使用任何 hack 之前先尝试 Angular Universal，因为在 Angular 中实现 s-s-r 功能很容易 (https://angular.io/guide/universal)

祝你好运！

【讨论】：

当我在 google 上搜索时，它无法索引我的任何着陆页路由。我添加了适当的元标记。这可能是什么原因？另外，当你说“如果你正确使用 Angular”时需要做些什么。我知道 Angular s-s-r 很容易设置，但我们只需要临时修复。