2017-05-30 26 views
7

मैं एक AngularJS अनुप्रयोग है कि http-serverक्या मैं फेसबुक ओपनग्राफ स्क्रैपर के लिए विभिन्न नियंत्रकों का उपयोग करने के लिए एंगुलरजेएस प्राप्त कर सकता हूं?

का उपयोग कर रहा (, og:title, og:descriptionog:image) मेरी मेटा टैगों चाहते Facebook और अन्य स्क्रेपर्स (स्लैक की तरह) के लिए डायनामिक रूप से भरे करने पर अमीर लिंक पोस्ट करने के लिए पेश किया जाता है है सामाजिक माध्यम ठौर - ठिकाना। हालांकि, यह मुश्किल है क्योंकि कोणीय गतिशील रूप से उचित मानों को सम्मिलित करने से पहले उन स्क्रैपर्स मूल HTML पृष्ठ का अपना स्क्रैपिंग करते हैं। तो स्क्रैपर्स प्लेसहोल्डर मूल्य देखते हैं।

इस समस्या का एक समाधान here वर्णित है। असल में: वांछित og फ़ील्ड पहले से ही आबादी वाले स्क्रैपर-बॉट स्थिर HTML को खिलाएं। मेरी इच्छा वह करने की होगी। लेकिन उस लेखक के विपरीत, मैं अपाचे का उपयोग नहीं कर रहा हूं।

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

है वहाँ किसी तरह मैं बना सकते हैं: http-server में कोई .htaccess फाइल है कि मैं of.m

मैं UI-Router का उपयोग करें और $state-provider इस तरह अपने आवेदन करने के लिए प्रदान किए गए URL को संभालने के लिए जागरूक कर रहा हूँ है एक ऐसा राज्य जैसे कि वेब ब्राउज़र का उपयोग कर सामान्य मानव उपयोगकर्ताओं की तुलना में स्क्रैपर-बॉट को एक अलग नियंत्रक को भेजा जाएगा? कैसे?

उत्तर

2

हमें हमारे वेब अनुप्रयोगों में से एक के साथ एक ही समस्या थी। हमने निम्नलिखित में से कुछ बदलाव करके इसे हल किया है। इसमें फ्रंटेंड और बैकएंड दोनों में बदलाव करना शामिल है।

इस मामले में पहली समस्या यह है कि कोणीय /#/ मार्ग और इतिहास निर्धारित करने के लिए विभाजक के रूप में उपयोग करता है। यदि आप एक लिंक साझा करते हैं जिसमें # char है, तो उसके बाद कुछ भी अनदेखा कर दिया जाएगा और सर्वर पर नहीं भेजा जाएगा। सामाजिक साइटों के लिए गतिशील रूप से मेटाडेटा उत्पन्न करने के लिए, हमें # के बाद भाग की आवश्यकता है। इसलिए, हम /#/ पूरी तरह से खत्म करते हैं।

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 फ़ाइल लौटाते हैं, लेकिन आपको प्राप्त अतिरिक्त पथ पैराम के आधार पर गतिशील मेटा टैग के साथ।

+0

यहाँ है, जहां हम इसे उपयोग कर रहे हैं: होम पेज: http://arivu.org.in/ विशिष्ट पृष्ठ: http://arivu.org.in/view/5745060998021120/video/5098651508539392 आप का उपयोग करते हैं फेसबुक डीबगर, आपको इन लिंक के लिए अलग मेटाडेटा देखने में सक्षम होना चाहिए, भले ही वे एक ही ऐप हों। –

+0

मैं सिर्फ यह नहीं देखता कि यह मेरे प्रश्न का समाधान कैसे है। आपने यूआरएल में '# /' को खत्म करने के तरीके को समझाया है, और मैंने यह किया है। हालांकि, जहां भी आगंतुक एक बॉट है या नहीं, मैं आपको विभिन्न नियंत्रकों को अनुरोध निर्देशित करता हूं। आप जो कुछ भी कर रहे हैं वह पूरी तरह से कोणीय जेएस है। तो यह फ्रंट एंड कोड है। यहां कुछ भी बैक-एंड सर्वर पर निर्देशित नहीं करता है। मैं क्या खो रहा हूँ? –

+0

ये चीजें हैं जिन्हें आपको अग्रभाग पर करने की आवश्यकता है। बैकएंड मैं अनुरोधों को संभालने के लिए उपयोग की जा रही तकनीक को जानने के बिना टिप्पणी नहीं कर सकता।इन परिवर्तनों के साथ - अलग-अलग पृष्ठों के लिए आपके अनुरोध आपके बैकएंड पर उतरते हैं - जहां आपको यह तय करना होगा कि मेटा टैग के लिए क्या करना है और हमेशा अपना index.html (या समतुल्य) लौटाएं। आपको यह समझने की जरूरत है कि आप गतिशील मेटा टैग अकेले फ्रंटएंड परिवर्तनों के साथ प्राप्त नहीं कर सकते हैं। बॉट्स आपके पृष्ठ को निष्पादित नहीं करते हैं, वे जो कुछ भी प्रदान करते हैं उसे पढ़ते हैं, इसलिए 'पथ' के आधार पर उचित टैग डालने के लिए आपकी बैकएंड की ज़िम्मेदारी है। –

संबंधित मुद्दे

 संबंधित मुद्दे