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 તમારી બિલ્ડ પ્રક્રિયા દરમિયાન તમારા રૂટ્સ (routes) માટે સ્ટેટિક HTML ફાઇલો બનાવે છે.
જ્યારે કોઈ બોટ તમારા /about અથવા /services પેજની મુલાકાત લે છે, ત્યારે તેને સંપૂર્ણ HTML ડોક્યુમેન્ટ દેખાય છે. તેને ખાલી શેલ (empty shell) દેખાતું નથી.
અમે અમારા Vite સેટઅપ માટે vite-plugin-prerender નો ઉપયોગ કર્યો.
તમે તેને કેવી રીતે અમલમાં મૂકી શકો છો તે અહીં છે.
- પ્લગઈનને ડેવલપમેન્ટ ડિપેન્ડન્સી (development dependency) તરીકે ઇન્સ્ટોલ કરો:
npm install vite-plugin-prerender -D
તમારી vite.config.js ફાઇલમાં પ્લગઈન કોન્ફિગર કરો.
ઇન્ડેક્સિંગની જરૂર હોય તેવા તમારા ચોક્કસ રૂટ્સની યાદી બનાવો.
આ પદ્ધતિ તમને SPA ની ઝડપ અને સ્ટેટિક સાઇટ્સના SEO ફાયદા બંને આપે છે.
સ્ત્રોત: https://dev.to/ariyoz/overcoming-the-spa-limitation-how-we-solved-seo-for-our-vue-3-web-app-5cjd