angularjs - 使用 AngularJS 等单页框架时如何使用 NodeJS 解决社交分享和搜索引擎问题

标签 angularjs node.js optimization seo

我读了一篇 article关于 AngularJS 中的社交共享问题以及如何使用 Apache 作为代理来应对。

该解决方案适用于小型网站。但是如果一个网络应用程序有 20 多个不同的页面,我必须为所有页面编写 url 并创建静态文件。此外,使用 PHP 和 Apache 将不同的堆栈添加到应用程序。

  1. 我们可以使用NodeJS作为代理并重新编写url,方法是什么?
  2. 有没有办法尽量减少静态文件的创建?
  3. 有没有办法一起删除代理、url-rewrite 和静态文件?例如,在我们的 NodeJS 应用程序中检查用户代理,如果它是 facebook bot 或 twitter 等,我们使用请求模块下载我们的页面并为他们返回原始 html 代码,这是一个合理的解决方案吗?

最佳答案

通常,当有人在社交网络中分享 URL 时,该社交网络会请求该页面生成预览/缩略图(也称为“抓取”)。 这些爬虫很可能不会运行 javascript,因此他们需要该页面的静态 html 版本。 这同样适用于搜索引擎(即使谷歌和其他公司开始支持 javascript 网站)。

这里有一个 SPA 仍然支持爬虫的好方法:

  • 在浏览您的应用程序时以 Angular 使用 history.pushState 获取虚拟 url(即没有 # 的 url)
  • 服务器端(node.js 或任何),检测请求是来自用户还是机器人(例如,使用此库检查用户代理 https://www.npmjs.com/package/is-bot )
  • 如果请求url有文件扩展名,可能是静态资源请求(图片、.css、.js),代理获取静态文件
  • 如果请求 url 是一个页面,对于真实用户,如果 url 是一个页面(即不是静态资源),则始终提供加载 angular 应用程序的 index.html(专业提示:将此文件缓存在内存中)
  • 如果请求 url 是一个页面,提供请求 url 的预呈现版本(它们不会运行 javascript),这是困难的部分(旁注:ReactJS 使这个问题变得更简单),您可以使用类似 https://prerender.io/ 的服务他们会负责加载你的 Angular 应用程序,并将每个页面保存为 html(如果你好奇,他们会在内存中使用一个名为 PhantomJS 的 headless /虚拟浏览器来做到这一点,模拟真实用户点击“另存为”会做什么..."),然后您可以请求这些预渲染页面并将其代理到机器人请求(如社交网络报废程序)。如果需要,可以在您自己的服务器上运行预渲染实例。

我描述的所有服务器端进程都是通过预渲染在这个 express.js 中间件中实现的: https://github.com/prerender/prerender-node/blob/master/index.js (即使您不喜欢预渲染,也可以使用该代码作为实现指南)

或者,这是一个仅使用 nginx 的实现示例: https://gist.github.com/thoop/8165802

关于angularjs - 使用 AngularJS 等单页框架时如何使用 NodeJS 解决社交分享和搜索引擎问题,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/36731666/

相关文章:

javascript - AngularJS $filter 日期未按预期工作

javascript - 在 Nodejs 中解析大型 JSON 文件并独立处理每个对象

linux - 在 `perf stat` 的输出上运行 `perf record` ?

angularjs - 在代理后面的 Eclipse 中创建 Angular2 项目

javascript - 绑定(bind)输入与 ngResource get() 搜索与 AngularJS

html - 不能使用 webrtc.io 包;浏览器上的 JavaScript 错误

node.js - 安装新软件包时 npm-force-resolutions 不起作用

c - 有没有办法优化这个语句?

optimization - 在汇编程序中使用指针偏移是否比递减更快?

javascript - 为什么 Angularjs ng-pattern 不能使用以下正则表达式?