当前位置：首页 > article >正文

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

article 2024/12/27 0:09:12

在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>