28

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

我想通过 google 和其他搜索引擎实现快速和一致的索引，并允许 Facebook 共享器和其他爬虫生成我的 JS 生成内容的预览。

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

当然，当我拦截 _escaped_fragment_ 或者当我看到 google 或 scraper 用户代理时，我可以自己生成 PhantomJS，但是当直接在流量很大的网站上生成 PhantomJS 时，我总是遇到内存泄漏和孤立的 Phantom 实例（我使用了 NodeJS 和这个模块）。

对于 Angular 1 应用程序，我曾经使用Angular-SEO等 Angular 模块解决此问题，但似乎很难将此类模块转换为 Angular 2。

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

4

3 回答 3

26

Angular2 的伟大之处在于，当启动时，根应用程序元素中的所有内容都会消失。这意味着您可以从服务器中放入您想要被爬虫抓取的任何内容。

您可以在应用程序中使用服务器呈现的内容版本来生成此内容，或者使用自定义逻辑。

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

于 2015-11-25T14:04:25.950 回答
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），但您可以为非 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>

对服务器端渲染的支持正在进行中。

于 2016-07-22T10:08:56.650 回答
0

服务器端渲染不是一个体面的谷歌排名的要求......

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

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

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

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

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

于 2018-01-03T14:16:07.703 回答