XML-карты сайта

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

Хотя XML-карты сайта являются наиболее известными и распространёнными, их также можно создавать через RSS или Atom, или даже через текстовые файлы, если вам нужна максимальная простота.

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

Согласно Google:

Карта сайта может понадобиться, если:

• Ваш сайт очень большой. В этом случае веб-краулеры Google могут пропустить некоторые новые или недавно обновлённые страницы.
• На вашем сайте есть большой архив страниц с контентом, которые изолированы или плохо связаны между собой. Если страницы вашего сайта не ссылаются друг на друга естественным образом, вы можете перечислить их в карте сайта, чтобы Google не пропустил некоторые из них.
• Ваш сайт новый и имеет мало внешних ссылок. Googlebot и другие веб-краулеры перемещаются по сети, переходя по ссылкам со страницы на страницу. В результате Google может не обнаружить ваши страницы, если на них нет ссылок с других сайтов.
• На вашем сайте много мультимедийного контента (видео, изображения) или он отображается в Google News. Если карта сайта предоставлена, Google может учитывать дополнительную информацию из неё при поиске, где это уместно.

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

Настоятельно рекомендуется использовать карты сайта и делать их динамическими по мере добавления нового контента на ваш сайт. Статические карты сайта также допустимы, но они могут быть менее полезны для Google, так как не служат для постоянного обнаружения контента.

Как добавить карту сайта в проект Next.js

Есть два варианта:

Вручную: Если у вас относительно простой и статичный сайт, вы можете вручную создать файл sitemap.xml в директории public вашего проекта:

   <!-- public/sitemap.xml -->
   <xml version="1.0" encoding="UTF-8">
   <urlset xmlns="http://www.sitemaps.org/schemas/sitemap/0.9">
     <url>
       <loc>http://www.example.com/foo</loc>
       <lastmod>2021-06-01</lastmod>
     </url>
   </urlset>
   </xml>

Динамически: Если ваш сайт динамический, вы можете использовать getServerSideProps для генерации XML-карты сайта по запросу.

Мы можем создать новую страницу в директории pages, например pages/sitemap.xml.js. Цель этой страницы — обратиться к нашему API для получения данных, которые позволят нам узнать URL-адреса наших динамических страниц. Затем мы запишем XML-файл в качестве ответа для /sitemap.xml.

Вот пример, который вы можете попробовать:

//pages/sitemap.xml.js
const EXTERNAL_DATA_URL = 'https://jsonplaceholder.typicode.com/posts';
 
function generateSiteMap(posts) {
  return `<?xml version="1.0" encoding="UTF-8"?>
   <urlset xmlns="http://www.sitemaps.org/schemas/sitemap/0.9">
     <!--Вручную добавляем два известных URL-->
     <url>
       <loc>https://jsonplaceholder.typicode.com</loc>
     </url>
     <url>
       <loc>https://jsonplaceholder.typicode.com/guide</loc>
     </url>
     ${posts
       .map(({ id }) => {
         return `
       <url>
           <loc>${`${EXTERNAL_DATA_URL}/${id}`}</loc>
       </url>
     `;
       })
       .join('')}
   </urlset>
 `;
}
 
function SiteMap() {
  // getServerSideProps выполнит основную работу
}
 
export async function getServerSideProps({ res }) {
  // Делаем API-запрос для сбора URL-адресов нашего сайта
  const request = await fetch(EXTERNAL_DATA_URL);
  const posts = await request.json();
 
  // Генерируем XML-карту сайта с данными о постах
  const sitemap = generateSiteMap(posts);
 
  res.setHeader('Content-Type', 'text/xml');
  // Отправляем XML в браузер
  res.write(sitemap);
  res.end();
 
  return {
    props: {},
  };
}
 
export default SiteMap;

Дополнительные материалы

• Google: Узнайте о картах сайта
• Google: Обзор тем сканирования и индексации