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