1

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?

4

2 回答 2

1

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

  1. 添加$locationProvider.hashPrefix("!")到您.config的主模块中（我没有使用 HTML5Mode，因为它在手动输入 url 时会导致问题）。

  2. 将 prerender-parse 添加到 cloud/app.js 的TOP并根据此处找到的说明实施 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'));

  3. 添加<meta name="fragment" content="!" />到<head>你的 index.html

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

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 方法，但是在我尝试的一些配置中它不起作用。

于 2015-03-16T14:09:04.913 回答
0

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

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

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

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

我相信在 Prerender 的网站上已经很好地涵盖了这一切。如果没记错的话，他们的创始人也会亲自回复电子邮件并提供帮助。

于 2015-03-15T00:40:22.420 回答