Vue Router и выбор режима работы с адресами
Vue Router умеет работать в двух режимах. В режиме хеша адрес содержит символ решётки, и, как разбиралось в статье про хеш-роутинг, поисковая система различает такие страницы плохо. В режиме истории адреса выглядят как обычные пути, и именно его нужно включать для любого сайта, который должен индексироваться.
const router = createRouter({
history: createWebHistory(),
routes: [
{ path: '/blog/:slug', component: Post }
]
})Режим истории требует настройки сервера: любой запрос к внутреннему пути должен отдавать приложение, иначе прямое обращение по адресу закончится ошибкой.
Nuxt: маршруты из структуры файлов
В Nuxt адреса создаются автоматически из содержимого папки страниц, как и в Next.js, о котором шла речь в статье про динамические маршруты. Файл со скобками в имени превращается в динамический сегмент.
pages/index.vue— главная страница;pages/blog/index.vue— список статей по адресу /blog;pages/blog/[slug].vue— страница конкретной статьи.
Серверный рендеринг как главное преимущество Nuxt
Чистое клиентское приложение отдаёт роботу почти пустую страницу, а содержимое появляется только после выполнения скриптов. Nuxt по умолчанию формирует готовый HTML на сервере, и робот получает полный текст уже при первом запросе. Подробнее об этом принципе — в статье про рендеринг на стороне сервера.
Проверка: отключите JavaScript в браузере и откройте страницу. Если основной текст на месте, робот тоже его увидит.
Несуществующие адреса и код ответа
Для слага, которого нет в данных, обязательно выбрасывайте ошибку с кодом 404. Иначе приложение отрисует пустой шаблон со статусом 200, и получится мягкая 404, о которой рассказывает статья про поиск и исправление мягких ошибок.
if (!post) {
throw createError({ statusCode: 404, statusMessage: 'Not found' })
}Мета-теги и канонические адреса для каждого маршрута
В Nuxt заголовок, описание и канонический адрес задаются прямо внутри компонента страницы и подставляются на сервере. Настройте их формирование из данных записи, чтобы динамические страницы не получили одинаковые мета-теги и не превратились в дубли.
Статическая генерация как альтернатива серверному рендерингу
Если содержимое сайта меняется нечасто, Nuxt умеет заранее собрать готовые HTML-файлы для всех адресов. Такой сайт отдаётся мгновенно, не нагружает сервер и одинаково хорошо виден роботу. Для динамических адресов при сборке нужно указать список слагов, для которых создаются страницы.
- подходит для блогов, документации и каталогов с редкими обновлениями;
- требует пересборки при изменении данных;
- новые страницы можно подключать гибридным режимом генерации по требованию.
Карта сайта и robots.txt в проекте на Nuxt
Для проектов на Nuxt существуют готовые модули, формирующие sitemap.xml на основе маршрутов и данных. Подключив такой модуль, проверьте, что в карту не попадают служебные страницы и адреса с параметрами. Файл robots.txt при этом размещают в каталоге публичных файлов, и его корректность стоит перепроверять после каждого развёртывания.
Частые вопросы
Какой режим Vue Router выбрать для индексируемого сайта?
Режим истории, при котором адреса выглядят как обычные пути, а не содержат символ решётки; при этом сервер нужно настроить на отдачу приложения для всех внутренних путей.
Зачем нужен Nuxt, если есть Vue Router?
Nuxt добавляет серверный рендеринг и файловую маршрутизацию, благодаря чему робот получает готовый HTML, а не пустую оболочку приложения.
Как отдать код 404 для несуществующего слага в Nuxt?
Выбросить ошибку с кодом 404 при отсутствии записи, чтобы сервер вернул именно этот статус.
Готовый адрес можно собрать прямо сейчас: откройте генератор ЧПУ — он транслитерирует фразу по таблице Яндекса, уберёт служебные слова и покажет длину адреса.