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
- Image ratio 2:1
- image size: 252 kb
- absolute path for url: https://speakher.jp/banner_twitter.png
- curl -v -A Twitterbot returns status code 200
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?
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).
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.
- → should I choose reactjs+f7 or f7+vue.js?
- → Get the calling element with vue.js
- → Vue.js - Binding radio elements of same name to array
- → Get data from DB based on selected values. Vue.js + laravel
- → Vuejs IF statement
- → VueJS set Input field data
- → How do I use vue-resource v-links inside a vueify component?
- → Export more than one variable in ES6?
- → How create a todo list with octobercms?
- → Using vue.js in Shopify liquid templates
- → Apply a discount using VueJS and Laravel
- → Laravel 5.2 CORS, GET not working with preflight OPTIONS
- → Vue @click doesn't work on an anchor tag with href present