Facebook無法在AngularJS開發的頁面上讀取動態og標簽

Question

我正在開發一個MEAN堆棧應用程序（Mongo，Express，Angular，Node），我想在Facebook有趣的頁面上共享一些頁面，並有一個像這樣的個性化鏈接。 https://www.evernote.com/shard/s414/sh/6c61c036-abc6-4eb9-b355-41af05760979/45fce4c1795580266f1247dba3452d62/res/31e7a3bd-7258-4910-bb05-5e2e61cd2d96/skitch.png

我正在使用動態og標簽在共享鏈接上顯示不同的數據

<html itemscope itemtype="http://schema.org/Article">
<!-- Open Graph --> 
<meta property="og:title" content="{{og_title}}" /> 
<meta property="og:type" content="article" /> 
<meta property="og:url" content="{{og_url}}" />
<meta property="og:image" content="{{og_image}}" />
<meta property="og:description" content="{{og_description}}" /> 
<meta property="og:site_name" content="MYSITENAME" /> 
<meta property="fb:admins" content="MYAPPID" />

這些變量是通過$ http.get（）從服務器檢索的

我還使用在我的EC2實例（端口3000）上運行的prerender.io服務器，以便允許我的javascript頁面被完全爬網。

app.use(require('prerender-node').set('prerenderServiceUrl', 'http://'+ config.DNS +':3000/'));

Prerender工作正常，因為當我鍵入時

http://DOMAINE.com:3000/http://DOMAINE.com/items/5376899f3230687806000016

我得到了該頁面的快照，當我顯示該頁面的代碼源時，我得到了正確的數據。

<!-- Open Graph data --> 
<meta property="og:title" content="Pink floyd CD"> 
<meta property="og:type" content="article"> 
<meta property="og:url" content="DOMAINE.com:80/items/53763aad67afe39d05000017">
<meta property="og:image" content="https://fpid.s3.amazonaws.com/items/4748_DarkSideOfTheMoon.jpg">
....

我的問題是當我在Facebook上共享此網址時

http://DOMAINE.com/items/5376899f3230687806000016

而不是與圖像，標題和描述的良好鏈接，我得到了這個較差的鏈接

https://www.evernote.com/shard/s414/sh/ac398446-276e-46ae-bc1e-eab5fea5cc31/ac5339dc23b07ccaa853a0b9e86d4c4c/res/c99109cc-d038-4837-a303-dbb5f7ad376c/skitch.png

Answer 1

您將必須創建一個通過具有適當信息的節點從服務器呈現的頁面。 您可以通過檢查facebook用戶代理並在節點（而不是您的角度應用程序）中提供不同的頁面/路由來完成此操作。 該頁面僅需要顯示og標簽。

如何識別Facebook用戶代理

Answer 2

一些有關此問題的背景信息： https : //developers.google.com/webmasters/ajax-crawling/

動態渲染如何工作： https ： //prerender.io/how-it-works

以下是一些您可以使用的服務： https : //www.google.com/search?client=ubuntu&channel=fs&q=angular.js+seo&ie=utf-8&oe=utf-8&gfe_rd=cr&ei=EBnSU-CNB6fc8ge-uIC4Aw

Facebook無法在AngularJS開發的頁面上讀取動態og標簽

問題描述

2 個解決方案

解決方案1
4 已采納 2014-07-19 16:00:51

解決方案2
0 2014-07-25 08:45:53

Facebook無法在AngularJS開發的頁面上讀取動態og標簽

問題描述

2 個解決方案

解決方案1 4 已采納 2014-07-19 16:00:51

解決方案2 0 2014-07-25 08:45:53

解決方案1
4 已采納 2014-07-19 16:00:51

解決方案2
0 2014-07-25 08:45:53