Annotate NextJS Pages with schema.org tags

Annotate NextJS Pages with schema.org tags

To annotate an FAQPage in NextJS with schema.org tags, you can use the NextSeo component from the next-seo package to add the necessary metadata to your pages.

Here's an example of how to annotate an FAQPage using NextSeo:

import { NextSeo } from 'next-seo';

function FAQPage() {
  const faqItems = [
    {
      question: 'What is Next.js?',
      answer: 'Next.js is a popular React framework for building server-side rendered (SSR) web applications.',
    },
    {
      question: 'How do I create a new Next.js project?',
      answer: 'You can create a new Next.js project using the `create-next-app` CLI tool.',
    },
    // add more FAQ items as needed
  ];

  return (
    <>
      <NextSeo
        title="FAQ - My Next.js Site"
        description="Frequently asked questions about My Next.js Site."
        openGraph={{
          type: 'website',
          title: 'FAQ - My Next.js Site',
          description: 'Frequently asked questions about My Next.js Site.',
          images: [
            {
              url: 'https://example.com/og-image.jpg',
              alt: 'FAQ - My Next.js Site',
            },
          ],
        }}
        additionalMetaTags={[
          {
            name: 'keywords',
            content: 'next.js, faq, frequently asked questions',
          },
        ]}
        additionalLinkTags={[
          {
            rel: 'canonical',
            href: 'https://example.com/faq',
          },
        ]}
      />

      <main>
        <h1>Frequently Asked Questions</h1>

        <ol>
          {faqItems.map(({ question, answer }) => (
            <li key={question}>
              <h2>{question}</h2>
              <p>{answer}</p>
            </li>
          ))}
        </ol>
      </main>
    </>
  );
}

In this example, we use the NextSeo component to add metadata to the page, including the page title, description, and Open Graph tags. We also include additional meta tags and link tags as needed.

To add schema.org tags to the page, we can use the jsonLd property of the NextSeo component to add a script tag with the JSON-LD data. Here's an example of how to add schema.org tags for an FAQPage:

<NextSeo
  // ...
  jsonLd={[
    {
      '@context': 'https://schema.org',
      '@type': 'FAQPage',
      mainEntity: faqItems.map(({ question, answer }) => ({
        '@type': 'Question',
        name: question,
        acceptedAnswer: {
          '@type': 'Answer',
          text: answer,
        },
      })),
    },
  ]}
/>

In this example, we define a JSON-LD object with the @context and @type properties set to https://schema.org and FAQPage, respectively. We also define the mainEntity property as an array of Question and Answer objects, based on the faqItems array. Finally, we pass the JSON-LD object to the jsonLd property of the NextSeo component to add it to the page.