gpt4 book ai didi

javascript - 我可以让 AngularJS 为 Facebook OpenGraph 抓取工具使用不同的 Controller 吗?

转载 作者:数据小太阳 更新时间:2023-10-29 05:35:04 24 4
gpt4 key购买 nike

我有一个使用 http-server 提供的 AngularJS 应用程序

我希望为 Facebook 动态填充元标记(og:titleog:descriptionog: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/

24 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com