Closed lauracowen closed 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">
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?
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.
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
.
og:image
showing)https://openliberty.io/blog/2022/06/03/liberty-deep-dive.html
But not working if I draft a tweet!
og:image
ignored)https://openliberty.io/blog/2022/06/09/time-based-log-rollover-22007-beta.html
At least this is consistently broken with a draft tweet
I got the same results in the validator as you, using the same URLs. I don't understand why one URL works and the other doesn't.
Today I Learned...
Twitter will dynamically update tweet preview cards. I can now see that Emily's tweet is showing the og:image
.
I am thinking of keeping the removal of twitter:image
given this new evidence
Closing as fixed
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:![image](https://user-images.githubusercontent.com/3322532/174104159-2521f2c2-1c04-42c4-be97-56b48bf3699f.png)
and linkedin seems to render it:![image (1)](https://user-images.githubusercontent.com/3322532/174104215-0742a15b-57d0-4277-85cf-b89b91f9ec80.png)