使用vue添加网站结构化标记schema

在Vue.js项目中添加Schema Markup（结构化数据）非常简单，和普通的HTML项目类似，Vue也支持通过<script>标签嵌入JSON-LD、Microdata 或 RDFa 来实现结构化数据标记。由于Vue.js是基于组件化的框架，处理结构化数据的方式可能略有不同。下面我将展示如何在Vue.js中集成结构化数据标记。

1. 使用 JSON-LD 格式

Vue.js中添加JSON-LD标记通常是在组件中动态生成标记。你可以通过<script>标签来嵌入JSON-LD，通常将它放入组件的head部分或通过vue-meta插件动态修改页面的头部。

示例：在Vue.js中添加JSON-LD结构化数据

假设你正在开发一个产品页面，并希望在页面中加入Schema标记来描述这个产品。

<template><div><h1>{{ product.name }}</h1><p>{{ product.description }}</p><p>Price: ${{ product.price }}</p><p>Availability: {{ product.availability }}</p></div>
</template><script>
export default {data() {return {product: {name: 'iPhone 13',description: 'Apple iPhone 13 with A15 Bionic chip',price: 799.99,availability: 'In Stock',sku: 'iphone-13-1234',image: 'https://example.com/iphone13.jpg',url: 'https://example.com/iphone13'}};},head() {return {script: [{type: 'application/ld+json',innerHTML: JSON.stringify({"@context": "http://schema.org","@type": "Product","name": this.product.name,"image": this.product.image,"description": this.product.description,"sku": this.product.sku,"offers": {"@type": "Offer","url": this.product.url,"priceCurrency": "USD","price": this.product.price,"availability": "http://schema.org/InStock"}})}]};}
};
</script>

在这个例子中，JSON-LD数据是动态生成的，并被嵌入到页面的head部分。通过head()方法返回的script标签，它会将数据注入到HTML中。

head()方法是Vue组件的生命周期钩子函数之一，可以通过它动态更新页面头部的内容。
JSON.stringify()函数将JS对象转换为JSON字符串，这是生成JSON-LD结构化数据的标准方法。

2. 使用 `vue-meta` 插件动态修改页面的头部

如果你想要在Vue.js中更高效地管理页面的Meta信息（包括结构化数据），可以使用vue-meta插件。它可以帮助你动态地在Vue组件中修改页面的head部分。

安装`vue-meta`

npm install vue-meta

然后在main.js中引入并注册插件：

import Vue from 'vue';
import App from './App.vue';
import VueMeta from 'vue-meta';Vue.use(VueMeta);new Vue({render: h => h(App)
}).$mount('#app');

使用`vue-meta`动态添加Schema标记

<template><div><h1>{{ product.name }}</h1><p>{{ product.description }}</p><p>Price: ${{ product.price }}</p></div>
</template><script>
export default {data() {return {product: {name: 'iPhone 13',description: 'Apple iPhone 13 with A15 Bionic chip',price: 799.99,availability: 'In Stock',sku: 'iphone-13-1234',image: 'https://example.com/iphone13.jpg',url: 'https://example.com/iphone13'}};},metaInfo() {return {script: [{type: 'application/ld+json',innerHTML: JSON.stringify({"@context": "http://schema.org","@type": "Product","name": this.product.name,"image": this.product.image,"description": this.product.description,"sku": this.product.sku,"offers": {"@type": "Offer","url": this.product.url,"priceCurrency": "USD","price": this.product.price,"availability": "http://schema.org/InStock"}})}]};}
};
</script>

metaInfo()方法是vue-meta提供的钩子，用来动态设置页面的meta标签和头部内容。你可以在其中添加JSON-LD数据或者其他需要的<meta>标签。

3. 使用 Microdata 或 RDFa 格式

如果你希望在Vue组件中直接使用Microdata或者RDFa标记，可以将标记直接嵌入到HTML中。你可以在组件的模板部分使用itemscope、itemprop等属性，来标记结构化数据。

示例：使用Microdata标记产品信息

<template><div itemscope itemtype="http://schema.org/Product"><h1 itemprop="name">{{ product.name }}</h1><img itemprop="image" :src="product.image" :alt="product.name"><p itemprop="description">{{ product.description }}</p><span itemprop="sku">{{ product.sku }}</span><div itemprop="offers" itemscope itemtype="http://schema.org/Offer"><span itemprop="priceCurrency">USD</span><span itemprop="price">{{ product.price }}</span><meta itemprop="availability" content="InStock"></div></div>
</template><script>
export default {data() {return {product: {name: 'iPhone 13',description: 'Apple iPhone 13 with A15 Bionic chip',price: 799.99,sku: 'iphone-13-1234',image: 'https://example.com/iphone13.jpg',}};}
};
</script>