我如何在 nextjs 中使用 application/ld+json

Question

我在 next js 中有一个 Layout，我使用 Head 组件。我想使用模式 json 但我有一个错误。

这是我的代码：

<Head>
        <script type="application/ld+json">
          {{
            "@context": "http://schema.org",
            "@type": "Person",
            address: {
              "@type": "PostalAddress",
              addressLocality: "Seattle",
              addressRegion: "WA",
              postalCode: "98052",
              streetAddress: "20341 Whitworth Institute 405 N. Whitworth"
            },
            colleague: [
              "http://www.xyz.edu/students/alicejones.html",
              "http://www.xyz.edu/students/bobsmith.html"
            ],
            email: "mailto:jane-doe@xyz.edu",
            image: "janedoe.jpg",
            jobTitle: "Professor",
            name: "Jane Doe",
            telephone: "(425) 123-4567",
            url: "http://www.janedoe.com"
          }}
        </script>
</Head>

这是我的错误：

Objects are not valid as a React child (found: object with keys {@context, @type, address, colleague, email, image, jobTitle, name, telephone, url}). 

If you meant to render a collection of children, use an array instead. in script (at Layout.js:130) in head in Head (at _document.js:43) in html in Html (at _document.js:42) in MyDocument in Context.Provider in Context.Provider

请帮忙！

Answer 1

您需要使用 dangerouslySetInnerHTML 来放置您的架构数据。

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

Answer 2

基于您提供的示例结构化数据片段。这应该可以解决您的问题。
但是，如果您打算在 google's rich result testing tool 上测试您的结构化数据片段，则需要使用通用脚本标记，将键放在双引号中并排除 dangerouslySetInnerHTML 属性。

<Head>
      <script
        type="application/ld+json"
        dangerouslySetInnerHTML={{ __html: JSON.stringify({
                "@context": "http://schema.org",
                "@type": "Person",
                address: {
                  "@type": "PostalAddress",
                  addressLocality: "Seattle",
                  addressRegion: "WA",
                  postalCode: "98052",
                  streetAddress: "20341 Whitworth Institute 405 N. Whitworth"
                },
                colleague: [
                  "http://www.xyz.edu/students/alicejones.html",
                  "http://www.xyz.edu/students/bobsmith.html"
                ],
                email: "mailto:jane-doe@xyz.edu",
                image: "janedoe.jpg",
                jobTitle: "Professor",
                name: "Jane Doe",
                telephone: "(425) 123-4567",
                url: "http://www.janedoe.com"
              })
           }}
      />
</Head>

Answer 3

NextJs现在提供next/script组件来解决这个问题，除了使用 dangerouslySetInnerHTML 你可以使用 Script 组件直接在你的组件中添加脚本，这里有一个基本的例子供参考

function MyApp() {
  return (
   <>
    <Script>
    {`
      // ** your js goes here
    `}
    </Script>
    <Head>
       seo tags
    </Head>
    <div>
       your jsx or components
    </div>
   <>  
  )

}

这里是官方文档link以了解更多关于标签的其他功能https://nextjs.org/docs/basic-features/script

Answer 4

const addJsonLd = () => {
  return {
    _html: `
     YOUR JSON OBJECT HERE
    `
  }
}

<Head>
    <script
      type="application/ld+json"
      dangerouslySetInnerHTML={addJsonLd()}
      key="item-jsonld"
    />
</Head>

NextJS 文档中提到了该方法。 Setting Metadata in NextJS Apps

Answer 5

其实现在推荐使用Next.js Script component next/script

import Script from "next/script";

<Head>
    <Script
        type="application/ld+json"
        dangerouslySetInnerHTML={{ __html: JSON.stringify(jsonData) }}
    />
</Head>

我如何在 nextjs 中使用 application/ld+json

how can i use application/ld+json in nextjs

reactjs

next.js