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

Question

构建一个 Angular 2 应用程序

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

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

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

对于 Angular 1 应用程序，我曾经使用 angular 模块解决此问题，例如 Angular-SEO，但似乎很难将此类模块转换为 angular 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,
    <strong>data: {
      meta: {
        title: 'Home page',
        description: 'Description of the home page'
      }
    }</strong>
  },
  {
    path: 'dashboard',
    component: DashboardComponent,
    <strong>data: {
      meta: {
        title: 'Dashboard',
        description: 'Description of the dashboard page',
        'og:image': 'http://example.com/dashboard-image.png'
      }
    }</strong>
  }
];

您也可以从组件、服务等更新元标记。


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>

正在支持服务器端渲染。

Answer 3

服务器端渲染不是获得良好 google 排名的必要条件...

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

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

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

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

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

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

Angular2 SEO - How to make an angular 2 app crawlable

seo

node.js

phantomjs

angular2-meteor

angular