SEO کے لیے SPA کی حدود پر قابو پانا
Vue.js جیسی Single Page Applications (SPA) تیز رفتار صارف تجربہ فراہم کرتی ہیں۔
اس میں ٹرانزیشنز ہموار محسوس ہوتی ہیں۔ اسٹیٹ مینجمنٹ بھی بہترین طریقے سے کام کرتی ہے۔
لیکن آرگینک سرچ ٹریفک کے لیے SPAs میں ایک بڑا مسئلہ ہے۔
سرچ انجن بوٹس اکثر ایک خالی HTML root div دیکھتے ہیں۔ انہیں کچھ نظر نہیں آتا۔
گوگل آخر کار JavaScript کو پڑھ لیتا ہے۔ اس میں وقت لگتا ہے۔ دیگر سرچ انجنوں کو زیادہ دشواری ہوتی ہے۔
ہم نے Vue 3 کا استعمال کرتے ہوئے Global Full-Stack Developer (GFD) بنایا۔ ہمیں SEO کی ضرورت تھی۔ ہم سب کچھ Nuxt جیسے Server-Side Rendered (SSR) فریم ورک پر منتقل نہیں کرنا چاہتے تھے۔
ہم نے اسے build-time prerendering کے ذریعے حل کیا۔
Prerendering آپ کے بلڈ پروسیس کے دوران آپ کے روٹس کے لیے اسٹیٹک HTML فائلیں تیار کرتا ہے۔
جب کوئی بوٹ آپ کے /about یا /services پیج پر جاتا ہے، تو اسے ایک مکمل HTML دستاویز نظر آتی ہے۔ اسے کوئی خالی ڈھانچہ نظر نہیں آتا۔
ہم نے اپنے 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