Question

提供的AngularJS应用程序

我希望我的元标记（og:title，og:description，og:image）能够动态填充Facebook和其他抓取工具（如Slack）以发布丰富内容社交媒体网站上的链接。但是，它很棘手，因为那些刮刀在角度动态插入适当的值之前对原始HTML页面进行刮擦。因此，刮刀会看到占位符值。

here描述了这个问题的一个解决方案。基本上：使用已填充的所需og字段提供scraper-bots静态HTML。我想这样做。但与那位作者不同，我没有使用apache。在http-server中没有我知道的.htaccess文件.m

我使用UI-Router和$state-provider来处理提供给我的应用程序的网址，如下所示：

  $stateProvider.state('splash',
      {
          url: '/',
          templateUrl: 'html/splash.html',
          controller: 'SplashCtrl',
          data: {
              meta: {
                'title': 'My Title',
                'description': 'My Description'
              }
          }
      }
  );

我是否可以通过某种方式创建一个状态，以便使用网络浏览器将刮刀机器人发送到与普通人类用户不同的控制器？怎么样？

Answer 1

我们的某个网络应用程序遇到了同样的问题。我们通过进行以下一些更改来解决它。它涉及在前端和后端进行更改。

在这种情况下的第一个问题是，角度使用"C:\Windows\Microsoft.NET\Framework\v4.0.30319\RegAsm.exe" "C:\Program Files\SOLIDWORKS Corp\SOLIDWORKS\api\redist\SolidWorks.Interop.swpublished.dll" /codebase作为分隔符来确定路线和历史。如果您共享具有/#/字符的链接，则其后的任何内容都将被忽略，并且不会发送到服务器。要动态生成社交网站的元数据，我们需要#之后的部分。因此，我们完全取消#。

/#/

参考：https://docs.angularjs.org/api/ng/provider/ $ locationProvider

设置此选项可确保您的网址现在从angular.module('myApp', []) .config(function($locationProvider) { $locationProvider.html5Mode(true); // });更改为http://app_host/#/my_url

为确保AngularJS现在了解如何解释其路线，您需要为应用程序设置基本路径

http://app_host/my_url

使用此配置，您的可共享链接现在将落在您的后端服务器上，您始终返回相同的index.html文件，但基于您收到的额外路径参数使用动态元标记。

我可以让AngularJS为Facebook OpenGraph刮刀使用不同的控制器吗？

1 个答案: