我有一个使用 http-server 提供的 AngularJS 应用程序
我希望为 Facebook 动态填充元标记(og:title、og:description、og:image)和其他爬虫(如 Slack)在社交媒体网站上发布丰富的链接。然而，这很棘手，因为那些抓取器会在 Angular 动态插入正确的值之前抓取原始 HTML 页面。因此，抓取工具会看到占位符值。
here 描述了此问题的一个解决方案。基本上:将已填充的所需 og 字段提供给 scraper-bots 静态 HTML。我想这样做。但与作者不同的是，我没有使用 Apache。在 http-server 中没有我知道的 .htaccess 文件。m
我使用 UI-Router 和 $state-provider 来处理提供给我的应用程序的 URL，如下所示:
$stateProvider.state('splash',
{
url: '/',
templateUrl: 'html/splash.html',
controller: 'SplashCtrl',
data: {
meta: {
'title': 'My Title',
'description': 'My Description'
}
}
}
);
有什么方法可以创建一种状态，使爬虫机器人将被发送到与使用网络浏览器的普通人类用户不同的 Controller ？怎么办？
最佳答案
我们的一个网络应用程序也遇到了同样的问题。我们通过进行以下一些更改来解决它。它涉及在前端和后端进行更改。
这种情况下的第一个问题是，angular 使用/#/ 作为分隔符来确定路由和历史记录。如果您共享一个包含 # 字符的链接，它之后的任何内容都将被忽略，并且不会被发送到服务器。要为社交网站动态生成元数据，我们需要 # 之后的部分。因此，我们完全消除了 /#/。
angular.module('myApp', [])
.config(function($locationProvider) {
$locationProvider.html5Mode(true); //
});
引用:https://docs.angularjs.org/api/ng/provider/ $位置提供者
设置此项将确保您的 URL 现在将从 http://app_host/#/my_url 更改为 http://app_host/my_url
只是为了确保 AngularJS 现在知道如何解释它的路由，您需要为您的应用程序设置基本路径
<html>
<head>
<base href="/">
</head>
</html>
使用此配置，您的可共享链接现在将登陆您的后端服务器，您始终返回相同的 index.html 文件，但带有基于您收到的额外路径参数的动态元标记。
关于javascript - 我可以让 AngularJS 为 Facebook OpenGraph 抓取工具使用不同的 Controller 吗？，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/44253370/