Angular2 SEO – 如何使angular2应用程序可抓取
我正在使用Angular-Meteor框架构build一个Angular 2应用程序。
我想通过谷歌和其他search引擎实现快速和一致的索引 ，并允许Facebook共享者和其他刮板生成我的JS生成的内容的预览。
通常，SPA使用PhantomJS呈现页面服务器端，并将静态HTML发送给客户端。
当我拦截一个_escaped_fragment_或者当我看到google或者scraper用户代理时，我可以自己产生PhantomJS，但是当在大stream量的网站上直接产生PhantomJS时，我经常遇到内存泄漏和孤立的幻影实例（我使用了NodeJS和这个模块 ）。
对于Angular 1应用程序，我曾经使用Angular-SEO等angular度模块来解决这个问题，但是很难将这个模块转换成angular度2。
我还没有find适合的Angular 2模块。 我应该自己创build它，还是有其他的好方法来实现这一点？
Angular2的伟大之处在于，当启动时，根app-element中的所有内容都会消失。 这意味着你可以把你想要的东西放在你想要被抓取者拾取的服务器上。
您可以通过在您的应用中使用服务器呈现的内容版本来生成此内容，或者具有自定义逻辑。
你可以在这里find更多的信息： https ： //angularu.com/VideoSession/2015sf/angular-2-server-rendering ，在这里： https ： //github.com/angular/universal
我刚刚创build了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' } } } ];
您也可以从组件，服务等更新meta标签。
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); } }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>
对服务器端渲染的支持正在进行中。