Метадані та SEO в Next.js

Next.js має вбудовану систему управління метаданими для SEO. Метадані можуть бути встановлені статично через об'єкт metadata або динамічно через функцію generateMetadata.

Статичні метадані

tsx

// app/layout.tsx
import type { Metadata } from 'next'

export const metadata: Metadata = {
  title: 'IT Lead',
  description: 'Платформа для підготовки до співбесід з фронтенду',
  keywords: ['frontend', 'interview', 'javascript', 'react']
}

Динамічні метадані

Для сторінок, де метадані залежать від даних, використовуйте generateMetadata:

tsx

// app/docs/[slug]/page.tsx
import type { Metadata } from 'next'
import { getDoc } from '@/lib/docs'

export async function generateMetadata({
  params
}: {
  params: { slug: string }
}): Promise<Metadata> {
  const doc = await getDoc(params.slug)

  return {
    title: doc.title,
    description: doc.description,
    keywords: doc.keywords,
    openGraph: {
      title: doc.title,
      description: doc.description,
      type: 'article'
    }
  }
}

Next.js усуває дублювання запитів: якщо generateMetadata та компонент сторінки викликають один і той же fetch, запит виконується лише один раз.

Open Graph та Twitter Cards

tsx

export const metadata: Metadata = {
  title: 'Проблеми співбесід з JavaScript',
  openGraph: {
    title: 'Проблеми співбесід з JavaScript',
    description: 'Розв’язуйте проблеми з реальних співбесід',
    url: 'https://itlead.org/problems',
    siteName: 'IT Lead',
    images: [
      {
        url: '/images/ITLeadBanner.png',
        width: 1200,
        height: 630
      }
    ],
    locale: 'en_US',
    type: 'website'
  },
  twitter: {
    card: 'summary_large_image',
    title: 'Проблеми співбесід з JavaScript',
    description: 'Розв’язуйте проблеми з реальних співбесід',
    images: ['/images/ITLeadBanner.png']
  }
}

Шаблони заголовків

Щоб додати суфікс або префікс до заголовків дочірніх сторінок:

tsx

// app/layout.tsx
export const metadata: Metadata = {
  title: {
    template: '%s | IT Lead',
    default: 'IT Lead'
  }
}

// app/docs/page.tsx
export const metadata: Metadata = {
  title: 'База знань'
}
// Результат: "База знань | IT Lead"

Sitemap

Next.js може автоматично генерувати файл sitemap:

tsx

// app/sitemap.ts
import { MetadataRoute } from 'next'

export default function sitemap(): MetadataRoute.Sitemap {
  const docs = getAllDocs()

  return [
    { url: 'https://itlead.org', lastModified: new Date() },
    { url: 'https://itlead.org/problems', lastModified: new Date() },
    ...docs.map(doc => ({
      url: `https://itlead.org/docs/${doc.slug}`,
      lastModified: doc.updatedAt
    }))
  ]
}

robots.txt

tsx

// app/robots.ts
import { MetadataRoute } from 'next'

export default function robots(): MetadataRoute.Robots {
  return {
    rules: {
      userAgent: '*',
      allow: '/',
      disallow: ['/api/', '/auth/']
    },
    sitemap: 'https://itlead.org/sitemap.xml'
  }
}

Структуровані дані (JSON-LD)

Для багатих фрагментів у результатах пошуку:

tsx

// app/docs/[slug]/page.tsx
export default async function DocPage({ params }) {
  const doc = await getDoc(params.slug)

  const jsonLd = {
    '@context': 'https://schema.org',
    '@type': 'Article',
    headline: doc.title,
    description: doc.description,
    author: { '@type': 'Organization', name: 'IT Lead' }
  }

  return (
    <>
      <script
        type="application/ld+json"
        dangerouslySetInnerHTML={{ __html: JSON.stringify(jsonLd) }}
      />
      <article>{doc.content}</article>
    </>
  )
}

Порада для співбесід:

Метадані успадковуються від батьківських сегментів до дочірніх і об'єднуються. Дочірній сегмент може переоприділити будь-яке поле з батьківського.

Корисні ресурси

nextjs.org/docs — Метадані
API generateMetadata

Суміжні теми

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

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

Premium

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

Дочитали статтю?

Практика завдань