vue.js - 如何将结构化数据(json-ld)添加到Vue？

Question

将json-ld添加到Vue应用的正确方法是什么？

我添加了一些结构化数据，但是Google structured data testing tool无法在我的网址中检测到数据。但是，如果我查看url的源并将其粘贴到测试工具中，它将检测到我的数据。缺少什么？

Answer 1

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

您可以在this article.中使用VueJS在Schema.org中找到有关结构化数据的更多信息。

还有这个plugin on 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>