Как подключить Яндекс Вебмастер в Next.js

Существует три стандартных способа подключения Яндекс Вебмастер к сайту, который сделан с помощью NextJS. Верификацию можно пройти с помощью:

HTML-файла
Метатега, который нужно добавить в head
DNS-записи

Подключение с помощью метатега

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

Для подключения через метатег нам нужно добавить в код главной страницы сайта (в раздел head) метатег: <meta name="yandex-verification" content="XXXXXXXXXXXXXXXX" />, который мы получили на странице подтверждения прав в вебмастере.

Ну и где тут искать head?

В NextJS нам нужно отправиться в layout.tsx или page.tsx и создать The metadata object с кастомными параметрами, если его еще нет. Метаданные будут сгенерированы на основании настроек в этом объекте.

layout.tsx | page.tsx

export const metadata = {
  other: {
    ['yandex-verification']: 'XXXXXXXXXXXXXXXX',
  },
}

Вместо XXXXXXXXXXXXXXXX вставляете свой код из Яндекс Вебмастера.

<head> output

<meta name="yandex-verification" content="XXXXXXXXXXXXXXXX" />

Таким образом вы можете подключать любые кастомные метатеги в NextJS.

Остались вопросы? Кто понял — тот понял, а кто не понял — тот идет в документацию Metadata Object and generateMetadata Options