Twitter Embed/Card isn't working.

[ForBo7]

Hello!

I've been trying to get a preview of my website to appear when I post links to it on Twitter, but nothing's been working.

Open Graph works everywhere except Twitter. I've also tried specifying all Open Graph option, but to no avail. I've also tinkered around with Twitter Card options, and that's also not working.

I'd really appreciate any input about what's the problem and how I can fix this.

My website: https://forbo7.github.io
My website's _website.yml: https://github.com/ForBo7/forbo7.github.io/blob/main/_website.yml

[mcanouil]

Twitter does not use OpenGraph, thus the reason you see no card with your current settings.
See https://developer.twitter.com/en/docs/twitter-for-websites/cards/guides/getting-started.
See Quarto documentation for Twitter cards: https://quarto.org/docs/websites/website-tools.html#twitter-cards.

To note, there are online services to check social cards (OpenGraph and Twitter). Twitter also has a (developper) service to check Twitter cards from your website.

Also what version of Quarto are you using?

[ForBo7]

Oh, I didn't know Twitter doesn't support OpenGraph. I initially only tried with OpenGraph.

After reading your reply, I tried writing each twitter-card option out, and then it worked. It must've been a combination of me perhaps leaving out a few twitter-card options, and Twitter itself: when I pasted in my desired URL, Twitter for some reason wasn't displaying the thumbnail of the URL. I then decided to send the tweet and quickly delete it. When I tweeted, then the thumbnail appeared.

Looking back, I should have also reworded this post's title differently, instead of "Twitter Embed/Card isn't working". Thank you for your time and help, and I apologize for any inconvenience.

[dragonstyle]

The HTML of the page looks reasonable to me (including the correct metadata). I noticed that the title of your site includes the // characters, which I imagine might not play well. Could you try removing these as a test and see whether that fixes the issue?

[ForBo7]

I managed to get it working. It was a combination of me initially using OpenGraph only, me perhaps leaving out some twitter-card options, and Twitter itself: when I pasted in my desired URL, Twitter for some reason wasn't displaying the thumbnail of the URL. I later decided to send the tweet and quickly delete it. When I tweeted, then the thumbnail appeared.

Should have also reworded this post's title differently too, instead of "Twitter Embed/Card isn't working". Thank you for your time and input though, and I apologize for any inconvenience.

[mcanouil]

From your updated _quarto.yml file, the card is valid -> https://cards-dev.twitter.com/validator
If it does not appear, it's because of DNS cache (wait a little) or because of Twitter itself.

Edit: In this case, I believe it's on Twitter ...

[ForBo7]

I also checked my card on this site, and got the same preview. I then figured out that when you actually send the tweet itself, then the card will properly render. Twitter's textbox, when composing the tweet, may also not properly render the thumbnail.

[mcanouil]

Last year the Twitter card validator tool was showing preview.
Now, it's a bit useless, you have to trust the "Card loaded successfully" message ^^

[jimjam-slam]

I've had similar problems with the Twitter card validator—"Card loaded successfully" but no preview. I also ended up just doing a test tweet 😫