Question

我正在使用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 模块。我应该自己构建它，还是有任何其他好方法来实现这一目标？

Answer 1

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

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

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

Answer 2

我刚刚创建了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>

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

Answer 3

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

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

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

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

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

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

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

3 个答案: