Mengatasi Batasan SPA untuk SEO
Single Page Applications (SPA) seperti Vue.js menawarkan pengalaman pengguna yang cepat.
Transisinya terasa lancar. Manajemen state berjalan dengan baik.
Namun, SPA memiliki masalah utama bagi trafik pencarian organik.
Bot mesin pencari sering kali hanya melihat div root HTML yang kosong. Mereka tidak melihat apa pun.
Google pada akhirnya dapat membaca JavaScript. Namun, ini membutuhkan waktu. Mesin pencari lainnya lebih kesulitan lagi.
Kami membangun Global Full-Stack Developer (GFD) menggunakan Vue 3. Kami membutuhkan SEO. Kami tidak ingin memindahkan semuanya ke framework Server-Side Rendered (SSR) seperti Nuxt.
Kami mengatasi hal ini dengan prerendering pada saat build.
Prerendering membuat file HTML statis untuk rute Anda selama proses build.
Saat bot mengunjungi halaman /about atau /services Anda, ia akan melihat dokumen HTML yang lengkap. Ia tidak melihat kerangka kosong.
Kami menggunakan vite-plugin-prerender untuk pengaturan Vite kami.
Berikut cara mengimplementasikannya.
- Instal plugin sebagai dependensi pengembangan:
npm install vite-plugin-prerender -D
Konfigurasikan plugin di dalam file vite.config.js Anda.
Cantumkan rute spesifik Anda yang perlu diindeks.
Metode ini memberi Anda kecepatan SPA sekaligus manfaat SEO dari situs statis.
Sumber: https://dev.to/ariyoz/overcoming-the-spa-limitation-how-we-solved-seo-for-our-vue-3-web-app-5cjd