Making AngularJS and Parse Web App Crawlable with Prerender

独自空忆成欢 提交于 2019-12-11 08:25:00

问题


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?


回答1:


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

  1. add $locationProvider.hashPrefix("!") to your .config in your main module (I am not using HTML5Mode because it causes issues when manually entering urls).

  2. 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'));

  3. add <meta name="fragment" content="!" /> to the <head> of your index.html

Bonus - dynamic metadata from child controllers for crawlers:

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. 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. 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. 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.




回答2:


If I recall correctly, my three obstacles in making this work were:

a) Making $locationProvider.html5Mode(true) work

b) NOT using a hash prefix (e.g. "#", "#!")

c) Making nginx correctly parse the "escaped fragment".

I believe it's all covered quite well on Prerender's site. If memory serves, their founder also personally responds to emails and provides help.



来源:https://stackoverflow.com/questions/29055917/making-angularjs-and-parse-web-app-crawlable-with-prerender

易学教程内所有资源均来自网络或用户发布的内容,如有违反法律规定的内容欢迎反馈
该文章没有解决你所遇到的问题?点击提问,说说你的问题,让更多的人一起探讨吧!