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 प्रोसेस दरम्यान तुमच्या रूट्ससाठी (routes) स्टॅटिक HTML फाइल्स तयार करते.
जेव्हा एखादा बॉट तुमच्या /about किंवा /services पेजला भेट देतो, तेव्हा त्याला पूर्ण HTML डॉक्युमेंट दिसते. त्याला फक्त एक रिकामी शेल दिसत नाही.
आम्ही आमच्या Vite सेटअपसाठी vite-plugin-prerender वापरले.
हे तुम्ही कसे लागू करू शकता ते खाली दिले आहे.
- प्लगइन डेव्हलपमेंट डिपेंडन्सी (development dependency) म्हणून इंस्टॉल करा:
npm install vite-plugin-prerender -D
तुमच्या vite.config.js फाईलमध्ये प्लगइन कॉन्फिगर करा.
ज्या विशिष्ट रूट्सना इंडेक्सिंगची (indexing) गरज आहे त्यांची यादी द्या.
ही पद्धत तुम्हाला SPA चा वेग आणि स्टॅटिक साइट्सचे SEO फायदे दोन्ही देते.
स्त्रोत: https://dev.to/ariyoz/overcoming-the-spa-limitation-how-we-solved-seo-for-our-vue-3-web-app-5cjd