我读了一篇 article关于 AngularJS 中的社交共享问题以及如何使用 Apache 作为代理来应对。
该解决方案适用于小型网站。但是如果一个网络应用程序有 20 多个不同的页面,我必须为所有页面编写 url 并创建静态文件。此外,使用 PHP 和 Apache 将不同的堆栈添加到应用程序。
- 我们可以使用NodeJS作为代理并重新编写url,方法是什么?
- 有没有办法尽量减少静态文件的创建?
- 有没有办法一起删除代理、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/