Google不抓取AngularJS應用程序中的鏈接

Question

我有一個注入第三方網站的AngularJS應用程序。它將動態內容注入第三方頁面的div中。 Google成功編制了這一動態內容的索引，但似乎並未在動態內容中抓取鏈接。這些鏈接會是這個樣子的動態內容：

<a href="http://www.example.com/support?title=Example Title&titleId=12345">Link Here</a> 

我使用的查詢參數的鏈接，而不是實際的URL結構，如：

http://www.example.com/support/title/Example Title/titleId/12345 

我必須使用的查詢參數因爲我不希望第三方網站必須更改其Web服務器配置以重定向未發現的URL。

當點擊鏈接時，我使用$ locationService更新瀏覽器中的url，然後我的角度應用程序做出相應響應。主要是基於查詢參數顯示相關內容，設置頁面標題和元描述。

我已閱讀的許多文章都使用了angularJS和模板中的路由提供程序，但我不確定爲什麼這會對爬行程序有所幫​​助？

我已閱讀，谷歌應該查看網址查詢參數作爲單獨的頁面，所以我不認爲這應該是這個問題： https://webmasters.googleblog.com/2008/09/dynamic-urls-vs-static-urls.html

我沒有嘗試過的唯一的東西是一種提供一個網站地圖具有查詢參數的網址，以及2.從其他頁面向動態鏈接添加靜態鏈接以幫助谷歌發現這些頁面。

任何幫助，想法或見解將不勝感激。

Answer 1

當網絡爬蟲加載頁面時，網絡爬蟲可能運行的優先級高於動態鏈接的AngularJS解釋。使用ng-href使動態鏈接解釋發生在更高的優先級。希望它有效！

Answer 2

如果您使用網址＃ 將URL中的哈希值發送到您的服務器後沒有任何內容。由於Javascript框架最初使用散列作爲路由機制，這是Google創建此協議的主要原因。

將您的網址更改爲＃！而不是僅僅使用＃。 。

angular.module（ '對myApp'）配置（[
'$ locationProvider'， 函數（$ locationProvider）{$ locationProvider.hashPrefix（） '！'; } ]）;

Answer 3

這是谷歌和兵如何處理Ajax調用。

這裏提到documentation。

如文檔中提到的概述如下

的履帶找到一個漂亮的AJAX URL（即包含一個＃！哈希代碼一個URL）。然後，它會以稍微修改的形式向您的服務器請求此內容。您的Web服務器以HTML快照的形式返回內容，然後由搜尋器處理。 搜索結果將顯示原始URL。

分步指南顯示在文檔中。

由於角JS是專爲客戶端，所以你需要配置Web服務器召喚無頭的HTML瀏覽器訪問你的網頁，並提供一個hashbang網址這將給予特殊的谷歌網址。

如果使用hashbang URL那麼你就需要指示角應用地使用它們定期哈希值

App.config(['$routeProvider', '$locationProvider', function($routes, $location) { 

    $location.hashPrefix('!'); 

    $routes.when('/home',{ 
     controller : 'IndexCtrl', 
     templateUrl : './pages/index.html' 
}); 

如代碼示例here提到

但是，如果你不希望使用包括hashtag網址但仍告知html內容的谷歌，但還是要通知谷歌，那麼你可以使用這個meta標籤爲this

<meta name="fragment" content="!" /> 

，然後配置的角度來使用HTMLURL的

angular.module('HTML5ModeURLs', []).config(['$routeProvider', function($route) { 
    $route.html5Mode(true); 
}]); 

，然後取其方法通過模塊被安裝

var App = angular.module('App', ['HashBangURLs']); 
//or 
var App = angular.module('App', ['HTML5ModeURLs']); 

現在你需要一個模擬瀏覽器到訪問的URL 您可以使用phantom.js下載網頁的內容，運行javascript和然後將內容轉換爲臨時文件。

Phantomrunner.js它將任何url作爲輸入，下載並將html解析到DOM中，然後檢查數據狀態。

測試使用功能的每個頁面定義here

網站地圖也可以做成以及在此example

最大的特點所示，你可以使用驗證網站的搜索控制檯使用URL

Google search console

全部歸屬去在這個site

提到的網站和作者。

更新1

你的抓取工具需要的頁面作爲 -

- com/ 
- com/category/ 
- com/category/page/ 

但默認情況下，角套你的頁面了這樣：

- com 
- com/#/category 
- com/#/page 

方法1

散列砰允許角知道哪個HTML元素與JS可以如前所述來完成注入，但既然已經depericated因此，另一種解決方案是以下

配置$locationProvider和設置用於相對於鏈接

基

• 您可以使用在這些docs提到$locationProvider和html5mode設置爲true

  $ locationProvider。html5Mode（真）;

這讓角度變化的路由和我們的網頁的網址，而無需刷新頁面

• 設置您的文檔的基本和頭<base href="/">

的$位置服務將自動回退到不支持HTML5 History API的瀏覽器的hashbang方法。

完全歸屬轉到page和author

另外提一下也有，你可以照顧在本document

Answer 4

這是因爲谷歌爬蟲提到的其他一些措施和試驗無法從您的網址獲取靜態html，因爲您的網頁是使用Javascript動態呈現的，您可以使用以下內容實現您想要的效果：

由於#!是過時了，你可以告訴谷歌，你的頁面的JavaScript渲染在你的頭

<meta name="fragment" content="!"> 

使用下面的標籤上找到上面的標籤谷歌機器人會要求您的網址與你的服務器一樣

的 _escaped_fragment_查詢參數

http://www.example.com/?_escaped_fragment_=/support?title=Example Title&titleId=12345 

然後，你需要從_escaped_fragment_重建原始的網址您的服務器上，它看起來像這樣再次

http://www.example.com/support?title=Example Title&titleId=12345 

然後，您需要爲該網址的抓取工具提供靜態HTML。 你可以使用無頭瀏覽器來訪問網址。 Phantom.js是一個很好的選項，使用JavaScript呈現您的頁面，然後將內容放入文件中以創建頁面的HTML快照。您可以將快照保存到服務器上以便進一步爬網，因此，當谷歌機器人訪問時，您可以直接提供快照而不是再次重新渲染頁面。