Skip to main content

Що таке static metadata?

Static metadata у Next.js - це метадані, які відомі заздалегідь і не залежать від запиту, параметрів маршруту чи даних користувача. Вони описуються один раз і використовуються при кожному рендері сторінки чи layout'а.

Простіше кажучи:

static metadata - це фіксований SEO-опис сторінки чи розділу.


Як задається static metadata

Static metadata оголошується через експорт об'єкта metadata:

ts
export const metadata = { title: 'Про компанію', description: 'Інформація про нашу компанію' }

Next.js автоматично перетворює це на:

  • <title>
  • <meta name="description">
  • та інші потрібні теги

Без ручної роботи з <head>.


Де можна використовувати static metadata

Static metadata можна задавати в:

  • page.tsx
  • layout.tsx
  • вкладених layout'ах
  • route groups

Метадані успадковуються згори вниз.


Коли використовувати static metadata

Static metadata підходить, коли:

  • контент сторінки не змінюється
  • URL завжди описує одне й те саме
  • не потрібні параметри (params)
  • не важливі cookies, headers, авторизація

Приклади:

  • головна сторінка
  • сторінка «Про нас»
  • лендинги
  • документація
  • розділи сайту

Що можна описати

Через static metadata можна задати:

  • title
  • description
  • keywords
  • robots
  • icons
  • Open Graph
  • Twitter Cards
  • alternates (canonical, hreflang)

Все в одному об'єкті.


Зв'язок із продуктивністю

Static metadata:

  • не потребує виконання коду
  • не робить запитів
  • може бути оброблена на етапі білда

Це:

  • швидше
  • передбачуваніше
  • ідеально для SEO

Відмінність від dynamic metadata

Static metadataDynamic metadata
Об'єкт metadataФункція generateMetadata
Не залежить від данихЗалежить від params, fetch
ФіксованаОбчислюється щоразу
ШвидшеТрохи важче
Підходить для статичних сторінокДля динамічних маршрутів

Підсумок

Static metadata - це:

  • заздалегідь відомі метадані
  • простий і декларативний підхід
  • найкращий варіант для статичних сторінок
  • швидкий і безпечний спосіб SEO-налаштувань

Коротка відповідь

Для співбесіди
Premium

Коротка відповідь допоможе вам впевнено відповідати на цю тему під час співбесіди.