2015-11-25 17 views
26

मैं Angular-Meteor framework का उपयोग कर एक कोणीय 2 ऐप का निर्माण कर रहा हूं।कोणीय 2 एसईओ - एक कोणीय 2 ऐप क्रॉल करने योग्य कैसे करें

मैं गूगल और अन्य खोज इंजन द्वारा तेजी से और लगातार अनुक्रमण प्राप्त, और मेरी जे एस के द्वारा निर्मित सामग्री का पूर्वावलोकन उत्पन्न करने के लिए फेसबुक हिस्सेदार और अन्य स्क्रेपर्स अनुमति देने के लिए करना चाहते हैं।

आमतौर पर एसपीए पेज सर्वर-साइड प्रस्तुत करने के लिए फ़ैंटॉमजेएस का उपयोग करते हैं और क्लाइंट को स्थिर HTML भेजते हैं।

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

नोडजेएस और this module)।

कोणीय 1 ऐप के लिए, मैं Angular-SEO तरह कोणीय मॉड्यूल के साथ इस को हल करने के लिए प्रयोग किया जाता है, लेकिन यह कोणीय 2.

लिए इस तरह के मॉड्यूल परिवर्तित मैं अभी तक इस बात के लिए कोई भी उचित कोणीय 2 मॉड्यूल नहीं मिला करने के लिए कठिन लगता है । क्या मुझे इसे खुद बनाना चाहिए, या आज के रूप में इसे हासिल करने का कोई और अच्छा तरीका है?

उत्तर

24

एंगुलर 2 के बारे में बड़ी बात यह है कि जब निकाल दिया जाता है, तो आपके रूट ऐप-तत्व के अंदर की सभी सामग्री दूर हो जाती है। इसका मतलब यह है कि आप सर्वर से जो कुछ भी चाहते हैं उसे डाल सकते हैं जिसे आप क्रॉलर द्वारा उठाया जाना चाहते हैं।

आप इस सामग्री को अपने ऐप में सामग्री के सर्वर द्वारा प्रस्तुत संस्करण का उपयोग करके उत्पन्न कर सकते हैं, या कस्टम तर्क प्राप्त कर सकते हैं।

आप यहाँ कुछ और जानकारी पा सकते हैं: https://angularu.com/VideoSession/2015sf/angular-2-server-rendering और यहाँ: https://github.com/angular/universal

+2

महान वीडियो, चालाक एसईओ, प्रेत दृष्टिकोण से बेहतर – Rayjax

+0

यह उत्तर अब कोणीय के नए संस्करणों से वंचित है क्योंकि यह @ कोणीय/प्लेटफार्म-सर्वर – jornare

8

मैं सिर्फ ng2-meta, एक Angular2 मॉड्यूल है कि मौजूदा मार्ग के आधार पर मेटा टैग को बदल सकते हैं बनाया।

 

const routes: Routes = [ 
    { 
    path: 'home', 
    component: HomeComponent, 
    data: { meta: { title: 'Home page', description: 'Description of the home page' } } 
    }, 
    { 
    path: 'dashboard', 
    component: DashboardComponent, 
    data: { meta: { title: 'Dashboard', description: 'Description of the dashboard page', 'og:image': 'http://example.com/dashboard-image.png' } } 
    } 
]; 
 

आप घटक, सेवाओं आदि से मेटा टैग भी अपडेट कर सकते हैं।

 

class ProductComponent { 
    ... 
    constructor(private metaService: MetaService) {} 

    ngOnInit() { 
    this.product = //HTTP GET for product in catalogue 
    metaService.setTitle('Product page for '+this.product.name); 
    metaService.setTag('og:image',this.product.imageURL); 
    } 
} 
 

इस जावास्क्रिप्ट सक्षम क्रॉलर्स (गूगल की तरह) को पूरा करता है, तब तक आप फेसबुक और ट्विटर जैसी गैर-जावास्क्रिप्ट क्रॉलर्स के लिए वापस आने के लिए मेटा टैग सेट कर सकते हैं। सर्वर साइड प्रतिपादन के लिए

<head> 
    <meta name="title" content="Website Name"> 
    <meta name="og:title" content="Website Name"> 
    <meta name="og:image" content="http://example.com/fallback-image.png"> 
    ... 
</head> 

समर्थन प्रगति पर है।

+1

का हिस्सा है, यह एंगुलर यूनिवर्सल के साथ काम नहीं करता है, जहां पृष्ठ सर्वर पक्ष उत्पन्न हो जाता है। 'document.querySelector को परिभाषित नहीं किया गया है' – Gerardlamo

+0

मैं ng2meta प्लगइन का उपयोग करता हूं और ऐसा लगता है कि वेबमास्टर टूल्स/Google इसे क्रॉल नहीं करता है। यह अभी भी सोचता है कि मेरे पास डुप्लिकेट मेटा टैग उदा। विवरण के लिए। कोई विचार? – AngularM

0

serverside प्रतिपादन रैंकिंग एक सभ्य गूगल के लिए एक आवश्यकता नहीं है ...

मैं अपने गूगल साइटमैप फ़ाइलें में 33.000 के बारे में प्रविष्टियों के साथ एक मंच था। यह वेबसाइट एएसपीनेट वेबफॉर्म का उपयोग करके लिखी गई थी, और Google से आने वाले अनुरोधों की एक सभ्य स्ट्रीम थी। इस वेबसाइट पर बहुत खराब मोबाइल पठनीयता (Google द्वारा दंडित कुछ किया गया है), वास्तव में यह मेरे Google "खोज कंसोल" में उल्लेख किया गया है)

मैं कोणीय के साथ सबकुछ फिर से लिखता हूं (तैनात संस्करण कोणीय 5 है)। मैं अपना शीर्षक और मेटा टैग सेट करने के लिए शीर्षक और मेटा सेवाओं का उपयोग कर रहा हूं। सभी मार्गों में वास्तविक सामग्री से निकाले गए कीवर्ड होते हैं।मैंने यह भी सुनिश्चित किया कि [रूटलिंक] विशेषता वाले प्रत्येक तत्व एक ए टैग था जिस पर मैंने href तत्व भी निर्दिष्ट किया था (यही वह क्रॉलर दिखता है ...) और निश्चित रूप से मैंने मोबाइल पठनीयता पर बहुत ध्यान दिया।

परिणाम: मुझे वास्तव में पहले से अधिक आने वाले ट्रैफ़िक मिलते हैं, और खोज कंसोल में मैं स्पष्ट रूप से देखता हूं कि मेरे अनुक्रमित पृष्ठ ऊपर गए: 30k + पृष्ठों में से केवल 10K इंडेक्स में शामिल किए गए थे। अब मेरे पास इंडेक्स में लगभग 25k पेज हैं।

मैं यह नहीं कह रहा हूँ कि serverside प्रतिपादन अप्रासंगिक है। सार्वभौमिक या अन्य विधियों का उपयोग करने से परिणामस्वरूप तेजी से डाउनलोड हो जाएंगे, जो शायद उच्च स्कोर तक पहुंच जाएंगे। लेकिन Google निश्चित रूप से एक कोणीय एसपीए को सही ढंग से अनुक्रमित करने में सक्षम है।

संपादित करें: कुछ सबूत: यदि आप "3ds अधिकतम थ्रेड्रिपर" google पर हैं, तो आप देखेंगे कि यह वास्तव में इंटरनेट पर सबसे बड़ी हार्डवेयर साइटों में से एक है।