如何向Vue添加结构化数据（json-ld）？

Question

将json-ld添加到 vue 应用程序的正确方法是什么\xe2\x80\x99 ？

\n\n

我\xe2\x80\x99添加了一些结构化数据，但Google结构化数据测试工具未检测到我的网址上的数据。但是，如果我查看 url 的来源并将其粘贴到测试工具中，它会检测到我的数据。缺少什么？

\n

Answer 1

使用 VueJS 添加 JSON-LD 的一种方法是使用v-html如下例所示。

您可以在本文中通过 VueJS 从 Schema.org 找到有关结构化数据的更多信息。

NPM 上还有这个插件可以帮助你做到这一点。

<script>
export default {
  data () {
    const jsonld = {
      "@context": "https://schema.org",
      "@type": "BreadcrumbList",
      "itemListElement": [{
        "@type": "ListItem",
        "position": 1,
        "name": "Books",
        "item": "https://example.com/books"
      }, {
        "@type": "ListItem",
        "position": 2,
        "name": "The Lord of the Rings",
        "item": "https://example.com/books/the-lord-of-the-rings"
      }]
    }
    return {
      jsonld
    }
  }
}
</script>
<template>
  <script v-html="jsonld", type="application/ld+json">
</template>