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

huangapple
go评论116阅读模式
英文:

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

问题

以下是您要翻译的内容：

"我试图在我的Next.js 13（应用路由器）应用程序中添加结构化数据，但找不到正确的方法。

Next-seo包也出现错误。

我尝试了next-seo，但出现了以下错误：

未处理的运行时错误
错误：无法读取null的属性（读取'useContext'）

当我在应用程序目录中的layout.js中添加时

export default function RootLayout({ children }) {
return (






{children}
{/* {children} */}



}"

请注意，我已经省略了您提到的代码部分，只提供了翻译好的内容。

英文:

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 <NextSeo useAppDir={true}/>
To the layout.js in the app directory

<!-- begin snippet: js hide: false console: true babel: false -->

<!-- language: lang-js -->

  1. export default function RootLayout({ children }) {
  2.   return (
  3.     &lt;html lang=&quot;en&quot;&gt;
  4.       &lt;head&gt;
  5.         &lt;NextSeo useAppDir={true} /&gt;
  6.       &lt;/head&gt;
  7.       &lt;body className={inter.className}&gt;
  8.         &lt;Navbar /&gt;
  9.         {children}
  10.         {/* &lt;GlobalContextProvider&gt;{children}&lt;/GlobalContextProvider&gt; */}
  11.         &lt;Analytics /&gt;
  12.       &lt;/body&gt;
  13.     &lt;/html&gt;

<!-- end snippet -->

答案1

得分: 0

在Next.js 13中，您可以使用JSON-LD格式的结构化数据，利用Head组件和内置的next-seo包。以下是如何在Next.js 13应用程序中使用JSON-LD实现结构化数据的示例，同时使用app-router：

在您的项目目录中运行以下命令来安装所需的依赖项：

  1. npm install next-seo

创建一个新文件，例如Layout.js，在其中定义您的应用程序的布局组件。在此组件中，您可以使用next-seo包设置结构化数据。

  1. import { DefaultSeo, NextSeo } from 'next-seo';
  2. import Head from 'next/head';
  4. const Layout = ({ children }) => {
  5.   return (
  6.     <>
  7.       <DefaultSeo
  8.         // 在此处定义默认的SEO配置
  9.       />
  10.       <Head>
  11.         {/* 在此处添加额外的元标记或样式表 */}
  12.         <script
  13.           type="application/ld+json"
  14.           dangerouslySetInnerHTML={{
  15.             __html: JSON.stringify({
  16.               '@context': 'https://schema.org',
  17.               '@type': 'Organization',
  18.               name: 'Your Organization Name',
  19.               url: 'https://www.example.com',
  20.               // 在此处添加更多的结构化数据属性
  21.             }),
  22.           }}
  23.         />
  24.       </Head>
  25.       {children}
  26.     </>
  27.   );
  28. };
  30. export default Layout;

在您的_app.js文件中，导入并使用Layout组件包装您的应用程序。

  1. import Layout from './Layout';
  3. function MyApp({ Component, pageProps }) {
  4.   return (
  5.     <Layout>
  6.       <Component {...pageProps} />
  7.     </Layout>
  8.   );
  9. }
  11. export default MyApp;

在您的各个页面中，您可以使用next-seo的NextSeo组件来设置特定的SEO和结构化数据。例如：

  1. import { NextSeo } from 'next-seo';
  3. const MyPage = () => {
  4.   return (
  5.     <>
  6.       <NextSeo
  7.         title="My Page Title"
  8.         description="Description of my page"
  9.         // 在此处添加更多的SEO属性
  10.       />
  11.       {/* 您页面的其余内容 */}
  12.     </>
  13.   );
  14. };
  16. export default MyPage;

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

英文:

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

  1. 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

  1. import { DefaultSeo, NextSeo } from &#39;next-seo&#39;;
  2. import Head from &#39;next/head&#39;;
  4. const Layout = ({ children }) =&gt; {
  5.   return (
  6.     &lt;&gt;
  7.       &lt;DefaultSeo
  8.         // Define default SEO configuration here
  9.       /&gt;
  10.       &lt;Head&gt;
  11.         {/* Add additional meta tags or stylesheets here */}
  12.         &lt;script
  13.           type=&quot;application/ld+json&quot;
  14.           dangerouslySetInnerHTML={{
  15.             __html: JSON.stringify({
  16.               &#39;@context&#39;: &#39;https://schema.org&#39;,
  17.               &#39;@type&#39;: &#39;Organization&#39;,
  18.               name: &#39;Your Organization Name&#39;,
  19.               url: &#39;https://www.example.com&#39;,
  20.               // Add more structured data properties here
  21.             }),
  22.           }}
  23.         /&gt;
  24.       &lt;/Head&gt;
  25.       {children}
  26.     &lt;/&gt;
  27.   );
  28. };
  30. export default Layout;

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

  1. import Layout from &#39;./Layout&#39;;
  3. function MyApp({ Component, pageProps }) {
  4.   return (
  5.     &lt;Layout&gt;
  6.       &lt;Component {...pageProps} /&gt;
  7.     &lt;/Layout&gt;
  8.   );
  9. }
  11. 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

  1. import { NextSeo } from &#39;next-seo&#39;;
  3. const MyPage = () =&gt; {
  4.   return (
  5.     &lt;&gt;
  6.       &lt;NextSeo
  7.         title=&quot;My Page Title&quot;
  8.         description=&quot;Description of my page&quot;
  9.         // Add more SEO properties here
  10.       /&gt;
  11.       {/* Rest of your page content */}
  12.     &lt;/&gt;
  13.   );
  14. };
  16. 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.

huangapple
  • 本文由 发表于 2023年6月2日 14:55:59
  • 转载请务必保留本文链接：https://go.coder-hub.com/76387814.html
  • app-router
  • javascript
  • next.js
  • next.js13
  • reactjs
匿名

发表评论

匿名网友

:?: :razz: :sad: :evil: :!: :smile: :oops: :grin: :eek: :shock: :???: :cool: :lol: :mad: :twisted: :roll: :wink: :idea: :arrow: :neutral: :cry: :mrgreen:

确定