Login/Register
Making AngularJS and Parse Web App Crawlable with Prerender
Asked Answered
Solved angularjsparse-platformweb-crawlergoogle-crawlersprerender
V

2

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?

Vaporize answered 15/3, 2015 at 0:31 Comment(0)
V
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.

Vaporize answered 16/3, 2015 at 14:9 Comment(4)
I have everything set up except step #1. I don't see a .config in my cloud code directory when viewing hidden files. Would I do it like this? app.config(function ($routeProvider, $locationProvider){ $locationProvider.hashPrefix("!") }); – Pregnant
That obviously didn't work. Can you help guide me there? Also, does the <meta name="fragment" content="!" /> go in the index.html of my CloudCode "public" folder, or in the head of my .ejs files? – Pregnant
Joel, that is what I have and it works. <meta name="fragment" content="!" /> should go in the <head> of your index.ejs file in the cloud folder. I do not have an index.html file in the public folder. I only have on .ejs file and it loads .html templates – Vaporize
Thanks for the reply. I will put that meta tag into my ejs files instead of the index and that should help. However, when I put app.config() within my app.js file I get an error when I try to deploy the code saying that "app" has no method called "config". Is there another place I should be inserting this? Thanks again for your assistance. I've been banging my head on the Facebook thing all week. – Pregnant
L
0

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.

Largeminded answered 15/3, 2015 at 0:40 Comment(3)
I have (a) and (b) down, the problem is with getting (c) to work properly with Parse.com and Prerender. – Vaporize
Oh, would you look at that. I actually turned it off on nginx, and used prerender_rails instead. – Largeminded
Fixed my problems after talking to Prerender.io. My answer above. – Vaporize

© 2022 - 2025 — McMap. All rights reserved.