如何使用帖子封面图片作为 twitter 的卡片图片

如何解决如何使用帖子封面图片作为 twitter 的卡片图片

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

<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 标记中。

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

解决方法

要使 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 标签应该带有 name 和 content，但是 Open Graph 标签应该带有 property 和 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 扩展程序来测试您的本地网站。