AngularJS将内容精确地呈现为标题和元标记,但是当我与Facebook或谷歌共享时,在弹出窗口中它会显示角度{{}}.
码：
<div ng-controller="MyCtrl">
<title>{{mDetails.display1}} - Subtitle</title>
<Meta name="description" content="{{mDetails.display1}} - {{mDetails.address1}},{{mDetails.city}},{{mDetails.state}},{{mDetails.country}}">
.
.
注意：我已经在使用ng-cloak了.
感谢帮助.
有两种方法,如另一个问题所述： –
og meta tags,social buttons and angularjs
og meta tags,social buttons and angularjs
方法1： –
这不能使用javascript完成.有些人认为Facebook正在阅读当前页面上的内容.不是.它使用相同的URL(来自window.location.href)使用它的Scraper向您的服务器发出单独的请求,而Facebook Scraper不运行javascript.这就是为什么你点击像Facebook分享按钮这样的东西时会得到{{page_title}}.您的内容必须由服务器生成,因此当Facebook访问该网址时,它可以预先获得所需的内容,而无需使用javascript.您可以通过几种方式处理服务器端渲染.
You can allow your server side technology to render the content. You can use the PhantomJS approach https://github.com/steeve/angular-SEO.
方法2： –
您还可以重新渲染Facebook小部件.使用他们的解析方法：
FB.XFBML.parse();
在你的角色的东西完成后.它不适用于我的分享按钮(还有!!),但我在喜欢上测试它,这很酷.基本上它重新扫描DOM并呈现Facebook小部件.你也可以传递一个单独的元素,就像这个指令：
'use strict';
angular.module('ngApp')
.directive("fbLike",function($rootScope) {
return function (scope,iElement,iAttrs) {
if (FB && scope.$last) {
FB.XFBML.parse(iElement[0]);
}
};
});
在创建角度转发器中的最后一个元素时,此片段将重新扫描用于html5 facebook fb类小部件的DOM.
在同一背景下另一个被接受的答案： –
https://stackoverflow.com/a/24086652/1366216
编辑：
我在服务器端实现了json仅用于元标记,但是它的开销是因为对于页面数据,仍然存在ajax调用.
$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']; ?>"/>
}
