如何使用 Vue Unhead 和 Vue Meta 动态设置元标题、元描述、元图像？

2024-03-11 11:16:08

使用 Vue Unhead 和 Vue Meta 动态设置元标题、和图像

导言

元标题、和图像对于页面在搜索引擎结果页面 (SERP) 中的展示至关重要。在 Vue.js 应用程序中，我们可以使用 Vue Unhead 和 Vue Meta 来动态设置这些元数据，以适应不同页面和内容。本文将深入探讨如何实现此功能，并提供逐步指南和代码示例。

使用 Vue Unhead 和 Vue Meta

安装

首先，使用 npm 安装 Vue Unhead 和 Vue Meta：

npm install vue-unhead vue-meta

配置

在 main.js 文件中，配置 Vue Unhead 和 Vue Meta：

import { createApp } from "vue";
import App from "./App.vue";
import router from "./router";
import store from "./store";
import { createHead } from '@unhead/vue'
import { createMetaManager } from "vue-meta";

const app = createApp(App);
app.use(router);
app.use(store);
app.use(createMetaManager());
const head = createHead()
app.use(head)
app.mount("#app");

动态设置元数据

在详细信息页面上，当组件挂载时，我们可以获取 API 数据并更新元标题、描述和图像：

import { onMounted } from "vue";
import axios from "axios";

onMounted(() => {
  fetchOperatorDetail();
});

function fetchOperatorDetail() {
  axios.get(
    `api/route`,
    {
      headers: {
        'time_zone': timeZone,
      }
    }
  ).then((response) => {
    if (Object.keys(response.data.data).length > 0) {
      const { title, description, image } = response.data.data;
      this.$meta().setTitle(title);
      this.$meta().setDescription(description);
      this.$meta().addImage({ src: image });
    }
  });
}

更新路由元数据

在页面导航时，更新路由元数据以确保正确显示元标题、描述和图像：

import { createRouter, createWebHistory } from "vue-router";
import ListView from "../components/views/ListView.vue";

const router = createRouter({
  history: createWebHistory(import.meta.env.BASE_URL),
  routes: [
    {
      path: "/",
      name: "home",
      component: ListView,
      meta: {
        title: "ListView",
        description: "A list of items.",
        image: "path/to/image.png",
      }
    },
    {
      path: "/:detailpage/:packageid?",
      name: "detailpage",
      component: () => import("../components/views/detail page.vue"),
      meta: {
        title: "detail page",
        description: "A detail page for an item.",
        image: "path/to/detail-image.png",
      }
    },
  ],
});

router.beforeEach((to, from, next) => {
  const { title, description, image } = to.meta;
  this.$meta().setTitle(title);
  this.$meta().setDescription(description);
  this.$meta().addImage({ src: image });
  next();
});

export default router;

结论

通过使用 Vue Unhead 和 Vue Meta，我们可以在 Vue.js 应用程序中动态设置元标题、描述和图像。这使我们可以优化搜索引擎优化 (SEO) 并为页面创建引人注目的展示效果。本文提供了分步指南，通过代码示例演示了如何实现此功能。

常见问题解答

如何使用 Vue Unhead 和 Vue Meta 设置图像缩略图？

您可以通过 this.$meta().addImage() 方法设置图像缩略图，如下所示：

this.$meta().addImage({
  src: "path/to/image.png",
  type: "image/png",
  width: 600,
  height: 600
});

是否可以使用 Vue Unhead 和 Vue Meta 设置多个元标题和描述？

是的，您可以使用 this.$meta().addTitle() 和 this.$meta().addDescription() 方法设置多个元标题和描述，如下所示：

this.$meta().addTitle("Title 1");
this.$meta().addTitle("Title 2");

this.$meta().addDescription("Description 1");
this.$meta().addDescription("Description 2");