• Home
  • Overview
  • Layout
  • Data fetching
  • Static
  • Metadata
  • Preview
  • RSC
  • Server Actions
  • Intercepting Routes
  • API Routes
  • Fonts
  • SSR
  • Next.js Logo
    13

Metadata

Docs


  • Static
  • Dynamic SSG
  • Dynamic SSR
  • JSON-LD

File-based Metadata API:

  • Image Generation
  • sitemap.xml
  • robots.txt

JSON-LD

Docs

This page in Google Reach Results

sunt aut facere repellat provident occaecati excepturi optio reprehenderit

quia et suscipit suscipit recusandae consequuntur expedita et cum reprehenderit molestiae ut ut quas totam nostrum rerum est autem sunt rem eveniet architecto

const Page = async ({ searchParams }: Props) => {
  const id = searchParams.id || '1';
  const [post] = await api.post(id);
  const [user] = await api.user(post.userId);

  const jsonLd = {
    '@context': 'https://schema.org',
    '@type': 'BlogPosting',
    headline: post.title,
    image: `/api/user-image?id=${user.id}`,
    publisher: user.name,
    datePublished: new Date().toISOString(),
    articleBody: post.body,
    author: {
      '@type': 'Person',
      name: user.name,
    },
  };

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

      <article>
        <h3>{post.title}</h3>
        <p>{post.body}</p>
      </article>
    </div>
  );
};