SEO для статей та навчальних сторінок

import type { Metadata } from 'next';

export const metadata: Metadata = {
  title: 'Як працює кешування в Next.js',
  description:
    'Пояснення принципів кешування в Next.js та приклади використання на практиці.',
  alternates: {
    canonical: 'https://example.com/articles/nextjs-caching',
  },
};

type Article = {
  slug: string;
  title: string;
  excerpt: string;
  content: string[];
  author: string;
  publishedAt: string;
  updatedAt?: string;
  coverUrl?: string;
};

import type { Metadata } from 'next';
import { notFound } from 'next/navigation';

type Article = {
  slug: string;
  title: string;
  excerpt: string;
  content: string[];
  author: string;
  publishedAt: string;
  updatedAt?: string;
  coverUrl?: string;
};

const articles: Article[] = [
  {
    slug: 'nextjs-caching',
    title: 'Як працює кешування в Next.js',
    excerpt:
      'Пояснення принципів кешування в Next.js та приклади використання на практиці.',
    content: [
      'Кешування допомагає зменшити кількість повторних обчислень і запитів.',
      'У Next.js стратегію кешування потрібно обирати відповідно до типу даних.',
    ],
    author: 'Олена Коваль',
    publishedAt: '2026-01-15',
    updatedAt: '2026-02-01',
    coverUrl: 'https://example.com/images/nextjs-caching.jpg',
  },
];

function getArticle(slug: string) {
  return articles.find((article) => article.slug === slug);
}

type PageProps = {
  params: Promise<{ slug: string }>;
};

export async function generateMetadata({
  params,
}: PageProps): Promise<Metadata> {
  const { slug } = await params;
  const article = getArticle(slug);

  if (!article) {
    return {
      title: 'Статтю не знайдено',
      robots: {
        index: false,
        follow: false,
      },
    };
  }

  const url = `https://example.com/articles/${article.slug}`;

  return {
    title: article.title,
    description: article.excerpt,
    alternates: {
      canonical: url,
    },
    openGraph: {
      type: 'article',
      url,
      title: article.title,
      description: article.excerpt,
      publishedTime: article.publishedAt,
      modifiedTime: article.updatedAt,
      authors: [article.author],
      images: article.coverUrl
        ? [
            {
              url: article.coverUrl,
              alt: article.title,
            },
          ]
        : undefined,
    },
    twitter: {
      card: 'summary_large_image',
      title: article.title,
      description: article.excerpt,
      images: article.coverUrl ? [article.coverUrl] : undefined,
    },
  };
}

export default async function ArticlePage({ params }: PageProps) {
  const { slug } = await params;
  const article = getArticle(slug);

  if (!article) {
    notFound();
  }

  const url = `https://example.com/articles/${article.slug}`;

  const structuredData = {
    '@context': 'https://schema.org',
    '@type': 'Article',
    headline: article.title,
    description: article.excerpt,
    url,
    datePublished: article.publishedAt,
    ...(article.updatedAt && { dateModified: article.updatedAt }),
    author: {
      '@type': 'Person',
      name: article.author,
    },
    ...(article.coverUrl && { image: [article.coverUrl] }),
  };

  // Захищаємо JSON-LD від передчасного завершення тега script.
  const jsonLd = JSON.stringify(structuredData).replace(/</g, '\\u003c');

  return (
    <main>
      <article>
        <header>
          <p>Стаття</p>
          <h1>{article.title}</h1>

          <p>{article.excerpt}</p>

          <p>
            Автор: <span>{article.author}</span>
          </p>

          <time dateTime={article.publishedAt}>
            Опубліковано: {article.publishedAt}
          </time>

          {article.updatedAt && (
            <time dateTime={article.updatedAt}>
              Оновлено: {article.updatedAt}
            </time>
          )}
        </header>

        <div>
          {article.content.map((paragraph) => (
            <p key={paragraph}>{paragraph}</p>
          ))}
        </div>
      </article>

      <script
        type="application/ld+json"
        dangerouslySetInnerHTML={{ __html: jsonLd }}
      />
    </main>
  );
}

import type { Metadata } from 'next';

export const metadata: Metadata = {
  metadataBase: new URL('https://example.com'),
  title: {
    default: 'Fullstack Academy',
    template: '%s | Fullstack Academy',
  },
  description: 'Навчальні матеріали для розробників.',
};

export const metadata: Metadata = {
  title: 'Як працює кешування в Next.js',
};

Як працює кешування в Next.js | Fullstack Academy

/articles/nextjs-caching
/articles/nextjs-caching?source=mail

export const metadata: Metadata = {
  alternates: {
    canonical: 'https://example.com/articles/nextjs-caching',
  },
};

const structuredData = {
  '@context': 'https://schema.org',
  '@type': 'Article',
  headline: 'Як працює кешування в Next.js',
  description: 'Пояснення принципів кешування в Next.js.',
  url: 'https://example.com/articles/nextjs-caching',
  datePublished: '2026-01-15',
  dateModified: '2026-02-01',
  author: {
    '@type': 'Person',
    name: 'Олена Коваль',
  },
  image: ['https://example.com/images/nextjs-caching.jpg'],
};

<script
  type="application/ld+json"
  dangerouslySetInnerHTML={{
    __html: JSON.stringify(structuredData).replace(/</g, '\\u003c'),
  }}
/>

{
  "@type": "Article"
}

<h1>Як працює кешування в Next.js</h1>

<h1>Як працює кешування в Next.js</h1>

<h2>Що таке кешування</h2>
<h3>Кешування даних</h3>

<h2>Стратегії кешування</h2>
<h3>Статичні дані</h3>
<h3>Динамічні дані</h3>

<main>
  <article>
    <header>
      <h1>Як працює кешування в Next.js</h1>
      <p>Короткий опис матеріалу.</p>
    </header>

    <section>
      <h2>Що таке кешування</h2>
      <p>Кешування зменшує кількість повторних операцій.</p>
    </section>
  </article>
</main>

<article>
  <header>
    <h1>Валідація форм у Next.js</h1>
    <p>
      У цьому матеріалі розглянемо, як перевіряти дані форми на сервері
      та повертати користувачу зрозумілі повідомлення про помилки.
    </p>
  </header>

  <section>
    <h2>Підготовка форми</h2>
    <p>Спочатку визначимо поля та правила їх перевірки.</p>
  </section>

  <section>
    <h2>Обробка помилок</h2>
    <p>Після валідації можна показати помилки біля відповідних полів.</p>
  </section>
</article>

Метадані в Next.js App Router

Урок 5

<main>
  <article>
    <header>
      <p>Рівень: Intermediate</p>
      <h1>SEO для статей у Next.js</h1>
      <p>
        Навчіться додавати метадані, JSON-LD та семантичну структуру
        до навчальних сторінок.
      </p>
    </header>

    <section>
      <h2>Цілі уроку</h2>
      <ul>
        <li>Додавати динамічні метадані.</li>
        <li>Описувати статтю через JSON-LD.</li>
        <li>Будувати правильну ієрархію заголовків.</li>
      </ul>
    </section>

    <section>
      <h2>Метадані сторінки</h2>
      <p>Метадані допомагають описати сторінку пошуковій системі.</p>
    </section>

    <section>
      <h2>Підсумок</h2>
      <p>Тепер сторінка має зрозумілу структуру та опис статті.</p>
    </section>
  </article>
</main>

<time dateTime="2026-01-15">
  15 січня 2026 року
</time>

<p>
  Опубліковано:{' '}
  <time dateTime="2026-01-15">15 січня 2026 року</time>
</p>

<p>
  Оновлено:{' '}
  <time dateTime="2026-02-01">1 лютого 2026 року</time>
</p>

import { notFound } from 'next/navigation';

export default async function Page({
  params,
}: {
  params: Promise<{ slug: string }>;
}) {
  const { slug } = await params;
  const article = await getArticle(slug);

  if (!article) {
    notFound();
  }

  return <article>{article.title}</article>;
}

export const metadata: Metadata = {
  title: 'Навчальні матеріали',
  description: 'Усі наші навчальні матеріали.',
};

<h1>Генерація метаданих для динамічних сторінок у Next.js</h1>