Удаление слэша в конце URL и создание 301 редиректа в Nuxt 3

Как и обещал в предыдущей статье, начинаю публиковать серию небольших заметок по настройке Nuxt. Начну с удаления завершающего слэша в конце URL страницы.

Зачем удалять слэш?#

Для SEO (оптимизации поисковой выдачи) нет разницы имеет страница завершающий слэш или нет. Есть только одно правило: на сайте все страницы должны быть единообразны. Т.е. или есть слэш везде, или его нет. Наличие обоих вариантов приводит к появлению страниц дубликатов в поисковой выдаче. Для Google и Yandex страница со слэшем и без — это две разные страницы.

На предыдущем движке Eleventy по умолчанию завершающие слэши были включены. Мне лично нравятся ссылки без слэша в конце. Тогда я этим не заморачивался, а сейчас решил сделать так, как мне нравится.

Варианты решения#

Для Nuxt 2 существует отдельная настройка роутера trailingSlash, для контроля завершающего слэша. В Nuxt 3 её выпилили. Поэтому найдём другое решение.

Сначала я попробовал сделать это через настройки хостинга Netlify. Не нашёл простого решения. Есть опция, которая отбрасывает завершающий слэш, но она не отдаёт код редиректа 301 (ресурс перемещен на новый адрес), что мне не подходит. Код 301 крайне важен для SEO и поисковых движков — он уменьшает количество дубликатов страницы в поисковом индексе.

В интерфейсе Netlify эта опция находится здесь:

Build and Deploy → Post processing → Pretty Urls → Enable

Через файл с редиректами Netlify сделать это не получилось. Поэтому напишем свой middleware для Nuxt.

Пишем свой middleware#

Для начала, что такое middleware?

Middleware — это функция, которая может быть запущена перед рендерингом страницы. В универсальном режиме рендеринга middleware будет вызываться один раз на стороне сервера (при первом запросе к приложению Nuxt) и на стороне клиента при переходе к дальнейшим маршрутам.

Создаём файл @/middleware/trailing-slash.global.ts и пишем в него следующее:

export default defineNuxtRouteMiddleware(({ path, query, hash }) => {
  if (path === '/' || !path.endsWith('/')) return

  const nextPath: string = path.replace(/\/+$/, '') || '/'
  const nextRoute = { path: nextPath, query, hash }

  return navigateTo(nextRoute, { redirectCode: 301 })
})

В этом коде если страница главная, или URL не содержит завершающего слэша, функция останавливается. Если содержит, делается редирект на URL без слэша и отдаётся код 301.

Вот в принципе и всё. Довольно простая настройка, которая улучшит показатели SEO для вашего сайта на Nuxt 3.

Ссылки:

• Middleware в Nuxt 3
• Редиректы и Google поиск