SEO के लिए SPA की सीमाओं को दूर करना
Vue.js जैसे Single Page Applications (SPA) तेज़ यूजर एक्सपीरियंस प्रदान करते हैं।
ट्रांज़िशन सहज महसूस होते हैं। स्टेट मैनेजमेंट अच्छी तरह काम करता है।
लेकिन ऑर्गेनिक सर्च ट्रैफिक के लिए SPAs में एक बड़ी समस्या है।
सर्च इंजन बॉट्स अक्सर एक खाली HTML root div देखते हैं। उन्हें कुछ भी दिखाई नहीं देता।
Google अंततः JavaScript को पढ़ लेता है। इसमें समय लगता है। अन्य सर्च इंजन अधिक संघर्ष करते हैं।
हमने Vue 3 का उपयोग करके Global Full-Stack Developer (GFD) बनाया। हमें SEO की आवश्यकता थी। हम सब कुछ Nuxt जैसे Server-Side Rendered (SSR) फ्रेमवर्क पर नहीं ले जाना चाहते थे।
हमने इसे build-time prerendering के साथ हल किया।
Prerendering आपके build process के दौरान आपके routes के लिए static HTML फ़ाइलें बनाता है।
जब कोई बॉट आपके /about या /services पेज पर जाता है, तो उसे एक पूरा HTML डॉक्यूमेंट दिखाई देता है। उसे कोई खाली शेल नहीं दिखता।
हमने अपने Vite सेटअप के लिए vite-plugin-prerender का उपयोग किया।
इसे लागू करने का तरीका यहाँ दिया गया है।
- प्लगइन को development dependency के रूप में इंस्टॉल करें:
npm install vite-plugin-prerender -D
अपनी vite.config.js फ़ाइल में प्लगइन को कॉन्फ़िगर करें।
उन विशिष्ट routes की सूची बनाएं जिन्हें इंडेक्सिंग की आवश्यकता है।
यह तरीका आपको SPA की गति और static साइट्स के SEO लाभ प्रदान करता है।
स्रोत: https://dev.to/ariyoz/overcoming-the-spa-limitation-how-we-solved-seo-for-our-vue-3-web-app-5cjd