Question

我有一个注入第三方网站的AngularJS应用程序。它将动态内容注入第三方页面的div。 Google正在成功为此动态内容编制索引，但似乎并未抓取动态内容中的链接。链接在动态内容中看起来像这样：

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

我使用查询参数作为链接而不是实际的网址结构，如：

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

我必须使用查询参数，因为我不希望第三方网站更改其网络服务器配置以重定向不正确的网址。

单击链接后，我使用$ locationService更新浏览器中的URL，然后我的角度应用程序会相应地做出响应。主要是基于查询参数显示相关内容，设置页面标题和元描述。

我读过的很多文章都使用angularJS和模板中的路由提供程序，但我不确定为什么这会对抓取工具产生影响？

我已经读过谷歌应该将带有查询参数的网址视为单独的网页，因此我不相信这应该是问题所在： https://webmasters.googleblog.com/2008/09/dynamic-urls-vs-static-urls.html

我唯一没有尝试过的事情是1.提供包含查询参数的网址的站点地图，以及2.将其他网页的静态链接添加到动态链接，以帮助Google发现这些网页。

非常感谢任何帮助，想法或见解。

Answer 1

这是因为Google抓取工具无法从您的网址获取静态HTML，因为您的网页是使用Javascript动态呈现的，您可以使用以下内容实现您想要的效果：

由于不推荐使用#!，您可以通过在标题中使用以下标记告诉谷歌您的网页是使用javascript呈现的

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

在找到上述标记后，Google漫游器会向您的网址请求服务器中的_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提供给该网址的抓取工具。您可以使用无头浏览器访问该URL。 Phantom.js是使用javascript呈现页面的好选项，然后将内容提供到文件中以创建页面的HTML快照。您也可以将快照保存在服务器上以便进一步抓取，因此当谷歌机器人访问时，您可以直接提供快照，而不是再次重新渲染页面。

Answer 2

当网络抓取工具加载页面时，网络抓取工具的运行优先级可能高于动态链接的AngularJS解释。使用ng-href使得动态链接解释以更高的优先级发生。希望它有效！

Answer 3

如果您使用网址＃在url中的哈希值发送到您的服务器之后没有任何内容。由于Javascript框架最初使用哈希作为路由机制，这是Google创建此协议的主要原因。

将您的网址更改为＃！而不只是使用＃。

angular.module（ '对myApp'）。配置（[
'$ locationProvider'， function（$ locationProvider）{ $ locationProvider.hashPrefix（ '！'）; } ]）;

Answer 4

Google 和 bing 处理ajax调用的方式。

此处提到documentation。

文档中提到的概述如下

抓取工具找到一个漂亮的 AJAX网址（，即包含＃！哈希片段的网址）。然后，它会以略微修改的形式从您的服务器请求此网址的内容。您的Web服务器以HTML快照的形式返回内容，然后由爬网程序处理。 搜索结果会显示原始网址。

分步指南显示在文档中。

由于 Angular JS 是专为客户端设计的，因此您需要配置 Web服务器来召唤无头html浏览器访问您的网页并提供 hashbang网址，该网址将提供给特殊的Google网址。

如果您使用 hashbang网址，那么您需要指示 angular 应用使用它们而不是常规哈希值< /强>

App.config(['$routeProvider', '$locationProvider', function($routes, $location) { $location.hashPrefix('!'); $routes.when('/home',{ controller : 'IndexCtrl', templateUrl : './pages/index.html' });

如代码示例here
中所述

但是，如果您不想使用主题标记网址但仍然通知谷歌 html内容，但仍想通知谷歌，那么您可以使用此 meta tag 为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']);

现在您需要一个无头浏览器来访问该网址 您可以使用phantom.js下载页面内容，运行javascript，然后将内容放入临时文件中。

Phantomrunner.js将任何url作为输入，将html下载并解析为DOM，然后检查数据状态。

使用定义的函数here
测试每个页面

也可以在此example
中显示SiteMap

最好的功能是您可以使用搜索控制台验证您的网站网址


<强> Google search console

完全归因于此site
中提到的网站和作者


更新1

您的抓取工具需要这些页面为 -

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

但是，默认情况下，Angular会将您的页面设置为：

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

方法1

Hash bang 允许Angular知道哪些 HTML元素要注入JS ，这可以像之前提到的那样完成，但因为它已经 depericated 因此另一种解决方案将是以下


配置$locationProvider并设置相对链接的基础

您可以使用这些docs中提到的$locationProvider并将 html5mode设置为true

$ locationProvider.html5Mode（真）;

这使Angular可以更改页面的路由和URL而无需刷新页面

将文档的基数和头部设置为<base href="/">


对于不支持HTML5历史记录API的浏览器，$ location服务会自动回退到hashbang方法。

完全归因会转到page和author

另外要提及的还有一些其他措施和测试可以照照document
中提到的那样处理。

Google未抓取AngularJS应用程序中的链接

4 个答案: