我可以讓AngularJS為Facebook OpenGraph刮刀使用不同的控制器嗎？

Question

我有一個使用http-server提供的AngularJS應用程序

我希望我的元標記（ og:title ， og:description ， og:image ）能夠動態填充Facebook和其他刮刀（如Slack）在社交媒體網站上發布豐富的鏈接。 但是，它很棘手，因為那些刮刀在角度動態插入適當的值之前對原始HTML頁面進行刮擦。 所以刮刀看到占位符值。

這里描述了該問題的一種解決方案。 基本上：使用已填充的所需og字段提供scraper-bots靜態HTML。 我想這樣做。 但與那位作者不同，我沒有使用apache。 在http-server中沒有我知道的.htaccess文件

我使用UI-Router和$state-provider來處理提供給我的應用程序的URL，如下所示：

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

有沒有什么方法可以創建一個狀態，以便刮刀機器人將被發送到與使用網絡瀏覽器的普通人類用戶不同的控制器？ 怎么樣？

Answer 1

我們的一個Web應用程序遇到了同樣的問題。 我們通過進行以下一些更改來解決它。 它涉及在前端和后端進行更改。

在這種情況下的第一個問題是，角度使用/#/作為分隔符來確定路線和歷史。 如果您共享有一個鏈接#字符，之后任何事情都會被忽略，不會被發送到服務器。 要動態生成社交網站的元數據，我們需要#之后的部分。 所以，我們完全消除/#/ 。

angular.module('myApp', [])
    .config(function($locationProvider) {
        $locationProvider.html5Mode(true);  // 
    });

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

設置此項將確保您的網址現在從http://app_host/#/my_url為http://app_host/my_url

為了確保AngularJS現在了解如何解釋其路由，您需要為應用程序設置基本路徑

<html>
    <head>
        <base href="/">
    </head>
</html>

使用此配置，您的可共享鏈接現在將落在您的后端服務器上，您始終返回相同的index.html文件，但使用基於您收到的額外路徑參數的動態元標記。

我可以讓AngularJS為Facebook OpenGraph刮刀使用不同的控制器嗎？

問題描述

1 個解決方案

解決方案1
1 2017-06-02 04:24:11

我可以讓AngularJS為Facebook OpenGraph刮刀使用不同的控制器嗎？

問題描述

1 個解決方案

解決方案1 1 2017-06-02 04:24:11

解決方案1
1 2017-06-02 04:24:11