Добавляем robots.txt в Next.js приложение

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

Robots.txt - это текстовый файл, основанный на спецификации Robots Exclusion Protocol, который сообщает поисковым роботам (например Googlebot или Yandex), какие страницы они могут сканировать, а какие нет.

А так же указывает на файл sitemap.xml. О том что это такое и как добавить файл sitemap.xml читайте в статье «Добавляем sitemap.xml в Next.js приложение».

Robots.txt должен находиться в корневой папке вашего сайта, и обычно доступен по адресу:

домен.зона/robots.txt

Например, у этого блога он лежит по адресу https://baranov.guru/robots.txt и выглядит следующим образом:

# *
User-agent: *
Allow: /

# Host
Host: https://baranov.guru/

# Sitemap
Sitemap: https://baranov.guru/sitemap.xml

Более подробную информацию о том как как поисковые системы обрабатывают файлы robots.txt можно найти в справке от Яндекса или документации Google.

Первый способ - очень простой. Next.js из коробки умеет отдавать статические файлы, например изображения, добавленные в папку public в корне проекта.

Этот же подход можно использовать для добавления файла robots.txt. Всё что необходимо сделать - добавить файл в папку public.

Подробнее про работу со статикой и папку public можно почитать в официальной документации Next.js.

Начиная с версии 13.3 Next.js умеет корректно обрабатывать статический файл robots.txt лежащий в корне папки app.

Подробнее в документации.

Для того чтобы динамически создавать файл robots.txt необходимо в папку app добавить файл robots.js или robots.ts, который будет возвращать объект типа MetadataRoute.Robots.

import type { MetadataRoute } from "next";

export default function robots(): MetadataRoute.Robots {
  return {
    rules: {
      userAgent: "*",
      allow: "/",
      disallow: "/private/",
    },
    sitemap: "https://baranov.guru/sitemap.xml",
    host: "https://baranov.guru/",
  };
}

Данный код сгенерирует файл со следующим содержимым:

User-Agent: *
Allow: /
Disallow: /private/

Host: https://baranov.guru/
Sitemap: https://baranov.guru/sitemap.xml

Так же есть возможность добавлять правила для различных user-agent.

import type { MetadataRoute } from "next";

export default function robots(): MetadataRoute.Robots {
  return {
    rules: [
      {
        userAgent: "Googlebot",
        allow: ["/"],
        disallow: "/private/",
      },
      {
        userAgent: ["Yandex", "Bingbot"],
        disallow: ["/"],
      },
    ],
    sitemap: "https://baranov.guru/sitemap.xml",
  };
}

На выходе получим следующий файл:

User-Agent: Googlebot
Allow: /
Disallow: /private/

User-Agent: Yandex
User-Agent: Bingbot
Disallow: /

Sitemap: https://baranov.guru/sitemap.xml

Вот полная спецификация MetadataRoute.Robots, взятая из официальной документации.

type Robots = {
  rules:
    | {
        userAgent?: string | string[];
        allow?: string | string[];
        disallow?: string | string[];
        crawlDelay?: number;
      }
    | Array<{
        userAgent: string | string[];
        allow?: string | string[];
        disallow?: string | string[];
        crawlDelay?: number;
      }>;
  sitemap?: string | string[];
  host?: string;
};

К сожалению, динамическая генерация не поддерживает добавление кастомных директив в правила. Самым ярким примером кастомной директивы можно считать директиву Clean-Param, поддерживаемую Яндексом.

Для того чтобы её добавить придётся воспользовать либо первым способом (статический файл) либо каким-нибудь сторонним решением, например npm-пакетом next-sitemap.

Для того чтобы удостовериться что содержимое robots.txt валидно и будет работать как и задумано, можно воспользоваться несколькими бесплатными инструментами:

• Валидатор от Google;
• Валидатор от Yandex;

На этом всё! 🎉