Question

我一直试图让我的AngularJS和Parse网络应用程序可以抓取谷歌和Facebook共享，甚至可以使用prerender-parse我无法让它工作。我尝试使用this Parse Developers线程中的提示来启用HTML5模式。使用Facebook URL调试器或Google Fetch Bot无效。任何人都可以分享他们已经使用并且目前正在使用的完整的分步设置吗？

Answer 1

在Prerender.io团队的一些帮助下，以下是通过Facebook和Google抓取工具测试成功抓取的概述步骤。请记住，这是针对在Parse.com后端运行的AngularJS应用程序

将$locationProvider.hashPrefix("!")添加到主模块中的.config（我没有使用HTML5Mode，因为它会在手动输入网址时出现问题）。
将prerender-parse添加到您的cloud / app.js的 TOP ，并根据找到的说明here
执行prerender-parse
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>

Bonus - 来自爬虫程序的子控制器的动态元数据：

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方法，但它在我试过的一些配置中没有用。

Answer 2

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

a）使$ locationProvider.html5Mode（true）正常工作

b）不使用散列前缀（例如“＃”，“＃！”）

c）使nginx正确解析“转义的片段”。

我相信Prerender网站上的所有内容都很好。如果内存服务，他们的创始人也会亲自回复电子邮件并提供帮助。

使用Prerender进行AngularJS和Parse Web App可抓取

2 个答案: