When sharing on facebook, showing angular brackets instead of content

Question

AngularJS displays content fine in the title and meta tags, but when I share it with facebook or google, angular {{}} is displayed in the popup.

The code:

<div ng-controller="MyCtrl"> <title>{{mDetails.display1}} - Subtitle</title> <meta name="description" content="{{mDetails.display1}} - {{mDetails.address1}} , {{mDetails.city}}, {{mDetails.state}}, {{mDetails.country}}"> . . 

Note. I am already using ng-cloak .

Thanks for the help.

Answer 1

Two ways, as mentioned on another issue: - og meta tags, social buttons and corner

Method 1: -

This cannot be done using javascript. Some people think that Facebook is reading what is now on the page. Not this. It makes a separate request to your server using the same url (from window.location.href) using its Scraper, and the Facebook scraper does not run javascript. That's why you get {{page_title}} when you click on something like the Facebook share button. Your content must be generated by the server, so when Facebook is sent to the address, it receives the content that it needs, without the need for javascript. You can partially render server-side rendering.

 You can allow your server side technology to render the content. You can use the PhantomJS approach https://github.com/steeve/angular-seo. 

Method 2: -

There is also the possibility that you will be able to re-display Facebook widgets. Use their parsing method:

FB.XFBML.parse ();

after the angular material is completed. This does not work for my share button (for now !!), but I tested it on sympathies, and that's cool. It basically re-scans the DOM and displays Facebook widgets. You can also pass it one element, something like this directive:

 'use strict'; angular.module('ngApp') .directive("fbLike", function($rootScope) { return function (scope, iElement, iAttrs) { if (FB && scope.$last) { FB.XFBML.parse(iElement[0]); } }; }); 

This snippet scans the DOM for html5 facebook fb-like widgets when creating the last element in an angular repeater.

---

Another accepted answer in the same context: fooobar.com/questions/1211083 / ...

Edit:

I implemented json on the server side only for meta tags, but its overhead, because there is still an ajax call for the data on the page.

 $mid=$_GET['id']; $mJSON = file_get_contents($homeurl."/json/getdetail.php?mid=".$mid); $mObject = json_decode($mJSON, true); if ($mObject['ID'] != undefined && $mObject['ID'] != '') { <meta property="og:title" content="<?php echo $mObject['display1'];?>"/> <meta property="og:description" content="<?php echo .$mObject['display2']; ?>"/> } 

Answer 2

The feature that worked for me is a “rollback” for the FB description (so this will be a general description that shows when angular did not load). I achieved this using two ng-if.

 <meta ng-if="mDetails.display1" property="og:title" content="{ mDetails.display1 + "- Subtitle"}}"> <meta ng-if="!mDetails.display1" property="og:title" content="A generic title"> 

Whenever there are two meta descriptions with the same name, FB takes the last. And after rendering googlebot will see only non-standard.