在动态 Vue 3 App 中绑定 OG 标签的正确方法是什么？

Question

我有一个动态页面，我需要在其中发出 API 请求并动态更新元标记。

我可以通过在App.js 中添加 API 请求并根据 API 的响应更新 HTML 头部标签来实现。

当我在社交媒体上分享 URL 时，标签没有显示，因为它需要一些加载时间。

我的应用程序有很多带有许多路由的动态页面。但是，从 SEO 的角度来看，路线中只有 1 条路径对我来说很重要。

在社交媒体上共享时，我应该采取什么方法来显示元标记？

Answer 1

vue-meta 插件现在兼容 vue 3

安装：

npm install vue-meta@next --save

用法：

main.js

import { createApp} from 'vue'
import App from './App.vue'
import router from './router'
import store from './store'
import VueMeta from 'vue-meta'

let app = createApp(App)

let root = app.use(VueMeta ,{refreshOnceOnNavigation:true}).use(store).use(router).mount('#app')

在任何子组件中：

import { watch } from 'vue'
import { useMeta, useActiveMeta } from 'vue-meta'

export default {
  setup () {
    const counter = ref(0)

    // Add meta info
    // The object passed into useMeta is user configurable
    const { meta } = useMeta({
      title: 'My Title',
    })

    watchEffect(() => {
      const counterValue = counter.value
      meta.description = `Counted ${counterValue} times`
    })

    // Or use a computed prop
    const computedMeta = computed(() => ({
      title: 'My Title',
      description : `Counted ${counter.value} times`
    }))

    const { meta, onRemoved } = useMeta(computedMeta)

    onRemoved(() => {
      // Do something as soon as this metadata is removed,
      // eg because the component instance was destroyed
    })

    // Get the currently used metainfo
    const metadata = useActiveMeta()

    watch(metadata, (newValue) => {
      // metadata was updated, do something
    })
  }
}

更多详情请查看branch