【问题标题】：SEO: how to index data from a client-side api requestsSEO：如何从客户端 api 请求中索引数据
【发布时间】：2019-01-01 12:20:07
【问题描述】：

我不是在寻找有关如何设置它的特定教程。我实际上想知道什么是可能的，什么是不可能的。

在我的 Angular 6 应用程序中，我正在学习如何在服务器端加载内容，以便机器人可以索引客户端数据。有很多来自 api 请求的数据，我也想被抓取。例如，以下代码从我的电子商务 API 获取当前页面项目数据。

在我的 Angular 组件中

getProductById(product_id) {
    const data = { product_id: product_id };
    return this.http.get<any>( api_url + '/getProductById', {params: data} );
}

这是对我的 api 的调用，它从 BigCommerce 返回数据（见下文）

我的 Express API

getProductById = (req, res, next) => {
    let product_id = req.query.product_id;
    return bc_v3.get(`/catalog/products/${product_id}`).then(data => {
        return data; // this data will then return back to the client async
    });
};

是否可以索引来自 API 的数据？

从 API 返回的数据可以被 SEO 机器人索引吗？

【问题讨论】：

在 youtube 上的快速搜索提供了很多关于 SEO 和 Angular 的可能性的帖子。 Angular 团队成员的这一点是一个很好的起点：youtube.com/watch?v=fiT5g9KSxmw
我看了整件事。谢谢...我的主要问题仍然存在。 “是否可以索引来自 API 的数据”
所以你想索引原始数据？
来自 API 的数据是我的用户在 Google 上搜索的内容。如果我问错了问题，也请告诉我。
如果您使用 Angular Universal 渲染您的页面，如下面的答案所示，那么 google 将能够正确索引您的网站。只需添加站点地图以确保您的所有页面都可被发现

标签： javascript angular typescript seo angular-universal

【解决方案1】：

如果您使用服务器端预渲染并将数据注入您的 html，我相信它可以。这里有一个如何使用 .Net Core 执行此操作的示例：https://github.com/MarkPieszak/aspnetcore-angular2-universal

【讨论】：

似乎找出是否可能的唯一方法是尝试，但到那时为时已晚。我真的在找人说它可以或不能完成

【解决方案2】：

这个答案分为两部分：

谷歌机器人
facebook、instagram 和其他社交媒体机器人

对于 google bots，您无需使用 Angular 进行任何额外操作，即可让 google bot 呈现您的所有页面数据。您可以阅读这些链接以了解 SPA 是如何由 google bot 呈现的。 John Mueller 创建了这个google group 来帮助开发人员解决他们对 google bot 在处理 SPA 时的工作原理和工作方式的疑问。

简而言之，如果您的网站管理员 fetch as google 工作正常，那么您无需担心 google bot 会将页面编入索引。您只需要创建正确的站点地图并正确生成标题元标记

对于 社交媒体机器人（例如 facebook 爬虫），您需要合并 angular universal，以便您的页面在共享时具有适当的预览。要实现社交分享，您必须使用resolve 从后端获取数据。
例如 routing.module.ts 应该能够在组件初始化之前从后端获取数据

        path: 'content/:id',
        component: contentDetailComponent,
        resolve: {
          content: DetailResolve
        }

【讨论】：