Подолання обмежень SPA для SEO
Односторінкові додатки (SPA), такі як Vue.js, забезпечують швидку взаємодію з користувачем.
Переходи виглядають плавними. Управління станом працює добре.
Але SPA мають серйозну проблему для органічного пошукового трафіку.
Боти пошукових систем часто бачать порожній кореневий HTML div. Вони не бачать нічого.
З часом Google здатний зчитувати JavaScript. Але це потребує часу. Інші пошукові системи мають з цим більше труднощів.
Ми розробили Global Full-Stack Developer (GFD) на базі Vue 3. Нам потрібне було SEO. Ми не хотіли переносити все на фреймворк із серверним рендерингом (SSR), такий як Nuxt.
Ми вирішили це за допомогою попереднього рендерингу (prerendering) під час збірки.
Prerendering створює статичні HTML-файли для ваших маршрутів під час процесу збірки.
Коли бот відвідує вашу сторінку /about або /services, він бачить повноцінний HTML-документ. Він не бачить порожньої оболонки.
Ми використали vite-plugin-prerender для нашого налаштування Vite.
Ось як це реалізувати.
- Встановіть плагін як залежність для розробки:
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