App Indexing & Sitemaps in Single Page Apps (Firebase + Angular)

    I started this article while working on the mypatco app and for the past three years or so I've been talking about developing single page applications. I always talk about the performance and not much on seo. With my other projects which require a more complex middle-ware I've looked at google's notes on how to properly setup for some example but found some of them just don't work or takes a considerable amount of time to appear in the results. Found a npm page that might be helpful grunt-jsondl, haven't tried it but below is how I handled in the website. However note that the station markup isn't working or just not showing up in google's testing tools.

HTML

<div ng-controller="TestController">
  <jsonld data-json="jsonId"></jsonld>
</div>

Javascript

var myApp = angular.module('application', []);

myApp.controller('TestController', ['$scope', function($scope) {
  $scope.jsonId = {
    "@context": "http://schema.org",
    "@type": "Place",
    "geo": {
      "@type": "GeoCoordinates",
      "latitude": "40.75",
      "longitude": "73.98"
    },
    "name": "Empire State Building"
  };
}]).directive('jsonld', ['$filter', '$sce', function($filter, $sce) {
  return {
    restrict: 'E',
    template: function() {
      return '<script type="application/ld+json" ng-bind-html="onGetJson()"></script>';
    },
    scope: {
      json: '=json'
    },
    link: function(scope, element, attrs) {
      scope.onGetJson = function() {
        return $sce.trustAsHtml($filter('json')(scope.json));
      }
    },
    replace: true
  };
}]);

Sitemap
   Created the sitemap by hand really and wouldn't recommend it. I don't want to promote any tools that I can't say are legit but there are a few cloud based ones that can speed this up.

<?xml version="1.0" encoding="UTF-8"?>
<urlset xmlns="http://www.sitemaps.org/schemas/sitemap/0.9"> 
  <url>
    <loc>http://www.example.com/foo.html</loc> 
  </url>
</urlset>

Notes:

1.  Its important to choose the correct schema but sometimes the Schemas overlap in meaning as well as logic. For example article and blog post. The end result is the same and format very similar. For the mypatco website I went with the TrainStation and TrainTrip.  
2. AMP - Accelerated Mobile Pages, is a very helpful way to tell google a single application application that it is mobile ready and has static content to server up faster.
3. Android - Reminder to handle in a android app when using app indexing.
• java.net.URLEncoder.encode(finalPartOfString, "utf-8")
• Test Your Implementation  |  Firebase