seo Question posted in
Some basic information to get you started with this can be found here.

Seo – What's the correct way to use structured data jsonLD in Next.js 13 app-router?

I was trying to add structured data in my nextJS 13(app router) application but couldn’t find the correct method.

Next-seo package also gives errors

I tried next-seo but got this error:

Unhandled Runtime Error
Error: Cannot read properties of null (reading ‘useContext’)

While adding
To the layout.js in the app directory

export default function RootLayout({ children }) {
  return (
    <html lang="en">
      <head>
        <NextSeo useAppDir={true} />
      </head>
      <body className={inter.className}>
        <Navbar />
        {children}
        {/* <GlobalContextProvider>{children}</GlobalContextProvider> */}
        <Analytics />
      </body>
    </html>
Tags:

2

Answers


  1. 0

    What is the error you are getting kindly mentioned but as I understand hope It will help you

    In Next.js 13, you can use structured data in JSON-LD format by leveraging the Head component and the built-in next-seo package. Here’s an example of how you can implement structured data using JSON-LD in a Next.js 13 app with the app-router:

    Install the required dependencies by running the following command in your project directory:
    lua

    npm install next-seo

    Create a new file, for example, Layout.js, where you will define the layout component for your app. In this component, you can set up the structured data using the next-seo package.
    jsx

    import { DefaultSeo, NextSeo } from 'next-seo';
import Head from 'next/head';

const Layout = ({ children }) => {
  return (
    <>
      <DefaultSeo
        // Define default SEO configuration here
      />
      <Head>
        {/* Add additional meta tags or stylesheets here */}
        <script
          type="application/ld+json"
          dangerouslySetInnerHTML={{
            __html: JSON.stringify({
              '@context': 'https://schema.org',
              '@type': 'Organization',
              name: 'Your Organization Name',
              url: 'https://www.example.com',
              // Add more structured data properties here
            }),
          }}
        />
      </Head>
      {children}
    </>
  );
};

export default Layout;

    In your _app.js file, import and wrap your app with the Layout component.
    jsx

    import Layout from './Layout';

function MyApp({ Component, pageProps }) {
  return (
    <Layout>
      <Component {...pageProps} />
    </Layout>
  );
}

export default MyApp;

    In your individual pages, you can set specific SEO and structured data using the NextSeo component from next-seo. For example:
    jsx

    import { NextSeo } from 'next-seo';

const MyPage = () => {
  return (
    <>
      <NextSeo
        title="My Page Title"
        description="Description of my page"
        // Add more SEO properties here
      />
      {/* Rest of your page content */}
    </>
  );
};

export default MyPage;

    By following these steps, you can add structured data in JSON-LD format to your Next.js 13 app using the next-seo package and the Head component. This approach allows you to define default SEO configurations, set up global structured data, and override them on a per-page basis as needed.

    Login or Signup to reply.
  2. 0

    This is the official solution for inserting schema.org JSON-LD. I tested this approach and it works.

    export default async function Page({ params }) {
  const product = await getProduct(params.id)
 
  const jsonLd = {
    '@context': 'https://schema.org',
    '@type': 'Product',
    name: product.name,
    image: product.image,
    description: product.description,
  }
 
  return (
    <section>
      {/* Add JSON-LD to your page */}
      <script
        type="application/ld+json"
        dangerouslySetInnerHTML={{ __html: JSON.stringify(jsonLd) }}
      />
      {/* ... */}
    </section>
  )
}
    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search