Что такое карта сайта и почему она полезна для SEO?
Next.js набирает огромную популярность в веб-сообществе благодаря удобству для поисковых систем и простоте настройки. Хотя Next.js имеет множество полезных функций, вы можете сделать все возможное, создав карты сайта для своего веб-сайта и отправив их в различные поисковые системы. Погодите, а какие даже карты сайта?
Карта сайта - это файл, который содержит подробную информацию о страницах, видео и других файлах ресурсов на вашем веб-сайте и соответствующих отношениях между ними. Карты сайта помогают поисковым системам, таким как Google и Yahoo, лучше понимать взаимосвязь между вашими веб-страницами и, следовательно, обеспечивать их более правильную индексацию.
Вот как будет выглядеть пример sitemap.xml файла трехстраничного веб-сайта:
<?xml version="1.0" encoding="UTF-8"?>
<urlset xmlns="https://www.sitemaps.org/schemas/sitemap/0.9">
<url>
<loc>https://www.example.net/</loc>
<lastmod>2009-09-22</lastmod>
</url>
<url>
<loc>https://www.example.net/about</loc>
<lastmod>2009-09-22</lastmod>
</url>
<url>
<loc>https://www.example.net/blog</loc>
<lastmod>2009-09-22</lastmod>
</url>
</urlset>
Карта сайта может не понадобиться, если у вас небольшой веб-сайт или если страницы в вашем приложении хорошо связаны. Вы даже можете написать свой собственный статический XML-файл, если ваши веб-страницы не часто меняются. У Google есть исчерпывающее руководство, в котором подробно описывается, как лучше всего действовать в ваших личных целях.
Если вы все же решили создать карту сайта, а ваш сайт основан на Next.js, продолжайте читать!
Шаг 1. Настройка и структура проекта
Если у вас еще нет проекта Next.js, вы можете настроить стартер, следуя инструкциям в официальном учебнике Next.js.
Большинство веб-сайтов Next.js имеют статические и динамически сгенерированные страницы, находящиеся внутри каталога pages. Чтобы прочитать эти имена страниц, мы установим globby - пакет NPM, который может перемещаться по файловой системе и возвращать пути.
yarn add --dev globby
Это единственная внешняя зависимость, которая нам понадобится для нашего скрипта создания карты сайта.
Создание карты сайта состоит из двух частей. Давайте посмотрим на стандартную структуру проекта Next.js.
|- pages/ |- about.js # about page |- blog/ # blog folder |- index.js # default blog |- [id].js. # dynamically generated blog posts|- components/ |- MainComponent.jsx # Main component |- OtherComponents.jsx # Other component
Во-первых, нашему скрипту необходимо пройти по файловой системе и найти имена статических файлов (в данном случае about.js и два файла index.js). Во-вторых, нам нужно добавить все наши динамические страницы ([id] .js) в нашу карту сайта. В этом случае просмотр файловой системы не сработает, так как нам нужно будет знать все URL-адреса наших страниц. Мы займемся этим на шаге 3. Сначала мы создаем карту сайта для всех наших статических страниц.
Шаг 2. Написание скрипта, генерирующего карту сайта.
Когда у нас есть базовая настройка, мы можем написать небольшой скрипт для создания карты сайта. Я написал свой на utils/sitemap.js, но не стесняйтесь выбирать папку по вашему выбору! Следующий скрипт затем преобразует все наши статические файлы в путевые имена, а затем выгружает их в XML-файл, к которому можно будет получить доступ в нашем общедоступном каталоге по адресу public/sitemap.xml.
Я добавил несколько комментариев к сути, которые более подробно объясняют, что происходит.
Короче говоря, мы используем globby для получения путей из наших каталогов (игнорируя наши маршруты api и другие страницы, которые мы не хотим включать в нашу карту сайта). Затем мы сопоставляем их и генерируем запись в форме <url><loc></url> для каждого из них. Простой!
Шаг 3. Обновите файл next.config.js для запуска сценария во время сборки.
Теперь, когда мы написали наш первоначальный скрипт, нам нужно обновить конфигурацию нашего веб-пакета в нашем файле next.config.js, чтобы сгенерировать карту сайта во время сборки. Обязательно обновите путь к файлу в соответствии со структурой вашего проекта! Теперь, когда вы запустите yarn dev или npm run dev, вы должны получить sitemap.xml файл, созданный в вашей public/ папке.
module.exports = {
webpack: (config, { isServer }) => {
if (isServer) {
require('./src/utils/sitemap.js')
}
return config
}
};
Шаг 4. Обработка динамических страниц (или страниц, созданных с помощью внешнего API)
Одна из ключевых особенностей Next.js - это возможность создавать динамические страницы. Мы не учли эти динамические страницы в нашем исходном скрипте, но их довольно просто добавить. Реализация будет отличаться в зависимости от источника ярлыков, используемых для генерации URL-адресов ваших динамических страниц. Если ваши страницы получены из внешнего API или CMS (например, Contentful), вам нужно будет получить параметры [id] этих страниц, прежде чем вы сможете сгенерировать для них карту сайта.
Вы можете хранить их в базе данных, напрямую получать их из CMS или иметь список имен страниц в файле json, но идея остается той же: запросить этот список и сопоставить имена для формирования экземпляра <loc> в файле карты сайта. . Легкий!
В этом примере мы будем использовать внешний api. Отличный API для фиктивных данных доступен по адресу https://jsonplaceholder.typicode.com/. Мы будем запрашивать поддельные сообщения и использовать идентификаторы этих сообщений для создания наших страниц.
Окончательный код должен выглядеть примерно так, с пояснениями ниже.
Короче говоря, мы взяли список образцов сообщений из нашего внешнего источника и сопоставили их, чтобы сгенерировать соответствующие пути URL-адресов. Теперь, если вы запустите npm run dev или yarn dev, вы должны получить новый файл public/sitemap.xml, который будет содержать содержимое вашей карты сайта.
После того, как вы развернете свой веб-сайт, ваша карта сайта станет доступна по адресу https://YOUR_URL/sitemap.xml, и вы сможете использовать свою уникальную ссылку для отправки карты сайта в различные поисковые системы (например, в Search Console).
И это все, ребята! Нам удалось создать карту сайта как для наших статически написанных, так и для динамически генерируемых страниц! Теперь, когда вы добавляете новые страницы, статически написанные или динамически генерируемые, и запускается новая сборка, ваша карта сайта будет автоматически обновляться, и поисковые системы смогут эффективно сканировать их. Удачного кодирования!
