Метаданные для публикации в NextJS

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

Когда пользователь делится адресом в чате или ленте, площадка подтягивает карточку предпросмотра: заголовок, краткий текст и изображение. Эти поля не дублируют обычный тайтл один в один - для карточки задают отдельный набор с полным URL страницы, именем сайта и картинкой с размерами. В NextJS такой набор описывают в объекте метаданных, фреймворк сам сформирует нужные теги в теге head.

Значок во вкладке - мелочь, но без него сайт теряется среди открытых страниц. Достаточно положить файл иконки в каталог приложения: NextJS обнаружит его и отдаст браузеру без ручной разметки тега link с rel icon.

Поисковым системам помогает карта сайта - перечень адресов с датой изменения, частотой обновления и приоритетом. Ее отдают по стандартному пути в формате XML; в App Router карту описывают отдельным файлом в app, а генерацию XML берет на себя фреймворк.

Файл robots сообщает роботам, какие пути можно индексировать, а какие лучше не трогать, и указывает, где лежит карта сайта. Так вы не смешиваете закрытые разделы с публичными и не заставляете краулер искать sitemap наугад.

Все перечисленное дополняет уже знакомые тайтл и описание и готовит проект к реальному трафику из поиска и из мессенджеров.