如何在Nuxt 3中包含JSON-LD脚本？

Question

我正在尝试向我的页面添加json-ld，但仍然无法正常工作或不符合我的要求。

到目前为止，我已经尝试了以下方法：

1. 使用useMeta()

useMeta({
    script: [
        {
            type: 'application/ld-json',
            json: jsonLd,
        },
    ],
});

结果：<script type="application/ld-json" json="[object Object]"></script>

2. 使用 <Script> 标签

<Script type="application/ld-json">
        {{ jsonLd }}
</Script>

结果：<script type="application/ld+json"></script> 的值为空。

以及

<Script type="application/ld-json" v-html="jsonLd"></Script>

结果: <script type="application/ld-json" innerhtml="[object Object]"></script>

我有什么遗漏吗？ 谢谢。

- Hadezuka

Answer 1

如果有人想知道，这就是我如何使其工作的：

使用

<Script :children="jsonLd" />

或者

useMeta({
    script: [
        {
            type: 'application/ld-json',
            children: JSON.stringify(jsonLd),
        },
    ],
});

- Hadezuka

---

你把这个添加到哪里了？直接添加到 nuxt 3 的 nuxt config.ts 文件里了吗？我尝试使用它，但是 useMeta 不被识别为一个函数。 - undefined

你把这个添加到哪里了？直接添加到nuxt 3的nuxt config.ts文件中吗？我尝试使用它，但是useMeta没有被识别为一个函数。 - CodeConnoisseur

将其添加到您的组件或页面中，在nuxt 3中。 - Hadezuka

这基本上是nuxt-jsonld中的实现。 - undefined

Answer 2

很快将添加对Nuxt 3的支持：https://github.com/ymmooot/nuxt-jsonld/issues/763

- Irgend Son Hansel

Answer 3

你可以使用 nuxt-jsonld，这是一个 Nuxt 3 模块，用于管理 JSON-LD。

- GuidN

Answer 4

在Nuxt 3中对我起作用了。

useHead({
script: [{
    type: 'application/ld+json',
    innerHTML: JSON.stringify({
        "type": "application/ld+json",
        "textContent": {
            "@context": "https://schema.org",
            "@type": "Article",
            "headline": "",
            "image": [
                ""
            ],
            "author": [{
                "@type": "Person",
                "name": "",
                "url": ""
            }]
        }
    })
}],
__dangerouslyDisableSanitizers: ['script'],
})

- modos