В SPA без SSR мета-теги обновляются через JavaScript — это работает для пользователей и Googlebot, но не для социальных краулеров (они не исполняют JS). Базовая настройка: ```javascript // main.js import { createApp } from 'vue' import { createHead } from '@unhead/vue' import App from './App.vue' import router from './router' const app = createApp(App) const head = createHead() app.use(head) app.use(router) app.mount('#app') ``` Глобальные мета-теги в App.vue: ```vue ``` Мета-теги на уровне страниц: ```vue ``` ```vue ``` Мета-теги через route meta (декларативный подход): ```javascript // router/index.js const routes = [ { path: '/', component: () => import('@/views/HomePage.vue'), meta: { title: 'Главная', description: 'Интернет-магазин электроники' } }, { path: '/about', component: () => import('@/views/AboutPage.vue'), meta: { title: 'О нас', description: 'История компании' } } ] ``` ```javascript // Глобальный guard для простых страниц router.afterEach((to) => { const { title, description } = to.meta if (title) { document.title = `${title} | МойСайт` } if (description) { const tag = document.querySelector('meta[name="description"]') if (tag) tag.setAttribute('content', description) } }) ``` Но `useHead` / `useSeoMeta` — предпочтительнее guard, потому что управляет всеми тегами, поддерживает SSR и автоматически очищает теги при размонтировании компонента. ## 📌 Реальные кейсы - **SPA с преренерингом** — для 20 статических страниц (главная, о нас, контакты) prerendering генерирует HTML с мета-тегами. Динамические страницы (профиль пользователя) остаются SPA-only — для них мета-теги менее критичны. - **Шеринг в соцсетях** — без SSR Facebook/Telegram не видят og-теги. Решение: либо SSR для публичных страниц, либо сервис вроде prerender.io, который отдаёт краулерам pre-rendered HTML. ## Частые ошибки ```javascript // ❌ document.title напрямую — не масштабируется router.afterEach((to) => { document.title = to.meta.title // нет template, нет og-тегов, нет SSR // ✅ useHead в каждом компоненте-странице }) ``` ```vue ``` ## Резюме `useSeoMeta()` в каждой странице для уникальных мета-тегов. `titleTemplate` в App.vue для единообразия. `computed` для реактивных данных. Для социальных краулеров мета-теги в SPA бесполезны без SSR/prerendering. Используй `@unhead/vue` вместо ручной манипуляции DOM. ---

Как настроить мета-теги для SPA на Vue?