🙋‍♂️ Can Anyone Explain Twitter Cards to me?

Waylon Walker - Jul 11 '20 - - Dev Community

Can someone explain how or why twitter cards render differently from device to device? I understand that twitter cards a built from meta tags, the full list can be found in their docs.


Posted on the same day, here is a great article by @ranaemad that outlines how to get social cards to work.


On to my issues with social cards.

Rendered on Mobile

Mobile Looks fine.

rendered card

Not Rendered on Desktop

On Desktop it is not picking up the image.

not rendered card

Twitter Card Validator

The Validator renders the card correctly. I tried the official twitter card validator, as well as heymeta.com, and metatags.io. All look good.

rendered card with validator

Can Cards be updated?

even with a redirect?

I tried setting up a pinned tweet that uses a netlify redirect to always keep my latest post up to date. This one looks good in the validator and even updates properly. On desktop it doesn't render the image. On mobile it renders only the original image.

I have heard that you need to hit the card validator to update cards? I am not sure if this is true, but for me, this is not even updating the card. I am not sure if its the redirect or even updating the image.

Help

  • Why doesn't it render on Desktop?
  • Can I update the card using a redirect?

👀 see an issue, edit this post on GitHub

. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .