Помню тот хайп: «Одностраничные приложения — это будущее!», «Серверный рендеринг — это старье». Мы, как и многие, купились. Запустили красивый, быстрый сайт на Vue.js.
Пользователи были в восторге. Мы — тем более. Пока через месяц не полезли в Google Search Console.
Картина была удручающей. Страницы товаров? Проиндексированы, но сниппеты — только заголовок и навигация.
Блог-статьи? Их просто не было. Поисковые роботы видели практически пустой HTML-скелет и кучу непонятного для них JS-кода.
Наш шикарный динамический контент, который подгружался аяксом, для Google был невидимкой. Трафик из органики начал тихо, но уверенно проседать. **Что мы делали не так (спойлер: почти всё):** 1.
**Положились на «умного» Google.** Миф о том, что Google давно умеет исполнять JS, — опасен. Да, умеет. Но делает он это в очередь, с задержкой, не всегда полностью и не для всех страниц сразу.
Ваш JS может сломаться, зависнуть на какой-нибудь асинхронной операции — и робот уйдет ни с чем. 2. **Проигнорировали SSR (Server-Side Rendering).** Сначала он казался нам сложным, избыточным.
«Зачем нам Node.js сервер, если у нас статика?». Ответ пришел с падением позиций. 3.
**Не думали о соцсетях.** Попробуйте расшарить ссылку на Vue-сайт в Telegram или ВК. Скорее всего, превью не будет. Потому что их боты тоже не рендерят JS.
**Как мы выкапывались (план спасения):** 1. **Экстренная мера: Prerender SPA Plugin.** Первое, что мы внедрили. Это простой инструмент, который во время сборки статики создает полностью отрендеренные HTML-файлы для ключевых страниц.
Роботам отдается готовый HTML, пользователям — всё то же быстрое SPA. Костыль? Да.
Но он мгновенно остановил падение. Страницы начали появляться в поиске с правильными описаниями. 2.
**Основное решение: Nuxt.js.** Мы не стали латать дыры, а переехали на фреймворк, созданный для решения этих проблем. Nuxt (аналог Next.js для React) предоставляет Universal Mode. Проще говоря, первая загрузка страницы происходит на сервере, отдается готовый HTML с контентом (идеально для роботов и SEO), а дальше на клиенте подхватывается Vue и работает как быстрое SPA.
Это был game-changer. 3. **Техническая гигиена:** * **Правильные мета-теги.** Динамически меняли не только title и description, но и Open Graph для соцсетей.
* **`robots.txt` и `sitemap.xml`.** Убедились, что мы не блокируем JS-файлы для роботов и в карте сайта актуальные ссылки. * **Проверка в Search Console.** Регулярно используем инструмент «Проверка URL» — он показывает страницу именно так, как её видит робот Google. **Итог и горькая правда:** Оптимизация JS-сайта для SEO — это не «фича», которую можно добавить потом.
Это **архитектурное решение**, которое нужно закладывать в проект с первого дня. SSR или статическая генерация (SSG) — это must-have для любого проекта, которому нужен трафик из поиска. Сейчас наш трафик не только восстановился, но и вырос.
Но тот месяц паники и срочных правок стоил нам нервов и денег. Учитесь на наших ошибках: будущее — за гибридными подходами, где скорость для пользователя и видимость для робота идут рука об руку. А слепое следование тренду «всё на клиенте» может оказаться дорогим заблуждением.
