Angular2 SEO - 如何使角度2应用程序可抓取

Question

Angular2 SEO - 如何使角度2应用程序可抓取

Ray*_*jax 28 seo node.js phantomjs angular2-meteor angular

我正在使用Angular-Meteor框架构建一个Angular 2应用程序.

我想实现快速和一致的索引谷歌和其他搜索引擎,让Facebook的分享者和其他刮削器生成我的JS生成内容的预览.

通常,SPA使用PhantomJS呈现页面服务器端并将静态HTML发送到客户端.

当然,我可以生成PhantomJS自己,当我拦截_escaped_fragment_或当我看到谷歌或刮刀用户代理,但我总是经历了内存泄漏,并直接与大流量的网站产卵PhantomJS当孤儿幻影情况下(我用的NodeJS和这个模块).

对于Angular 1应用程序,我曾经使用像Angular-SEO这样的角度模块来解决这个问题,但似乎很难将这样的模块转换为角度2.

我还没有找到任何合适的Angular 2模块.我应该自己构建它,还是有任何其他好方法来实现这一点？

Answer 1

jor*_*are 26

关于Angular2的好处是,当启动时,root app-element中的所有内容都会消失.这意味着您可以从希望由爬虫获取的服务器中放置您想要的任何内容.

您可以使用应用程序中内容的服务器呈现版本生成此内容,也可以使用自定义逻辑.

您可以在这里找到更多信息:https://angularu.com/VideoSession/2015sf/angular-2-server-rendering 和这里:https://github.com/angular/universal

伟大的视频,聪明的SEO,比幻影方法更好 (2认同)
这个答案现在已被较新版本的 Angular 弃用，因为它是@angular/platform-server 的一部分 (2认同)

Answer 2

WeN*_*igh 8

我刚创建了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),但您可以为Facebook和Twitter等非Javascript抓取工具设置回退元标记.

<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>

Run Code Online (Sandbox Code Playgroud)

正在进行对服务器端呈现的支持.

归档时间：	9 年，11 月前
查看次数：	24056 次
最近记录：	7 年，9 月前