التغلب على قيود SPA من أجل SEO
توفر تطبيقات الصفحة الواحدة (SPA) مثل Vue.js تجارب مستخدم سريعة.
تبدو الانتقالات سلسة، وتعمل إدارة الحالة (State management) بشكل جيد.
ولكن تواجه تطبيقات SPA مشكلة رئيسية فيما يتعلق بحركة البحث المجانية (organic search traffic).
غالبًا ما ترى روبوتات محركات البحث عنصر div فارغًا في جذر HTML، فهي لا ترى شيئًا.
في النهاية، يستطيع Google قراءة JavaScript، لكن الأمر يستغرق وقتًا، بينما تواجه محركات البحث الأخرى صعوبة أكبر.
لقد قمنا ببناء Global Full-Stack Developer (GFD) باستخدام Vue 3. كنا بحاجة إلى SEO، ولم نرغب في نقل كل شيء إلى إطار عمل يعتمد على العرض من جانب الخادم (SSR) مثل Nuxt.
لقد حللنا هذه المشكلة باستخدام التقديم المسبق عند وقت البناء (build-time prerendering).
يقوم التقديم المسبق (Prerendering) بإنشاء ملفات HTML ثابتة لمساراتك (routes) أثناء عملية البناء.
عندما يزور الروبوت صفحة /about أو /services الخاصة بك، فإنه يرى مستند HTML كاملاً، ولا يرى مجرد هيكل فارغ.
استخدمنا vite-plugin-prerender لإعداد Vite الخاص بنا.
إليك كيفية تنفيذ ذلك.
- قم بتثبيت الإضافة كاعتمادية تطوير (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