使用 Prerender 使 AngularJS 和解析 Web 应用程序可抓取

Question

我一直在努力让我的 AngularJS 和 Parse 网络应用程序可抓取 Google 和 Facebook 共享，甚至使用 prerender-parse I have not been able to get it working. I have tried using tips from this Parse 开发者线程以参与 HTML5 模式.使用 Facebook URL 调试器或 Google Fetch Bot 将无法正常工作。任何人都可以分享他们已经使用并且目前正在运行的完整分步设置吗？

Answer 1

如果我没记错的话，我完成这项工作的三个障碍是：

a) 使 $locationProvider.html5Mode(true) 工作

b) 不使用散列前缀（例如“#”、“#!”）

c) 让 nginx 正确解析 "escaped fragment".

我相信 Prerender 的网站上对这一切都进行了很好的介绍。如果没记错的话，他们的创始人也会亲自回复邮件并提供帮助。

Answer 2

在 Prerender.io 团队的一些帮助下，以下是导致 Facebook 和 Google 爬虫测试成功爬行的概述步骤。请记住，这是针对 Parse.com 后端

上的 AngularJS 应用程序运行

将 $locationProvider.hashPrefix("!") 添加到主模块中的 .config（我没有使用 HTML5Mode，因为它会在手动输入 url 时导致问题）。
将 prerender-parse 添加到 cloud/app.js 的 TOP 并根据找到的说明实现 prerender-parse here

var express = require('express'); var app = express(); var parseAdaptor = require('cloud/prerender-parse.js'); app.use(require('cloud/prerenderio.js').setAdaptor(parseAdaptor(Parse)).set('prerenderToken','YOUR_PARSE_TOKEN'));
将 <meta name="fragment" content="!" /> 添加到 index.html

<head>

奖励 - 来自爬虫子控制器的动态元数据：

B1。如果您还没有一个带有事件的控制器，请将其添加到您的主应用程序。

<html lang="en" ng-app="roommi" ng-controller="MainCtrl">`

.controller('MainCtrl', ['$rootScope', '$scope', '$state', '$stateParams', function($rootScope, $scope, $state, $stateParams) {
    $scope.$on('metaUpdate', function(event, metadata) {
        $scope.metadata = metadata;
    });
}

B3。在您的子控制器中设置您的 metadata 对象并调用 $emit 函数将事件投射到 MainCtrl。

$scope.$emit('metaUpdate', metadata);

B4。现在您可以在 index.html

中将所有元数据添加到您的头部

<meta  property="og:url"             content="{{metadata.url}}"/> 
<meta  property="og:title"           content="{{metadata.title}}"/> 
<meta  property="og:image"           content="{{metadata.image}}"/> 
<meta  property="og:description"     content="{{metadata.desc}}"/>`

B4。需要注意的是，此方法不会通过 prerender.io 控制缓存的时间。因此在填充 metadata 对象之前只能执行基本的查询和数据操作。如果有人想出处理时间的好方法，请告诉我。我尝试了 prerender.io 提供的 window.prerenderReady 方法，但它在我尝试的一些配置中不起作用。

使用 Prerender 使 AngularJS 和解析 Web 应用程序可抓取

Making AngularJS and Parse Web App Crawlable with Prerender

web-crawler

google-crawlers

prerender

angularjs

parse-platform