SEO ਲਈ SPA ਦੀਆਂ ਸੀਮਾਵਾਂ ਨੂੰ ਦੂਰ ਕਰਨਾ
Vue.js ਵਰਗੀਆਂ Single Page Applications (SPA) ਤੇਜ਼ ਯੂਜ਼ਰ ਅਨੁਭਵ ਪ੍ਰਦਾਨ ਕਰਦੀਆਂ ਹਨ।
ਟ੍ਰਾਂਜ਼ੀਸ਼ਨ (transitions) ਸੁਚਾਰੂ ਮਹਿਸੂਸ ਹੁੰਦੇ ਹਨ। State management ਵਧੀਆ ਤਰੀਕੇ ਨਾਲ ਕੰਮ ਕਰਦਾ ਹੈ।
ਪਰ ਆਰਗੈਨਿਕ ਸਰਚ ਟ੍ਰੈਫਿਕ (organic search traffic) ਲਈ 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 ਲਈ ਸਟੈਟਿਕ HTML ਫਾਈਲਾਂ ਬਣਾਉਂਦਾ ਹੈ।
ਜਦੋਂ ਕੋਈ ਬੋਟ ਤੁਹਾਡੇ /about ਜਾਂ /services ਪੇਜ 'ਤੇ ਜਾਂਦਾ ਹੈ, ਤਾਂ ਉਹ ਇੱਕ ਪੂਰਾ HTML ਦਸਤਾਵੇਜ਼ ਦੇਖਦਾ ਹੈ। ਉਹ ਇੱਕ ਖਾਲੀ ਢਾਂਚਾ (empty shell) ਨਹੀਂ ਦੇਖਦਾ।
ਅਸੀਂ ਆਪਣੇ Vite setup ਲਈ vite-plugin-prerender ਦੀ ਵਰਤੋਂ ਕੀਤੀ।
ਇਸ ਨੂੰ ਲਾਗੂ ਕਰਨ ਦਾ ਤਰੀਕਾ ਇੱਥੇ ਦਿੱਤਾ ਗਿਆ ਹੈ।
- ਪਲੱਗਇਨ ਨੂੰ development dependency ਵਜੋਂ ਇੰਸਟਾਲ ਕਰੋ:
npm install vite-plugin-prerender -D
ਆਪਣੀ vite.config.js ਫਾਈਲ ਵਿੱਚ ਪਲੱਗਇਨ ਨੂੰ ਕੰਫਿਗਿਅਰ ਕਰੋ।
ਆਪਣੇ ਉਹਨਾਂ ਖਾਸ routes ਦੀ ਸੂਚੀ ਬਣਾਓ ਜਿਨ੍ਹਾਂ ਦੀ ਇੰਡੈਕਸਿੰਗ (indexing) ਦੀ ਲੋੜ ਹੈ।
ਇਹ ਵਿਧੀ ਤੁਹਾਨੂੰ ਇੱਕ SPA ਦੀ ਰਫ਼ਤਾਰ ਅਤੇ ਸਟੈਟਿਕ ਸਾਈਟਾਂ ਦੇ SEO ਲਾਭ ਦਿੰਦੀ ਹੈ।
ਸਰੋਤ: https://dev.to/ariyoz/overcoming-the-spa-limitation-how-we-solved-seo-for-our-vue-3-web-app-5cjd