问题描述
我正在尝试使用 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 扩展程序来测试您的本地网站。