Structured Data та JSON-LD

{
  "@context": "https://schema.org",
  "@type": "Article",
  "headline": "Вивчаємо Next.js",
  "author": {
    "@type": "Person",
    "name": "Олена Коваль"
  }
}

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

export default async function ArticlePage({
  params,
}: ArticlePageProps) {
  const { slug } = await params;

  // У реальному застосунку дані можна отримати з CMS або бази даних
  const article = {
    slug,
    title: "Як працює маршрутизація в Next.js",
    description:
      "Розбираємо файлову маршрутизацію та динамічні сегменти в Next.js.",
    content:
      "Next.js використовує структуру папок для опису маршрутів застосунку.",
    author: "Олена Коваль",
    publishedAt: "2026-08-10",
    updatedAt: "2026-08-12",
    image: "https://example.com/images/nextjs-routing.jpg",
  };

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

  const jsonLd = {
    "@context": "https://schema.org",
    "@type": "Article",
    mainEntityOfPage: {
      "@type": "WebPage",
      "@id": url,
    },
    headline: article.title,
    description: article.description,
    image: [article.image],
    datePublished: article.publishedAt,
    dateModified: article.updatedAt,
    author: {
      "@type": "Person",
      name: article.author,
    },
    publisher: {
      "@type": "Organization",
      name: "Fullstack Academy",
      logo: {
        "@type": "ImageObject",
        url: "https://example.com/logo.png",
      },
    },
  };

  return (
    <article>
      <script
        type="application/ld+json"
        dangerouslySetInnerHTML={{
          // Екрануємо символ "<", щоб значення не могло закрити script
          __html: JSON.stringify(jsonLd).replace(/</g, "\\u003c"),
        }}
      />

      <h1>{article.title}</h1>
      <p>{article.description}</p>
      <p>Автор: {article.author}</p>
      <p>Опубліковано: {article.publishedAt}</p>
      <div>{article.content}</div>
    </article>
  );
}

<script type="application/ld+json">
  {
    "@context": "https://schema.org",
    "@type": "Article",
    "headline": "Як працює маршрутизація в Next.js"
  }
</script>

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

export default function ProductPage() {
  const product = {
    name: "Механічна клавіатура",
    description: "Механічна клавіатура з перемикачами Brown.",
    image: "https://example.com/images/keyboard.jpg",
    sku: "KB-001",
    price: "2499.00",
    currency: "UAH",
    availability: "https://schema.org/InStock",
  };

  const jsonLd = {
    "@context": "https://schema.org",
    "@type": "Product",
    name: product.name,
    description: product.description,
    image: [product.image],
    sku: product.sku,
    offers: {
      "@type": "Offer",
      priceCurrency: product.currency,
      price: product.price,
      availability: product.availability,
      url: "https://example.com/products/mechanical-keyboard",
    },
  };

  return (
    <main>
      <script
        type="application/ld+json"
        dangerouslySetInnerHTML={{
          // Не дозволяємо даним сформувати новий HTML-тег
          __html: JSON.stringify(jsonLd).replace(/</g, "\\u003c"),
        }}
      />

      <h1>{product.name}</h1>
      <p>{product.description}</p>
      <p>
        Ціна: {product.price} {product.currency}
      </p>
    </main>
  );
}

const articleJsonLd = {
  "@context": "https://schema.org",
  "@type": "Article",
  headline: "Вивчаємо Next.js",
};

const breadcrumbJsonLd = {
  "@context": "https://schema.org",
  "@type": "BreadcrumbList",
  itemListElement: [
    {
      "@type": "ListItem",
      position: 1,
      name: "Головна",
      item: "https://example.com",
    },
    {
      "@type": "ListItem",
      position: 2,
      name: "Статті",
      item: "https://example.com/articles",
    },
    {
      "@type": "ListItem",
      position: 3,
      name: "Вивчаємо Next.js",
      item: "https://example.com/articles/learn-nextjs",
    },
  ],
};

export default function Page() {
  return (
    <>
      <script
        type="application/ld+json"
        dangerouslySetInnerHTML={{
          // Екрануємо небезпечний символ у JSON
          __html: JSON.stringify(articleJsonLd).replace(/</g, "\\u003c"),
        }}
      />

      <script
        type="application/ld+json"
        dangerouslySetInnerHTML={{
          // Екрануємо небезпечний символ у JSON
          __html: JSON.stringify(breadcrumbJsonLd).replace(
            /</g,
            "\\u003c",
          ),
        }}
      />

      <h1>Вивчаємо Next.js</h1>
    </>
  );
}

{
  "image": "https://example.com/images/article.jpg"
}

{
  "image": "/images/article.jpg"
}

const json = `{
  "@type": "Article",
  "headline": "${title}"
}`;

dangerouslySetInnerHTML={{ __html: JSON.stringify(data) }}

dangerouslySetInnerHTML={{
  __html: JSON.stringify(data).replace(/</g, "\\u003c"),
}}