Search code examples
vue.jstwitterseo

twitter:image not visible for Vue.js application

I am having issues with the Twitter card of a Vue.js application. When I run the url through the Twitter card validator, all the checks pass but the image is not displayed.

I went through the troubleshoot guide from Twitter and applied the changes below to the image, but I could still not resolve the issue. https://twittercommunity.com/t/card-error-unable-to-render-or-no-image-read-this-first/62736

This is how I am defining the image in the index.html file of the project. The image is saved in the public folder.

<meta name="twitter:image" content="https://speakher.jp/banner_twitter.png">

Do you have any pointers as to what might be causing the issue?

Solution

  • Checking the Twitter Card Validator right now shows the correct image. Sometimes the card you're seeing is cached, so if you want to look at the latest version of the image, just add a parameter with a random name and (optionally) a random value.

    For the link https://speakher.jp, for example, just adding a small random parameter will force Twitter to load the latest version of the image. This should load the same page since the parameter means nothing (normally).

    https://speakher.jp?000000000001

    You can also use this same method when posting your actual link to Twitter. This will ensure that the latest card preview is always used by Twitter.

    I got this card from the validator. This seems to match the image in the link you provided. Card screenshot