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

时间:2015-11-25 10:42:03

标签: node.js seo phantomjs angular angular2-meteor

我正在使用Angular-Meteor framework构建一个Angular 2应用。

我希望通过谷歌和其他搜索引擎实现快速一致的索引,并允许Facebook共享者和其他抓取者生成我生成的JS内容的预览。

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

当我拦截_escaped_fragment_或者当我看到google或scraper用户代理时,我自己可以自己生成PhantomJS,但是我总是在直接在流量很大的网站上生成PhantomJS时遇到内存泄漏和孤儿Phantom实例(我使用NodeJS和this module)。

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

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

3 个答案:

答案 0 :(得分:26)

关于Angular2的好处是,当启动时,根应用程序元素中的所有内容都会消失。这意味着您可以从服务器中放置您想要的任何内容,以供抓取工具使用。

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

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

答案 1 :(得分: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>

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

答案 2 :(得分:-1)

Serverside渲染不是一个体面的谷歌排名的要求......

我在google站点地图文件中有一个包含大约33.000个条目的论坛。这个网站是使用asp.net webforms编写的,并有来自谷歌的传入请求的不错流。这个网站确实有非常糟糕的移动可读性(这一点受到谷歌的惩罚,它实际上在我的谷歌“搜索控制台”中提到了这一点)

我用angular重写了所有内容(部署版本是angular5)。我使用Title和Meta服务来设置我的标题和元标记。所有路由都包含从实际内容中提取的关键字。我还确保每个带有[routeLink]属性的元素都是一个A标签,我也在其上指定了href元素(这是爬虫寻找的东西......)当然,我非常关注移动可读性。

结果:我实际上获得了比以前更多的传入流量,并且在搜索控制台中我清楚地看到我的索引页面已经上升:在30k +页面中,索引中只包含大约10K。现在我在索引中有近25k页。

我并不是说服务器端渲染是无关紧要的。使用通用或其他方法将导致更快的下载时间,这可能会导致更高的分数。但谷歌肯定能够正确索引角度SPA。

编辑:一些证据:如果你谷歌“3ds max threadripper”,你会发现它实际上超过了互联网上最大的硬件网站之一。