Open graph issue with AngularJS + Phantom

问题

I am running a setup of AngularJS AJAX application, and using PhantomJS and the Angular-seo library in order to serve the crawlers with actual mark up instead of JS code.

Unfortunately I am getting an error that says:

The privacy settings for this attachment prevent you from posting it to this Timeline.

This seems to be an issue that concerns many users, bu has received no attention whatsoever at the developers community.

My of meta tags, which I must mention that are all filled with the current information from test that I've conducted:

  <meta property="og:type" content="website">
  <meta property="og:title" content="{{model.title}}" />
  <meta property="og:description" content="{{layout.og.description()}}" />
  <meta property="og:image" content="{{layout.og.image()}}" />
  <meta property="og:url" content="{{layout.og.currentUrl()}}" />

What could be the problem

回答1:

If you Inspect those meta tags, even while angular is running, the content attribute is left like that... unlike a ng-bind or something that will replace at runtime. To circumvent this, I created the following directive:

angular
  .module('app')
  .directive('ngContent', [
    function() {
      return {
        link: function($scope, $el, $attrs) {
                $scope.$watch($attrs.ngContent, function(value) {
                  $el.attr('content', value);
                });
              }
      };
    }
  ])
;

Then implemented in the following manner:

<meta property="og:description" ng-content="myDescriptionFunction()" />

This will create a clean content="Some description here." attribute in the meta tag as that content dynamically changes... (watch the element in chrome inspector as you browse) seems to work for me!

回答2:

The solution is basically to use some kind of server-side user-agent detection to pick up whenever a social media crawler arrives. http://www.michaelbromley.co.uk/blog/171/enable-rich-social-sharing-in-your-angularjs-app

回答3:

Actually you can't have Angular (or any other front-end js) do that because the Facebook crawler Doesn't execute javascript. Therefore, these tags have to be created in the backend (using node.js or php for example)

See How to do Facebook Open Graph friendly meta tags with client-side template engines like AngularJS, Mustache, Handlebars

来源：https://stackoverflow.com/questions/19426589/open-graph-issue-with-angularjs-phantom

标签

angularjs

facebook-opengraph

phantomjs