How to use post cover image as Card Image for twitter

Question

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

score 1 · Answer 1 · edited May 08 '21 at 19:25

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:

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

Get the right Image Size

Images for this Card support an aspect ratio of 2:1 with minimum dimensions of 300x157 or a maximum of 4096x4096 pixels
Twitter Docs (search for twitter:image)

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:

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

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:

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

Misc and Testing

Of course, you need to define the other meta tags, and please note the Twitter tags should be with name and content, but the Open Graph tags should be with property and content:

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

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

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.

How to use post cover image as Card Image for twitter

1 Answers1

Get the real image path

Get the right Image Size

Full Image Path

Misc and Testing