غلبه بر محدودیتهای SPA برای SEO
اپلیکیشنهای تکصفحهای (SPA) مانند Vue.js تجربهی کاربری سریعی را ارائه میدهند.
انتقالها روان به نظر میرسند. مدیریت وضعیت (State management) به خوبی عمل میکند.
اما SPAها یک مشکل بزرگ برای ترافیک جستجوی ارگانیک دارند.
رباتهای موتور جستجو اغلب یک div ریشه (root) خالی در HTML میبینند. آنها هیچچیز نمیبینند.
گوگل در نهایت جاوااسکریپت را میخواند، اما این کار زمانبر است. سایر موتورهای جستجو با مشکلات بیشتری روبرو هستند.
ما Global Full-Stack Developer (GFD) را با استفاده از Vue 3 ساختیم. ما به SEO نیاز داشتیم، اما نمیخواستیم همه چیز را به یک فریمورک رندر سمت سرور (SSR) مانند Nuxt منتقل کنیم.
ما این مشکل را با استفاده از prerendering در زمان بیلد (build-time) حل کردیم.
Prerendering در طول فرآیند بیلد، فایلهای HTML استاتیک برای مسیرهای (routes) شما ایجاد میکند.
وقتی یک ربات از صفحهی /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