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

问题描述 投票:28回答:3

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

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

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

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

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

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

node.js seo phantomjs angular angular2-meteor
3个回答
25
投票

关于Angular2的好处是,当启动时,root app-element中的所有内容都会消失。这意味着您可以从希望由爬虫获取的服务器中放置您想要的任何内容。

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

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


8
投票

我刚刚创建了一个Angular2模块ng2-meta,它可以根据当前路由更改元标记。


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>

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


-1
投票

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

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

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

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

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

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

© www.soinside.com 2019 - 2024. All rights reserved.