javascript 在Next.js 13 app-router中使用结构化数据jsonLD的正确方法是什么？

kgsdhlau 于 2023-06-04 发布在 Java

关注(0)|答案(1)|浏览(160)

我试图在我的nextJS 13（应用程序路由器）应用程序中添加结构化数据，但找不到正确的方法。
Next-SEO包也给出错误
我试了下next-seo，但得到了这个错误：
未处理的运行时错误：无法读取null的属性（阅读“useContext”）
在添加到应用程序目录中的layout.js时

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>

JavaScript

来源：https://stackoverflow.com/questions/76387814/whats-the-correct-way-to-use-structured-data-jsonld-in-next-js-13-app-router

1条答案

按热度按时间

wqsoz72f1#

什么是错误，你得到善意地提到，但我理解，希望它会帮助你
在Next.js 13中，您可以通过利用Head组件和内置的next-seo包来使用JSON-LD格式的结构化数据。下面是一个示例，说明如何在带有app-router的Next.js 13应用中使用JSON-LD实现结构化数据：
通过在项目目录中运行以下命令来安装所需的依赖项：卢阿

npm install next-seo

创建一个新文件，例如Layout.js，您将在其中定义应用的布局组件。在这个组件中，您可以使用next-seo包设置结构化数据。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;

在_app. js文件中，导入应用并使用Layout组件 Package 应用。jsx

import Layout from './Layout';

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

export default MyApp;

在您的单独页面中，您可以使用next-seo中的NextSeo组件设置特定的SEO和结构化数据。例如：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;

按照这些步骤，您可以使用next-seo包和Head组件将JSON-LD格式的结构化数据添加到Next.js 13应用程序中。这种方法允许您定义默认的SEO配置，设置全局结构化数据，并根据需要在每个页面上覆盖它们。

赞(0）回复(0）举报 2023-06-04

我来回答

javascript 在Next.js 13 app-router中使用结构化数据jsonLD的正确方法是什么？

1条答案

相关问题

热门标签

最新问答