1

I am generating JSON-LD in a script tag in the body section using this solution in AngularJS 1.4.8. The directive is defined as 

myApp.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
  };
}]);

And jsonId is defined in the controller

myApp.controller('MyWorkCtrl',['$scope', '$routeParams', '$http', function($scope, $routeParams, $http){
    $http.get('/works/' + $routeParams.workId + '.json').success(function(data) {   
        $scope.work = data;
        $scope.jsonId = {
            "@context": "http://schema.org",
            "@type": "Book",
            "creator": data['authors'],
            "name": data['title'],
            "isbn": data['isbn'],
            "bookFormat": data['page_size'],
            "numberOfPages": data['pages'],
            "translator": data['translators'],
            "image": data['image']
        };
    });    
}]);

Then it's just a matter of placing the directive 

  <jsonld data-json="jsonId"></jsonld>

It works fine, except that the script tag with Json-LD is generated in the body. How could I move it to head section as Google recommends?

Community
  • 1
  • 1
helcim
  • 789
  • 13
  • 27
  • Where does Google recommend this? Having a JSON-LD `script` in the `body` [should be perfectly fine](http://stackoverflow.com/a/28688394/1591669). – unor Apr 20 '17 at 23:49
  • "Markup is placed inside a script tag in the head of the HTML page." https://developers.google.com/search/docs/guides/intro-structured-data – helcim Apr 21 '17 at 12:05
  • I see, thanks. This is most likely just a formulation that is not as precise as it could be. – unor Apr 21 '17 at 15:05

0 Answers0