Повысьте свой SEO с помощью этой простой функции
Зачем мне нужен XML-файл Sitemap?
Давайте посмотрим правде в глаза. Для большинства веб-разработчиков SEO сбивает с толку магию. У нас есть цель - заставить поисковые системы повышать рейтинг наших страниц. Но мы действительно не знаем, как туда добраться. Мы настаиваем на использовании статических или серверных приложений, потому что читали статьи, в которых говорится, что они лучше подходят для SEO. Но еще и потому, что нам нравится использовать новейшие и лучшие технологии.
Карты сайта в формате XML упрощают поисковым системам поиск наших страниц. Это важно, потому что ранжируются страницы, а не сайты. У использования файлов Sitemap есть только положительные стороны, поэтому я настоятельно рекомендую вам использовать их для своих веб-сайтов.
Как выглядит карта сайта?
Карты сайта содержатся в тегах urlset. Они содержат по одной записи url для каждого URL с обязательным тегом loc, который содержит URL ваших страниц. Вы также можете использовать необязательные теги lastmod, changefreq и priority, чтобы предоставить поисковой системе дополнительную информацию о ваших страницах.
В приведенном ниже примере показана карта сайта для одностраничного веб-сайта.
Создание динамической карты сайта
В этом упражнении мы создадим карту сайта для нашего приложения Next.JS. Чтобы облегчить начало работы, мы будем использовать next learn starter, пример приложения от Vercel. Это приложение представляет собой простой блог со следующей структурой.
/главная страница сайта со списком сообщений/posts/[id]отдельное сообщение.
Пример приложения размещен здесь. Перемещаясь с помощью нашего браузера, мы можем определить форму карты нашего сайта.
Как только мы начнем писать десятки или сотни сообщений, поддержка нашей карты сайта вручную больше не является вариантом. Так что давайте делать это динамически. Этот подход будет работать с любым приложением NextJS, независимо от того, как вы загружаете свои данные. Независимо от того, используете ли вы безголовую CMS, например, содержательную, или сохраняете свои сообщения в разметке, вы можете использовать этот подход.
Начиная
Начнем с клонирования next-learn-starter из его репозитория на Github.
git clone https://github.com/vercel/next-learn-starter.git
Затем мы можем открыть его в нашем любимом текстовом редакторе и посмотреть. В этом упражнении мы будем использовать пример приложения внутри папки demo. Таким образом, мы можем запустить yarn внутри папки demo и запустить yarn dev, чтобы запустить приложение в нашем браузере.
Во-первых, нам нужно определить, какие страницы отображает наше приложение. Как и все приложения NextJS, мы можем найти их, заглянув в папку pages. Внутри этой папки мы можем найти два файла, которые отображают все наши страницы: pages/index.js и pages/posts/[id].js.
Мы знаем, что pages/index.js отобразит нашу домашнюю страницу. Тогда мы можем взглянуть на pages/posts/[id].js. Мы хотим выяснить, как мы получаем сообщения и какой формы они будут. Мы ищем функцию с именем getStaticPaths.
Обратите внимание на строку paths = getAllPostIds(). Давайте разберемся, откуда это взялось.
Здесь мы видим, что эта функция возвращает массив следующей формы:
По сути, каждый файл внутри каталога posts станет постом в нашем приложении.
Динамическое создание карты нашего сайта
Мы можем начать с создания функции, которая будет генерировать нашу карту сайта. Мы используем внешнюю зависимость globby, чтобы получить список всех маршрутов нашего веб-сайта. Заглядываем внутрь папки pages и папки posts. Это даст нам список всех маршрутов нашего веб-сайта, а затем мы создадим карту нашего сайта и запишем ее в наш public каталог.
Далее нам просто нужно использовать эту функцию внутри нашего next.config.js. Сначала создайте файл с именем next.config.js в корне нашего приложения. Затем нам просто нужна наша функция внутри определенной там конфигурации webpack.
Теперь, когда мы запускаем наше приложение с yarn dev или yarn build, мы видим, что наш sitemap.xml был создан в общей папке.
Вот и все! Теперь у нашего приложения NextJS есть динамическая карта сайта. Каждый раз, когда мы добавляем новый пост в нашу папку posts, он будет добавляться в нашу карту сайта. Это улучшит SEO нашего сайта и поможет пользователям найти наше приложение. Если у вас возникли проблемы с настройкой, не стесняйтесь проверить готовый репозиторий здесь.
