कोणीय यूनिवर्सल बनाम प्रेंडरेंडर ।io

यदि आप एक कोणीय डेवलपर हैं, तो आप जानते हैं कि एसईओ एक बालों वाली स्थिति है। और यदि आप हमारे जैसे हैं, तो आप शायद Google ने दो मुख्य समाधानों के लिए अपना रास्ता खोज लिया है। इस लेख में, हम इस बात को तोड़ना चाहते हैं कि प्रत्येक प्रक्रिया कितनी जटिल है और यह कितनी प्रभावी है। ध्यान दें कि यह सब हमारे अनुभवों से आधारित है। यदि आप अन्यथा सोचते हैं, तो हमसे संपर्क करने में संकोच न करें!

1. कोणीय सार्वभौमिक

प्रलेखन: https://angular.io/guide/universal
जटिलता: 7/10
प्रभावशीलता: 6/10

हमारे उपयोग के मामले में, हमने एक कोणीय सार्वभौमिक स्टार्टर का उपयोग नहीं किया। हमने पहले ही एक (कोणीय 7 परियोजना) के बिना हमारी वेबसाइट का निर्माण कर लिया था। और यद्यपि आपके मौजूदा कोणीय प्रोजेक्ट में एकीकृत करने के लिए प्रक्रिया सुपर लंबी नहीं है, लेकिन यह निश्चित रूप से समझने में समय लगता है कि क्या हो रहा है। एक स्पष्टीकरण को गूंगा करने के लिए, कोणीय यूनिवर्सल आपके एप्लिकेशन के दो संस्करण बनाता है। एक वह "सर्वर" ऐप है, जो आपके पृष्ठों को स्थैतिक HTML में प्रस्तुत करता है। यह पहले होता है और यह है कि एसईओ बॉट से क्या खींचेगा। अन्य संस्करण "ब्राउज़र" ऐप है। यह आपका नियमित गतिशील और पूरी तरह से कार्यात्मक कोणीय अनुप्रयोग है। यूनिवर्सल अपने लोड हो रहा है लोड हो रहा है एक बार अपने ब्राउज़र आवेदन के साथ अपने सर्वर की ओर से प्रदान की गई अनुप्रयोग बाहर स्वैप। इस प्रकार आप एक मामूली घबराहट देख सकते हैं, विशेष रूप से धीमी गति पर।

चूँकि यह एक लेख है जिसके बारे में ज्यादातर एक दूसरे से उपयोग करने के लिए कहा जाता है, इसलिए हम बहुत अधिक कोड नहीं लिख रहे हैं। कृपया ऊपर दिए गए डॉक्स लिंक की समीक्षा करें।

हालाँकि हम उन मुद्दों के बारे में टिप्पणी करना चाहते हैं जिनका हमने सामना किया और उन चीजों के बारे में जिन्हें हमें उनके आसपास काम करना था:
1. स्क्रिप्ट को अपने पैकेज में अपने लिए सुझाए गए दस्तावेज़ जोड़ें। इसे angular.json सर्वर टारगेट में डालने से एक एरर आएगा।
2. जब आप अपने AppServerModuleNgFactory को आयात करते हैं, तो अपने सर्वर की फ़ाइल के लिए, इसे अपने / ./istist/server/main फ़ाइल से प्राप्त करें, न कि ts। / Dist/server/main.bundle से।
3. यदि आप अपने प्रोजेक्ट के लिए SCSS का उपयोग कर रहे हैं, तो इस स्निपेट को angular.json सर्वर लक्ष्य के तहत जोड़ना सुनिश्चित करें। अन्यथा, यह सर्वर लक्ष्य बनाते समय त्रुटियों को फेंक देगा।

"stylePreprocessorOptions": {"इसमें शामिल हैं": ["src / scss"]}

4. अपने नियमित निर्माण लक्ष्य और सर्वर लक्ष्य के लिए अपने आउटपुट पथों को दोबारा जांचना सुनिश्चित करें। बिल्ड आउटपुट पथ डिस्टर्ब / प्रोजेक्ट-नेम / ब्राउज़र जैसा होना चाहिए और सर्वर आउटपुट पथ डिस्ट / प्रोजेक्ट-नेम / सर्वर जैसा होना चाहिए

हमारे समाप्त होने के बाद, हम क्रोम पर "व्यू पेज सोर्स" से अपने पेज के सभी कोड देख सकते हैं। हमने अपनी परियोजना के लिए डायनामिक मेटा टैग (मेटा सेवा का उपयोग करके) को भी एकीकृत किया है और जब हम अपने पेज का निरीक्षण करते हैं तो हम उन्हें देख सकते हैं। इसलिए अब हमने अपनी साइट को तैनात करने और Google पर अपने पृष्ठों को अनुक्रमित करने के बाद पेशेवरों और विपक्षों को दिया है:

पेशेवरों
- हमारे सभी पेज Google पर खोजे जा रहे थे
- Google बॉट हमारे पृष्ठों से पाठ को खींचने में सफल रहे

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

2. प्ररेंडर .io

प्रलेखन: https://prerender.io/documentation
जटिलता: 2/10
प्रभावशीलता: 7/10

इससे पहले कि हम कोणीय यूनिवर्सल की कोशिश की, हम Prerender.io बाहर की कोशिश की। यह निश्चित रूप से परेशानी की LEAST राशि वाला मार्ग है। Google और बिंग बॉट्स के साथ काम करने वाले तरीके से इसे लागू करने के लिए, इसे टोकन के लिए केवल अपनी साइट पर कोड और पंजीकरण की कई लाइनों की आवश्यकता होती है। और इस उदाहरण में, हम एक एक्सप्रेस नोड सर्वर का उपयोग कर रहे हैं:

var prerender = आवश्यकता (‘prerender-node’)। सेट (ender prerenderToken ’, EN YOUR_TOKEN’);
prerender.crawlerUserAgents.push ( 'googlebot');
prerender.crawlerUserAgents.push ( 'bingbot');
prerender.crawlerUserAgents.push ( 'Yandex');
app.use (prerender);

यदि आप एक्सप्रेस / नोड का उपयोग कर रहे हैं, तो अपने एक्सप्रेस के ऊपर app.use (prerender) लाइन होना सुनिश्चित करें। मध्यम मिडलवेयर जो आपकी डिस्टर्ब डायरेक्टरी को परोस रहा हो।

Prerender.io के साथ, यह अनिवार्य रूप से सार्वभौमिक के साथ एक ही काम करेगा। यह आपके पृष्ठों के एक स्थिर HTML को कैश करेगा और जब वे आपकी साइट के माध्यम से क्रॉल करेंगे तो Google बॉट्स तक उनकी सेवा करेंगे।

तो यह सुपर आसान है और एसपीए के साथ अच्छा काम करता है, लेकिन क्या यह प्रभावी था?

पेशेवरों
- बहुत जल्दी सेट अप
- फ्री वर्जन 250 पेज तक कैश कर सकता है
- हमारे पृष्ठों के लिए Google खोज परिणाम उन सभी विवरणों के अनुसार हैं जो हम मेटा सेवा में निर्धारित करते हैं

विपक्ष
- 250 से अधिक मुक्त पृष्ठ लगता है, कैशिंग आपके url के कई संस्करणों (उदाहरण के रूप में हमारी साइट का उपयोग करके) https://www.brewcrewlabs.com और https://brewcrewlabs.com पर किया जा सकता है। अगला टियर $ 15 / माह के लिए 20,000 पेज है।

3. फैसला

फैसला यह है कि कोणीय सार्वभौमिक अभी तैयार नहीं है। हालाँकि ऐसी चीजें हो सकती हैं जिन्हें हम अपने SEO को तेज करने के लिए देख सकते हैं, Prerender.io अभी और अधिक सरल और प्रभावी है। यदि आप हर सप्ताह पृष्ठों की बहुतायत के उत्पादन के बारे में नहीं सोचते हैं, तो Prerender.io आपके लिए समाधान हो सकता है। यद्यपि कोणीय सार्वभौमिक कुछ तरीकों से काम करता है, लेकिन उसे प्ररेंडर.आईओ के समान स्तर पर काम करने के लिए अधिक पैर के काम की आवश्यकता होती है। शायद हम केवल कोणीय यूनिवर्सल के लिए गुप्त सॉस नहीं जानते हैं - यदि आप करते हैं, तो कृपया हमें अपने अनुभव के बारे में बताएं!

आशा है कि इस लेख ने इसी तरह की स्थिति में किसी और की मदद की!