페이스 북에서 공유 할 때 내용 대신 꺾쇠 괄호 표시

AngularJS는 제목과 메타 태그에 내용을 잘 표현하지만, 페이스 북이나 Google과 공유 할 때 팝업 창에 각도가 {{}} 표시됩니다. enter image description here 페이스 북에서 공유 할 때 내용 대신 꺾쇠 괄호 표시

코드 :

<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을 사용하고 있습니다.

도움 주셔서 감사합니다. 또 다른 질문에서 언급 한 바와 같이

출처

2015-01-14 Fahad

{{}} 대신 ng-bind를 사용해야합니다. http://stackoverflow.com/questions/16125872/why-ng-bind-is-better-than-in-angular – divyenduz

아무 것도 작동하지 않습니다. @divyenduz – Fahad

ng-bind의 경우 어떻게됩니까? 너는 단지 "자막"을 얻는다, 그렇지? – divyenduz

두 가지 방법 : - og meta tags, social buttons and angularjs

방법 1 : -

이는 자바 스크립트를 사용하여 수행 할 수 없습니다. 어떤 사람들은 Facebook이 현재 페이지에있는 것을 읽고 있다고 생각합니다. 그렇지 않습니다. 그것은 당신의 서버에 그것의 Scraper를 사용하는 동일한 URL (window.location.href로부터)을 사용하고, Facebook Scraper는 javascript를 실행하지 않습니다. 그래서 Facebook 공유 버튼과 같은 것을 클릭하면 {{page_title}}을 얻게됩니다. 귀하의 콘텐츠는 서버에 의해 생성되어야하므로 페이스 북이 URL을 치기 시작하면 자바 스크립트가 필요없는 컨텐츠를 가져옵니다. 몇 가지 방법으로 서버 측 렌더링을 처리 할 수 있습니다.

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

방법 2 : -

당신이 페이스 북 위젯을 다시 렌더링 할 수있는 가능성도있다. 파싱 메서드를 사용하십시오.

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 페이스 북 FB-같은 위젯의 DOM을 다시 검색합니다.

같은 맥락에서 또 다른 허용 대답 : - https://stackoverflow.com/a/24086652/1366216

편집 : 나는 때문에 페이지를 들면, 단지 메타 태그에 대한 서버 측에서 그러나 그것의 오버 헤드를 JSON을 구현

데이터, 여전히 아약스 호출이 있습니다.

$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']; ?>"/> 
    }

출처

2015-01-15 06:10:44 divyenduz

Michael이 여기에서 토론 한 것처럼 첫 번째 방법을 시도 : http://www.michaelbromley.co.uk/blog/171/enable-rich-social-sharing-in-your-angularjs-app – Fahad

네, 그렇게 될 것 같습니다. 밖으로 :) – divyenduz

@ Fahad : 그것은 작동 했습니까? – divyenduz

나를 위해 일 가능성이 (가로드되지 않은 경우 각 보여주는 일반적인 설명 될 수 있도록) FB 설명에 대해 "대체"를하는 것입니다. 나는 2 ng-if를 사용하여 이것을 달성했다.

동일한 제목의 메타 설명이 두 개있을 때마다 FB가 마지막 제목을 가져옵니다. 그리고 렌더링 후에 googlebot은 기본이 아닌 것을 보게됩니다.

출처

2017-08-09 15:18:03 Joe82

페이스 북에서 공유 할 때 내용 대신 꺾쇠 괄호 표시

답변

관련 문제