Tôi có thể sử dụng AngularJS để sử dụng các bộ điều khiển khác nhau cho máy quét Facebook OpenGraph không?

Tôi có một ứng dụng AngularJS được phục vụ bằng cách sử dụng http-serverTôi có thể sử dụng AngularJS để sử dụng các bộ điều khiển khác nhau cho máy quét Facebook OpenGraph không?

Tôi muốn tôi các thẻ meta (og:title, og:description, og:image) để được điền động cho Facebook và chọc khác (như Slack) để gửi giàu liên kết trên các trang web truyền thông xã hội. Tuy nhiên, nó là khó khăn bởi vì những người cạo râu làm của họ cạo của trang HTML gốc trước khi góc động chèn các giá trị thích hợp. Vì vậy, các scrapers thấy các giá trị giữ chỗ.

Một giải pháp cho vấn đề này được mô tả here. Về cơ bản: cung cấp HTML tĩnh của chương trình scraper với các trường mong muốn og đã được điền. Tôi muốn làm điều đó. Nhưng không giống như tác giả đó, tôi không sử dụng apache. Trong http-server không có tập tin .htaccess mà tôi biết of.m

tôi sử dụng UI-Router và $state-provider để xử lý các URL được cung cấp để ứng dụng của tôi như thế này:

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

Có một số cách tôi có thể tạo một trạng thái sao cho chương trình scraper sẽ được gửi đến một bộ điều khiển khác với người dùng thông thường sử dụng trình duyệt web? Làm sao?

Nguồn

2017-05-30 Saqib Ali

Chúng tôi đã gặp sự cố tương tự với một trong các ứng dụng web của chúng tôi. Chúng tôi đã giải quyết nó bằng cách thực hiện một số thay đổi sau. Nó bao gồm việc thực hiện các thay đổi trong cả giao diện người dùng và chương trình phụ trợ.

Vấn đề đầu tiên trong trường hợp này là sử dụng góc /#/ làm dấu phân cách để xác định tuyến đường và lịch sử. Nếu bạn chia sẻ liên kết có mã số #, mọi thứ sau khi nó sẽ bị bỏ qua và không được gửi đến máy chủ. Để tự động tạo siêu dữ liệu cho các trang web xã hội, chúng tôi cần phần sau #. Vì vậy, chúng tôi loại bỏ hoàn toàn /#/.

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

Ref: https://docs.angularjs.org/api/ng/provider/ $ locationProvider

Thiết này sẽ đảm bảo các URL của bạn bây giờ sẽ thay đổi http://app_host/#/my_url-http://app_host/my_url

Chỉ cần để đảm bảo AngularJS nay hiểu làm thế nào để giải thích các tuyến đường của nó, bạn cần phải đặt đường dẫn cơ sở cho ứng dụng của bạn

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

Với cấu hình này, shara của bạn các liên kết ble giờ sẽ nằm trên máy chủ phụ trợ của bạn, nơi bạn luôn trả về cùng một tệp index.html, nhưng với các thẻ meta động dựa trên các thông số đường dẫn bổ sung mà bạn nhận được.

Nguồn

2017-06-02 04:24:11

Đây là nơi chúng tôi đang sử dụng: Trang chủ: http://arivu.org.in/ Trang cụ thể: http://arivu.org.in/view/5745060998021120/video/5098651508539392 Nếu bạn sử dụng Trình gỡ lỗi facebook, bạn sẽ có thể thấy siêu dữ liệu khác nhau cho các liên kết này, mặc dù chúng chỉ là cùng một ứng dụng. –

Tôi không thấy đây là giải pháp cho câu hỏi của mình. Bạn đã giải thích cách loại bỏ '# /' trong URL, và tôi đã làm điều đó. Tuy nhiên không nơi nào tôi thấy bạn chỉ đạo các yêu cầu để điều khiển khác nhau nếu khách truy cập là một bot hay không. Mọi thứ bạn đang làm ở đây hoàn toàn là AngularJS. Đó là mã Front-end. Không có gì ở đây hướng nó đến máy chủ back-end. Tôi đang thiếu gì? –

Đây là những điều bạn cần làm trên giao diện người dùng. Backend Tôi không thể bình luận mà không biết công nghệ bạn đang sử dụng để xử lý các yêu cầu.Với những thay đổi này - yêu cầu của bạn cho các trang khác nhau nằm trên chương trình phụ trợ của bạn - nơi bạn phải quyết định nội dung nào để điền vào thẻ meta và luôn trả về index.html (hoặc tương đương) của bạn. Bạn cần phải hiểu rằng bạn không thể đạt được các thẻ meta động với các thay đổi giao diện người dùng một mình. Bots không thực hiện trang của bạn, họ chỉ đọc bất cứ điều gì được cung cấp cho nó, do đó, nó là trách nhiệm của phụ trợ của bạn để đưa các thẻ thích hợp dựa trên 'đường dẫn'. –

Tôi có thể sử dụng AngularJS để sử dụng các bộ điều khiển khác nhau cho máy quét Facebook OpenGraph không?

Trả lời

Các vấn đề liên quan