Angular2 SEO - 如何使 Angular 2 应用程序可抓取答案

【问题标题】：Angular2 SEO - How to make an angular 2 app crawlableAngular2 SEO - 如何使 Angular 2 应用程序可抓取
【发布时间】：2015-11-25 10:42:03
【问题描述】：

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

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

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

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

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

我还没有找到任何合适的 Angular 2 模块。我应该自己构建它，还是从今天开始有其他好的方法来实现它？

【问题讨论】：

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

【解决方案1】：

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

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

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

【讨论】：

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

【解决方案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），但您可以为非 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>

正在支持服务器端渲染。

【讨论】：

这似乎不适用于 Angular Universal，页面在服务器端生成。 'document.querySelector 未定义'
我使用 ng2meta 插件，它似乎不像网站管理员工具/谷歌抓取它。它仍然认为我有重复的元标记，例如对于描述。有什么想法吗？

【解决方案3】：

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

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

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

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

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

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

【讨论】：