sybrew/the-seo-framework

Twitter cards not rendering image thanks to meta tags twitter:image:width & twitter:image:height

Closed this issue · 4 comments

tobiaswiesner commented

Describe the bug
The Twitter card image is not getting rendered by Twitter if any image other then the fallback image is set (e.g. image of the page/article or custom image). It seems, that this is due to the meta tags "twitter:image:width" and "twitter:image:height", which are automatically added for all other then the global fallback image. Twitter doesn't require them and it seems that they are breaking the rendering of the cards. All images have the same indexing settings (allowed by robots.txt) and are hosted in the same folder structure (domain.com/app/uploads/xyz)

This mentioned tags were getting introduced with this old issue: #11.

How to reproduce the bug
Steps to reproduce the behavior:

  1. Set a global fallback image for social media and activate Twitter cards
  2. Add the URL in a twitter post and observe the rendered card -> comes with image
  3. Set a preview image or custom image for social media in the same page/article -> additional tags will be added and Twitter card will not render the image anymore

Expected behavior
Twitter cards should render every image

sybrew commented

The image dimensions are set whenever the image uploader form is used. No dimensions are rendered when a plain URL is entered manually, as you're probably experiencing with the fallback URL.

Still, I do not think the twitter:image:width/twitter:image:height tags are to blame here -- I cannot replicate the issue.

Something else is going on, and I'd love to inspect a few pages that do and don't work from your website. If you do not feel comfortable sharing the URLs here, feel free to forward those URLs to me confidentially.

tobiaswiesner commented

Ah ok, good to know about the uploader form. A few examples:

We also tried it with a 1.5 ratio (1200x600px) as Twitter is recommending that but it's the same result.

sybrew commented

Hello! Sorry for my belated follow-up.

Unfortunately, Twitter removed various debugging features I relied upon discovering issues.
I will remove the twitter:image:height and width outputs -- those have been defunct since 2015 but shouldn't affect the rendering. This change will be implemented in TSF v4.2.8, scheduled for Tuesday.

Twitter lists many things to check regarding this issue: https://twittercommunity.com/t/card-error-unable-to-render-or-no-image-read-this-first/62736.
I tested all issues, and your site passed without fault.

Still, a quirk on your website I found is that it starts with a newline; the document opens on line 2 instead of 1.
This often happens because someone closes a PHP file with ?>. That is a bad practice because many editors add an empty line at the end of each file, resulting in a newline printed. Twitter may be bothered by this.

So, if removing the Twitter image dimension tags yields no positive results (do wait a day for Twitter's caches to clear), then you should try resolving the extraneous newline issue.

tobiaswiesner commented

Thanks for resolving that issue. After updating TSF to version 4.2.8 and removing the unnecessary height tags, the preview is now working as expected.

  • 🎉1