Если вы создаете веб-сайт с помощью Next.js, вы, вероятно, хотите, чтобы поисковые системы эффективно обнаруживали и индексировали ваши страницы. Один из способов улучшить этот процесс — создать карту сайта. Карта сайта — это файл, в котором перечислены все URL-адреса вашего веб-сайта, что помогает поисковым системам, таким как Google, быстрее сканировать и индексировать ваш сайт.

В этом руководстве мы расскажем, как установить и настроить next-sitemap в проекте Next.js. Мы также расскажем о преимуществах карты сайта и добавим пример кода в приложение Next.js «Hello World», чтобы проиллюстрировать, как оно работает.

Преимущества использования карты следующего сайта

Прежде чем мы углубимся в процесс установки, давайте кратко обсудим ключевые преимущества использования next-sitemap:

1. Улучшение SEO: хорошо структурированная карта сайта помогает поисковым системам, таким как Google, более эффективно находить ваши страницы, что приводит к лучшей индексации и потенциально более высокому рейтингу в поисковых системах.

2. Более быстрое сканирование: предоставляя поисковым системам схему вашего веб-сайта, вы позволяете им быстрее сканировать и индексировать ваши страницы.

3. Обработка динамических маршрутов: для веб-сайтов с динамическими маршрутами следующая карта сайта позволяет легко генерировать URL-адреса для динамического контента, гарантируя, что все ваши страницы будут доступны для обнаружения.

4. Пользовательские файлы Sitemap: next-sitemap позволяет настраивать файлы Sitemap с такими параметрами, как установка приоритета, частота изменения и даже исключение определенных страниц.

Шаг 1. Установите следующую карту сайта.

Чтобы начать работу, вам необходимо установить пакет next-sitemap в проект Next.js. Запустите следующую команду в своем терминале:

npm install next-sitemap

Или, если вы используете Yarn:

yarn add next-sitemap

Шаг 2. Создайте файл конфигурации next-sitemap.js.

После установки пакета следующим шагом будет создание файла конфигурации с именем next-sitemap.config.js в корне вашего проекта. Этот файл будет содержать настройки для создания карты сайта.

Вот базовая конфигурация:

// next-sitemap.config.js
module.exports = {
  siteUrl: process.env.SITE_URL || 'http://localhost:3000', // Your website's URL
  generateRobotsTxt: true, // (Optional) Generates a robots.txt file
  sitemapSize: 7000, // Number of URLs per sitemap file
}

В приведенном выше коде мы указываем базовый URL-адрес вашего сайта с помощью siteUrl. Параметр генерироватьRobotsTxt создает файл robots.txt вместе с картой сайта, а sitemapSize определяет количество URL-адресов, которые необходимо включить в каждый файл карты сайта.

Шаг 3. Обновите package.json с помощью скрипта Sitemap.

Теперь вам нужно будет добавить скрипт в файл package.json для создания карты сайта при каждой сборке проекта.

Вот как это сделать:

{
  "scripts": {
    "build": "next build",
    "postbuild": "next-sitemap"
  }
}

Это обеспечит автоматическое создание карты сайта после каждой сборки на основе вашей конфигурации.

Шаг 4. Создайте и сгенерируйте карту сайта.

Теперь, когда все настроено, выполните следующую команду, чтобы создать проект и сгенерировать карту сайта:

npm run build

Или с помощью Yarn:

yarn build

После завершения сборки в папке public/ вашего проекта будет создан файл sitemap.xml (и, при необходимости, файл robots.txt). Эти файлы будут содержать все URL-адреса вашего приложения Next.js, готовые к сканированию поисковыми системами.

Пример: приложение Next.js «Hello World» со следующей картой сайта.

Чтобы продемонстрировать, как работает next-sitemap, давайте создадим простое приложение Next.js «Hello World». Вот базовая страница Next.js:

// pages/index.js
export default function Home() {
  return (
    

      
Hello World
      
Welcome to my Next.js app!
    
  );
}

Теперь настройте файл next-sitemap.config.js следующим образом:

// next-sitemap.config.js
module.exports = {
  siteUrl: process.env.SITE_URL || 'http://localhost:3000',
  generateRobotsTxt: true,
};

Затем добавьте в package.json следующее:

{
  "scripts": {
    "build": "next build",
    "postbuild": "next-sitemap"
  }
}

После запуска сборки npm run вы найдете карту сайта в каталоге public/, содержащую URL-адрес вашей домашней страницы «Hello World».

Живая демонстрация

Мой сайт https://rajeshkumaryadav.com использует этот пакет для автоматического создания карты сайта в процессе сборки. Ниже приведен файл robot.txt, содержащий sitemap.xml

https://rajeshkumaryadav.com/robots.txt
https://www.rajeshkumaryadav.com/sitemap.xml
https://www.rajeshkumaryadav.com/sitemap-0.xml

Заключение

Следуя шагам, описанным в этом руководстве, вы теперь интегрировали next-sitemap в свой проект Next.js. Этот инструмент предоставляет простой способ создания карты сайта и файла robots.txt, который может значительно улучшить SEO вашего веб-сайта и гарантировать, что поисковые системы смогут эффективно обнаруживать весь ваш контент.

Благодаря этой настройке вы уже на пути к тому, чтобы сделать ваше приложение Next.js более удобным для поисковых систем и лучше индексируемым!