Мой сайт

Три уровня SEO для Vue: **Уровень 1: Рендеринг** Поисковики могут рендерить JavaScript, но медленно и ненадёжно. Googlebot — да, но с задержкой. Yandex, Bing — хуже. Социальные краулеры (Facebook, Telegram) — не рендерят JS вообще. ```javascript // Вариант 1: SSR (лучший для динамического контента) // Каждый запрос рендерится на сервере // Nuxt или ручной SSR на Vite // Вариант 2: SSG (лучший для статического контента) // HTML генерируется в build-time // VitePress, Nuxt generate, vite-ssg // Вариант 3: Prerendering (компромисс для SPA) // npm install vite-plugin-prerender import prerender from 'vite-plugin-prerender' export default defineConfig({ plugins: [ vue(), prerender({ routes: ['/', '/about', '/products', '/contacts'], renderer: 'puppeteer' }) ] }) ``` **Уровень 2: Мета-теги** ```vue ``` **Уровень 3: Технический SEO** ```javascript // router/index.js — корректные маршруты const routes = [ { path: '/products/:slug', component: () => import('@/views/ProductPage.vue'), meta: { title: 'Товар' } }, { path: '/:pathMatch(.*)*', component: () => import('@/views/NotFound.vue') } ] // 404 должен возвращать HTTP 404, а не 200 с текстом «Не найдено» ``` ```javascript // server.js — корректные HTTP-статусы для SSR app.use('*', async (req, res) => { const { html, statusCode } = await render(req.url) res.status(statusCode).send(html) // 200 или 404 }) ``` ```vue ``` ## 📌 Реальные кейсы - **E-commerce без SSR** — страницы товаров не индексируются неделями. После добавления SSR — индексация за 2-3 дня, трафик из поиска вырос в 3 раза. - **Блог на Vue** — SSG через vite-ssg. Каждая статья генерируется в HTML при билде. Мгновенная индексация, минимальная нагрузка на сервер. ## Частые ошибки ```javascript // ❌ Один title для всех страниц // Мой сайт — на каждой странице // ✅ Уникальный title с ключевыми словами для каждого маршрута useHead({ title: 'Кроссовки Nike Air Max — купить в Москве | Магазин' }) ``` ```vue ``` ```javascript // ❌ Хеш-роутинг для SEO-страниц createRouter({ history: createWebHashHistory() }) // URL: shop.com/#/products/shoes — краулеры не индексируют хеш // ✅ History mode createRouter({ history: createWebHistory() }) // URL: shop.com/products/shoes ``` ## Резюме SEO для Vue = SSR/SSG для рендеринга + `@unhead/vue` для мета-тегов + JSON-LD для structured data + sitemap + semantic HTML + history mode роутинг + корректные HTTP-статусы. Без серверного рендеринга полноценное SEO невозможно. ---

{{ product.name }}

Как реализовать SEO-оптимизацию Vue-приложения?