OpenLiberty / openliberty.io

Open Liberty website

https://openliberty.io

Other

54 stars 40 forks source link

Open Graph images for blog posts not displaying on Twitter (but are fine on LinkedIn) #2720

Closed lauracowen closed 2 years ago

lauracowen commented 2 years ago

The open graph images (Twitter image picked up from a blog post) doesn’t seem to be working at the moment.

For example, the recent Tweet of this blog post just uses the default image: https://twitter.com/emilyfhjiang/status/1536280727553187840

A different image has been specified in the source: open-graph-image: https://openliberty.io/img/blog/deepdive.png

Looking back, another recent post tweeted in early May is also defaulting the image, even though a different image file is, again, specified in the source header: https://twitter.com/emilyfhjiang/status/1521791420201377792 open-graph-image: https://openliberty.io/img/blog/blog_microstream_starter.png

On further investigation by @mbroz2 ...

for some reason it's padded with spaces, so that may be why:

and linkedin seems to render it: image (1)

kinueng commented 2 years ago

I agree we should remove the starting and trailing whitespaces in the og:image property, however I think there is a bigger problem.

Per Twitter's documentation, they look for twitter metadata before falling back to Open Graph metadata https://developer.twitter.com/en/docs/twitter-for-websites/cards/guides/getting-started#opengraph

When the Twitter card processor looks for tags on a page, it first checks for the Twitter-specific property, and if not present, falls back to the supported Open Graph property.

We currently always set the Twitter specific image property on all blog posts <meta name="twitter:image" content="https://openliberty.io/img/twitter_card.jpg">

lauracowen commented 2 years ago

Ah....so we're effectively, for Twitter, overwriting our own Open Graph property. Could we automatically set the Twitter specific image property to whatever is set for the Open Graph property?

kinueng commented 2 years ago

I decided to remove the twitter:image property completely. Since the front matter attribute for our blog Asciidoc files is open-graph-image, I didn't want to tie the attribute to the Twitter property. I will trust Twitter will fallback (per their documentation) to the og:image property. I will test to confirm.

kinueng commented 2 years ago

The changes are now in production. I learned that the preview picture will not show if we use our test site URLs due to their robots.txt. Unfortunately, I am still getting a lot of mixed results with the new changes to only rely on og:image.