针对网络抓取工具的Angular 2+ SEO

时间:2018-03-14 07:20:34

标签: angular seo single-page-application google-crawlers server-rendering

我的角度4+ webapp在不同的路径上有不同的标题。所有组件都通过角度代码加载,因此,一切都是javascript,除了根组件之外没有太多的HTML。由于这个,谷歌不能抓取任何链接。搜索引擎优化已经受到重创。我想知道如果我添加我的页眉和页脚HTML代码并将其标记为隐藏,默认情况下google和其他社交网站都可以抓取我的页面。

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

这个问题不重复,因为它指的是角度2+版本。大部分答案都是angularjs。

2 个答案:

答案 0 :(得分:1)

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

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

你可以使用有角度的元和TitleServicehttps://angular.io/guide/set-document-title)在你登陆页面时设置标题

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

和有角度的Meta服务(https://angular.io/api/platform-browser/Meta

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

但他们最好的解决方案仍然是角度普遍的

答案 1 :(得分:0)

两件事。首先,无论您没有HTML,谷歌机器人无论如何都能够解析您的网站(他们的问题是其他机器人可能不会)。

如果正确使用Angular而没有以奇怪的方式操纵DOM(怪异= jQuery或类似),你不使用setIntervalsetTimeout并且你只使用Angular方法你应该发现任何运行问题你作为Angular Universal应用。

首先尝试使用Angular Universal然后使用任何hack,因为在Angular中实现SSR功能很容易(https://angular.io/guide/universal

祝你好运!