1

我的网站缺少 og:image 标签，并且没有在 LinkedIn 上显示图片。解决方案是添加我添加的元标记，但是一旦项目构建和部署，图像的名称就会更改。

我正在寻找类似的东西，但是图像将被实际生成的图像路径替换为 g-image 中的图像路径

export default function (Vue, { router, head, isClient }) {
   ....

  head.meta.push({
    name: 'image',
    property: 'og:image',
    content: './src/banner.jpg'
  })

  ....
}

谢谢

4

1 回答 1

0

我没有您的示例代码，所以我将向您展示我的博客源代码。

很简单。假设我正在使用以下查询查询 GraphQL：

<page-query>
query Post ($id: ID!) {
  post: post (id: $id) {
    title
    description
    content
    cover_image (width: 860, blur: 10)
  }
}
</page-query>

所以你有cover_image你想要得到真正的路径。g-image组件知道如何获取它：

<g-image alt="Cover image" v-if="$page.post.cover_image" :src="$page.post.cover_image" />

但是在您的代码中，您只需要访问该src属性：

export default function (Vue, { router, head, isClient }) {
   ....

  head.meta.push({
    name: 'image',
    property: 'og:image',
    content: this.$page.post.cover_image.src
  })

  ....
}

您可以尝试img在 just 中添加一个元素template以确保它是正确的图像：

<img :src="$page.post.cover_image.src" />
于 2021-01-25T17:12:37.090 回答