使用Prerender使AngularJS和Parse Web App可爬网 [英] Making AngularJS and Parse Web App Crawlable with Prerender
问题描述
我一直在尝试让AngularJS和Parse网络应用程序可抓取，以供Google和Facebook分享，甚至使用 prerender -parse 我无法使其正常运行.我尝试使用来自 this Parse Developers线程以使用HTML5模式.使用Facebook URL调试器或Google Fetch Bot无法进行任何操作.任何人都可以分享他们已经使用并且目前正在使用的完整逐步设置吗?
I have been trying to get my AngularJS and Parse web app crawlable for Google and Facebook share and even with prerender-parse I have not been able to get it working. I have tried using tips from this Parse Developers thread for engaging HTML5 Mode. Nothing will work using the Facebook URL debugger or Google Fetch Bot. Can anyone share a full step by step setup that they have used and is currently working?
推荐答案
在Prerender.io团队提供一些帮助之后，以下是概述的步骤，这些步骤导致Facebook和Google搜寻器测试成功进行了搜寻.请记住，这是针对在Parse.com后端上运行的AngularJS应用
After some help from Prerender.io team, here are the outlined steps that resulted in successful crawling by the Facebook and Google crawler tests. Remember this is for an AngularJS app running on a Parse.com backend
-
在主模块的
.config中添加$locationProvider.hashPrefix("!")(我不使用HTML5Mode，因为在手动输入网址时会引起问题).
add
$locationProvider.hashPrefix("!")to your.configin your main module (I am not using HTML5Mode because it causes issues when manually entering urls).
将prerender-parse添加到您的cloud/app.js的 TOP 中，并根据
add prerender-parse to the TOP of your cloud/app.js and implement prerender-parse according to the instructions found 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'));
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>中.
add <meta name="fragment" content="!" /> to the <head> of your index.html
奖金-爬网程序的子控制器中的动态元数据:
Bonus - dynamic metadata from child controllers for crawlers:
B1.如果尚无控制器，则将带有事件的控制器添加到您的主应用程序中.
B1. Add a controller with event to your main app if you don't already have one.
<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.
B3. In your child controller set your metadata object and call the $emit function to cast the event to the MainCtrl.
$scope.$emit('metaUpdate', metadata);
B4.现在，您可以在index.html
B4. Now you can add all of the metadata to your head in your 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方法，但是在我尝试过的一些配置中它不起作用.
B4. One caveat is that this method does not control the timing of the cache by prerender.io. So only basic queries and data manipulation can be performed before the population of the metadata object. If someone figures out a good way to deal with timing, let me know. I tried the window.prerenderReady method provided by prerender.io, but it did not work in a few configurations I tried.
这篇关于使用Prerender使AngularJS和Parse Web App可爬网的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
