如何制作角度为2的应用程序可抓取
我正在使用Angular-Meteor框架构建Angular 2应用程序。
我想谷歌和其他搜索引擎来实现快速和一致的索引 ，让Facebook的分享者和其他铲运机产生我的JS生成内容的预览。
通常，SPA使用PhantomJS呈现页面服务器端并将静态HTML发送给客户端。
当我拦截一个_escaped_fragment_或当我看到google或scraper用户代理时，我可以亲自产生PhantomJS，但是当我在直接在大流量的网站上产生PhantomJS时，我总是会遇到内存泄漏和孤立Phantom实例（我使用NodeJS和此模块）。
对于Angular 1应用程序，我曾经使用Angular-SEO等角度模块来解决这个问题，但似乎很难将此模块转换为角度2。
我还没有找到适合的Angular 2模块。 我应该自己创建它，还是还有其他好的方法来实现这一目标？
Angular2的伟大之处在于，当启动时，根app-element内的所有内容都会消失。 这意味着你可以从你想要抓取的服务器中放入任何你想要的内容。
您可以通过在您的应用中使用服务器呈现的内容版本来生成此内容，或者拥有自定义逻辑。
你可以在这里找到更多的信息：https：//angularu.com/VideoSession/2015sf/angular-2-server-rendering，在这里：https：//github.com/angular/universal
我刚刚创建了ng2-meta，一个可以根据当前路线更改元标记的Angular2模块。
const routes: Routes = [
{
path: 'home',
component: HomeComponent,
data: {
meta: {
title: 'Home page',
description: 'Description of the home page'
}
}
},
{
path: 'dashboard',
component: DashboardComponent,
data: {
meta: {
title: 'Dashboard',
description: 'Description of the dashboard page',
'og:image': 'http://example.com/dashboard-image.png'
}
}
}
];
您也可以从组件，服务等更新元标签。
class ProductComponent {
...
constructor(private metaService: MetaService) {}
ngOnInit() {
this.product = //HTTP GET for product in catalogue
metaService.setTitle('Product page for '+this.product.name);
metaService.setTag('og:image',this.product.imageURL);
}
}
虽然这迎合了支持Javascript的抓取工具（如Google），但您可以为非JavaScript抓取工具（如Facebook和Twitter）设置后备元标记。
<head>
<meta name="title" content="Website Name">
<meta name="og:title" content="Website Name">
<meta name="og:image" content="http://example.com/fallback-image.png">
...
</head>
对服务器端渲染的支持正在进行中。
服务器渲染不是一个体面的谷歌排名的要求...
我有一个论坛，它的谷歌网站地图文件中有大约33000个条目。 这个网站是使用asp.net webforms编写的，并且有来自谷歌的流入请求。 这个网站的移动可读性非常差（这是谷歌的惩罚，它实际上是在我的谷歌搜索控制台中提到的）
我用angular重写了所有内容（部署版本是angular5）。 我使用标题和元服务来设置我的标题和元标记。 所有路由都包含从实际内容中提取的关键字。 我还确保每个带有[routeLink]属性的元素都是一个A标签，我也在其中指定了href元素（这是一个爬虫寻找的...）。当然，我对移动可读性给予了很多关注。
结果：我实际上比以前获得了更多的传入流量，并且在搜索控制台中，我清楚地看到我的索引页面上升了：在30k +页面中，索引中仅包含大约10K个页面。 现在我在索引中有近25k页。
我并不是说服务器渲染是无关紧要的。 使用通用或其他方法会导致更快的下载时间，这可能会导致更高的分数。 但谷歌绝对能够正确索引角度SPA。
编辑：一些证明：如果你谷歌“3ds max threadripper”，你会发现它实际上超过了互联网上最大的硬件网站之一。
链接地址: http://www.djcxy.com/p/31389.html