I'm trying to use Gridsome metaInfo
to create a Twitter Card with the Cover Image of the current post, but the image is not showing in the 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>
Since the g-image
know how to resolve the image path I have to use it in order to put the image path in the meta
tags.
Editors- this question is for documenting my knowledge, I know the answer and I hope the question will be good by itself
To get the Twitter Card working you need few steps.
Get the real image path
You're right, when you querying the GraphQL for an image, you getting an object instead of image path. But to get the image path you just need to access to the
src
property in the object:Get the right Image Size
And over the internet, you can find the recommended size is 1200x630, see the Open Graph Docs for example.
Of course, it is better to make sure you're using an image with the right dimensions, but even if your image is not feet, you can query it with the right dimensions by GraphQL, and it will crop your image if needed:
Full Image Path
Twitter requires a full path to your image (Facebook, for example, accept path relative to the host), so you need to join the
siteUrl
to the image path:Misc and Testing
Of course, you need to define the other
meta
tags, and please note the Twitter tags should be withname
andcontent
, but the Open Graph tags should be withproperty
andcontent
:Then, validate your page with these tools, and see their warnings:
Also, you can use Localhost Open Graph Checker extension to test your local website.