Справочник по IT

Русский

Українська
English

Русский

Українська
English

Appearance

Модуль @nuxtjs/sitemap в Nuxt ​

Модуль @nuxtjs/sitemap автоматически генерирует файл sitemap.xml для вашего Nuxt приложения. Sitemap помогает поисковым системам, таким как Google, Bing и другие, лучше индексировать ваш сайт, сообщая им о всех доступных страницах.

Установка ​

Для начала установите модуль @nuxtjs/sitemap:

bash
npm install --save-dev @nuxtjs/sitemap
# или
yarn add -D @nuxtjs/sitemap

Затем добавьте @nuxtjs/sitemap в секцию modules вашего файла nuxt.config.js:

javascript
export default {
  modules: [
    '@nuxtjs/sitemap'
  ],
  sitemap: {
    // Настройки модуля (см. ниже)
  }
  // ... другие настройки
}

Настройка (nuxt.config.js) ​

Модуль @nuxtjs/sitemap имеет множество опций конфигурации, которые позволяют настроить генерацию файла sitemap.xml под ваши нужды. Некоторые из основных опций включают:

javascript
export default {
  modules: [
    '@nuxtjs/sitemap'
  ],
  sitemap: {
    hostname: '[https://yourdomain.com](https://yourdomain.com)', // Обязательно: URL вашего сайта
    gzip: false,                         // Сжимать sitemap.xml в sitemap.xml.gz (рекомендуется)
    cacheTime: 600000,                   // Время кэширования sitemap.xml в миллисекундах (по умолчанию: 600000 - 10 минут)
    exclude: [                          // Массив исключенных маршрутов (например, динамические админ-панели)
      '/admin/**',
      '/secret'
    ],
    routes: async () => {                // Функция для динамического генерации маршрутов
      const { $axios } = useNuxtApp();
      const { data: posts } = await $axios.$get('/api/posts');
      return posts.map(post => ({
        url: `/blog/${post.slug}`,
        lastmod: post.updatedAt // необязательно
      }));
    },
    defaults: {                         // Настройки по умолчанию для всех маршрутов
      changefreq: 'daily',
      priority: 0.8
    },
    // ... другие опции
  }
  // ... другие настройки
}

Основные опции:

  • hostname (обязательно): Полный URL вашего сайта (например, https://yourdomain.com). Этот URL используется для формирования абсолютных ссылок в файле sitemap.xml.
  • gzip: Определяет, нужно ли сжимать файл sitemap.xml в sitemap.xml.gz. Сжатие уменьшает размер файла и может ускорить его загрузку поисковыми системами. Рекомендуется установить в true для production.
  • cacheTime: Время в миллисекундах, в течение которого сгенерированный файл sitemap.xml будет кэшироваться. При следующем запросе (например, от поискового бота) будет отдан кэшированный файл, если время кэша не истекло.
  • exclude: Массив строк с регулярными выражениями или точными путями, которые нужно исключить из файла sitemap.xml.
  • routes: Может быть массивом строк (статических маршрутов) или асинхронной функцией, которая возвращает массив объектов с информацией о маршрутах. Эта функция полезна для динамической генерации маршрутов (например, на основе данных из API или CMS).
    • Каждый объект в массиве routes может иметь следующие свойства:
      • url (обязательно): URL маршрута (относительно hostname, например, /about).
      • lastmod (необязательно): Дата последнего изменения страницы в формате YYYY-MM-DD или YYYY-MM-DDTHH:mm:ss+TZD.
      • changefreq (необязательно): Вероятная частота изменения страницы (always, hourly, daily, weekly, monthly, yearly, never).
      • priority (необязательно): Приоритет URL относительно других URL на сайте (значение от 0.0 до 1.0).
      • alternates (необязательно): Массив объектов с альтернативными языковыми версиями страницы (например, [{ href: 'https://yourdomain.com/en/about', hreflang: 'en' }]).
  • defaults: Объект с настройками по умолчанию (changefreq, priority), которые будут применяться ко всем маршрутам, если они не указаны в опции routes.
  • path: Путь, по которому будет сгенерирован файл sitemap.xml (по умолчанию: /sitemap.xml).
  • trailingSlash: Определяет, нужно ли добавлять завершающий слеш к URL-адресам в файле sitemap.xml (по умолчанию: false). Рекомендуется согласовать это с настройками вашего сайта.
  • i18n: Объект конфигурации для интеграции с модулем @nuxtjs/i18n (для многоязычных сайтов).

Динамическая генерация маршрутов ​

Функция routes позволяет вам динамически генерировать маршруты на основе данных из вашего приложения. Внутри этой функции вы можете использовать $axios (если установлен модуль @nuxtjs/axios), другие API-клиенты или любые другие способы получения данных.

Пример динамической генерации маршрутов для блога:

javascript
export default {
  modules: [
    '@nuxtjs/sitemap'
  ],
  sitemap: {
    hostname: '[https://myblog.com](https://myblog.com)',
    routes: async () => {
      const { $axios } = useNuxtApp();
      const { data: posts } = await $axios.$get('/api/posts');
      return posts.map(post => ({
        url: `/posts/${post.slug}`,
        lastmod: post.updated_at,
        changefreq: 'weekly',
        priority: 0.7
      }));
    }
  }
  // ... другие настройки
}

Интеграция с @nuxtjs/i18n (для многоязычных сайтов) ​

Если вы используете модуль @nuxtjs/i18n для поддержки нескольких языков, @nuxtjs/sitemap может автоматически генерировать альтернативные языковые версии страниц в вашем sitemap.xml.

Пример конфигурации с @nuxtjs/i18n:

javascript
export default {
  modules: [
    '@nuxtjs/i18n',
    '@nuxtjs/sitemap'
  ],
  i18n: {
    locales: ['en', 'fr'],
    defaultLocale: 'en',
    // ... другие настройки i18n
  },
  sitemap: {
    hostname: '[https://mywebsite.com](https://mywebsite.com)',
    i18n: true, // Включить интеграцию с i18n
    routes: [
      '/about',
      '/contact'
    ],
    routes: async () => {
      const { $i18n } = useNuxtApp();
      const posts = await fetchPostsFromApi(); // Ваша функция для получения постов
      return posts.map(post => ({
        url: `/blog/${post.slug}`,
        lastmod: post.updated_at,
        alternates: $i18n.locales.map(locale => ({
          href: `/${locale}/blog/${post.slug}`,
          hreflang: locale
        }))
      }));
    }
  }
  // ... другие настройки
}

При i18n: true, модуль @nuxtjs/sitemap автоматически добавит альтернативные языковые версии для ваших маршрутов на основе конфигурации @nuxtjs/i18n. Вы также можете вручную определить alternates в функции routes для более сложной логики.

Доступ к сгенерированному файлу ​

После сборки вашего Nuxt приложения (с помощью npm run build или yarn build), файл sitemap.xml (или sitemap.xml.gz, если включено сжатие) будет находиться в корневом каталоге dist/ вашего проекта.

Отправка Sitemap в поисковые системы ​

После развертывания вашего сайта вам необходимо сообщить поисковым системам о местонахождении файла sitemap.xml. Это обычно делается через инструменты для веб-мастеров (например, Google Search Console, Bing Webmaster Tools).

Заключение ​

Модуль @nuxtjs/sitemap значительно упрощает процесс создания и управления файлом sitemap.xml в вашем Nuxt приложении. Благодаря гибким настройкам и возможности динамической генерации маршрутов, вы можете легко обеспечить правильную индексацию вашего сайта поисковыми системами, что является важным фактором для SEO.