कोणीय और एसईओ: कैसे उन्हें दोस्त बनाने के लिए?

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

सर्वर साइड रेंडरिंग (SSR) में जाने के बाद मेरी छोटी प्रौद्योगिकी अनुसंधान परियोजना उपस्थिति को बदल रही है

कोणीय और तैयार किए गए उदाहरणों को लुढ़का नीचे से कैसे कॉन्फ़िगर करें।

prerender

एक प्रीरेन्डर हमारे एसपीए पृष्ठ से स्टैटिक्स की पीढ़ी है, जिसमें एक निरंतर डोम है।

फिट बैठता है :

1. साधारण स्थैतिक पृष्ठों के लिए
2. लगातार या धीरे-धीरे बदलते डेटा के साथ
3. उन पृष्ठों के निर्माण के लिए जहां डेटा सर्वर से डेटा प्राप्त करने में लंबा समय लगता है (+ बिंदु 2)
4. जब एपीआई से डेटा महत्वपूर्ण नहीं है, तो आपको केवल एसईओ मेटा टैग बनाने की आवश्यकता है

उपयुक्त नहीं :

1. डेटा प्रासंगिकता महत्वपूर्ण है और तेजी से बदल रही है
2. डेटा की मात्रा स्टैटिक्स के निर्माण की अनुमति नहीं देती है
3. बिल्डिंग स्टैटिक्स आपके लिए बहुत लंबा है

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

कोणीय यूनिवर्सल, कोणीय अनुप्रयोगों के सर्वर-साइड प्रतिपादन के निर्माण के लिए एक पुस्तकालय है, वर्तमान में यूनिवर्सल कोणीय का आधिकारिक हिस्सा है ( https://github.com/angular/universal )

यूनिवर्सल कैसे काम करता है और इसे यहाँ कैसे बनाया जाए: https://angular.io/guide/universal

बारीकियों:

यूनिवर्सल कार्यान्वयन NodeJS और .Net कोर पर आधारित है।
मैं आपको यूनिवर्सल के लिए .Net कोर कार्यान्वयन का उपयोग करने की सलाह नहीं देता:

1. अंदर आप अभी भी NodeJS के माध्यम से प्रतिपादन का उपयोग करते हैं
2. यह धीमा है: https://github.com/angular/universal/issues/654#issuecomment-350037107
3. कम उदाहरण हैं

शुरुआत के अच्छे उदाहरण:

1. https://github.com/qdouble/angular-webpack-starter
2. https://github.com/ng-seed/universal
3. https://github.com/Angular-RU/angular-universal-starter

DOM के लिए, सर्वर मोज़िला के dom.js के आधार पर डोमिनोज़ का उपयोग करता है, जो document is not defined तरह document is not defined त्रुटियों से बचा जाता document is not defined ।
तीसरे पक्ष के पुस्तकालयों से त्रुटियों को बाहर करने के लिए server.ts में कोड:

 global['window'] = win; Object.defineProperty(win.document.body.style, 'transform', { value: () => { return { enumerable: true, configurable: true }; }, }); global['document'] = win.document; global['CSS'] = null; 

कोणीय में पूर्वज

स्टैटिक्स के निर्माण के लिए, आपको प्रसंस्करण के लिए मार्ग निर्दिष्ट करने की आवश्यकता है, उदाहरण के लिए: static.paths.ts ।
हम prerender.ts में prerender स्क्रिप्ट लिखते हैं।
एक प्रीरेन्डर बनाने के लिए, दौड़ें:
ng build --prod && ng run universal-demo:server:production && webpack --progress --colors
सर्वर कोड और कोणीय बनाने के लिए, फिर स्टैटिक्स बनाने के लिए node prerender.js को node prerender.js ।
एक प्रीरेन्डर के माध्यम से प्राप्त स्टैटिक्स को नगनेक्स द्वारा दिया जा सकता है।

SSR को गतिशील रूप से बनाने के लिए हम server.ts का उपयोग करेंगे ।
प्रोजेक्ट बनाने के लिए, रन करें:
ng build --prod && ng run universal-demo:server:production && webpack --progress --colors ,
तो node server.js ।
सर्वर के काम करने के लिए, आपके पास node होना चाहिए।

आप एक संयुक्त दृष्टिकोण का उपयोग कर सकते हैं: प्रीरेंडर और डायनेमिक SSR, यदि आप कुछ पथों के साथ पूर्व-रेंडर किए गए पृष्ठ देते हैं: सर्वर कोड

कुकीज़ का उपयोग प्राधिकरण के लिए किया जाना चाहिए - कुकीज़ के साथ काम करने का एक उदाहरण

मेटा जानकारी बनाने के लिए, मैं साझा-मेटा.मॉड्यूल का उपयोग करने की सलाह देता हूं , जो मेटा जानकारी के अनुवाद का भी समर्थन करता है।

सर्वर पर एपीआई से ब्राउज़र में फिर से रिक्वेस्ट किए बिना एपीआई से जानकारी का अनुरोध करने के लिए, मैं उपयोग करने की सलाह देता हूं:

• TransferHttpCacheModule - आधिकारिक इंटरसेप्टर मॉड्यूल
• ngx-transfer-http - उन्नत सेवा
  दोनों उदाहरण डेटा के साथ काम करने के लिए TransferState का उपयोग करते हैं।

मल्टी-स्टेज बिल्ड का उपयोग करके डोकर बिल्ड उदाहरण:

• एसएसआर
• सीएसआर

potestit:

• एसएसआर
• सीएसआर

सार्वभौमिक टेलीग्राम समुदाय