1

我正在尝试使用 GridsomemetaInfo创建带有当前帖子封面图像的Twitter 卡片，但该图像未显示在卡片中。

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

<script>
export default {
  metaInfo () {
    return {
      title: this.$page.post.title,
      meta: [{
        property: 'og:image',
        content: this.$refs.coverImage? this.$refs.coverImage.src : (this.$page.meta.siteUrl + '/logo/LOGO.png')
      }]
    }
  }
}
</script>

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

由于g-image知道如何解析图像路径，因此我必须使用它才能将图像路径放入meta标签中。

编辑- 这个问题是为了记录我的知识，我知道答案，我希望这个问题本身会很好

4

1 回答 1

1

要让Twitter Card工作，您需要几个步骤。

获取真实图片路径

没错，当您在GraphQL中查询图像时，您得到的是对象而不是图像路径。但是要获取图像路径，您只需要访问src对象中的属性：

metaInfo () {
  return {
    title: this.$page.post.title,
    meta: [{
      property: 'og:image',
      content: this.$page.post.cover_image?.src || '/logo/LOGO.png'
    }]
  }
}

获得正确的图像尺寸

此卡片的图像支持2:1 的纵横比，最小尺寸为 300x157 或最大为 4096x4096 像素
Twitter Docs（搜索twitter:image）

在互联网上，您可以找到推荐的尺寸为1200x630，例如，请参阅Open Graph Docs。

当然，最好确保您使用的是尺寸正确的图像，但即使您的图像不是英尺，您也可以通过GraphQL以正确的尺寸查询它，如果需要它会裁剪您的图像：

<page-query>
query Post ($id: ID!) {
  post: post (id: $id) {
    ...
    cover_image (width: 1200, height: 630)
  },
}
</page-query>

完整图像路径

Twitter需要您的图片的完整路径（例如Facebook，接受相对于主机的路径），因此您需要加入siteUrl图片路径：

meta: [{
  name: 'twitter:image',
  content: this.$page.meta.siteUrl + (this.$page.post.cover_image?.src || '/logo/LOGO.png')
}]

杂项和测试

当然，您需要定义其他meta标签，请注意Twitter标签应该带有nameand content，但Open Graph标签应该带有propertyand content：

<!-- For Open Graph -->
<meta property="og:image" content="path/to/image.png">

<!-- For Twitter -->
<meta name="twitter:image" content="path/to/image.png">

然后，使用这些工具验证您的页面，并查看它们的警告：

此外，您可以使用Localhost Open Graph Checker扩展来测试您的本地网站。

于 2021-01-26T08:22:21.270 回答