#1

Description of issue:

Twitter doesn’t display the image for posts containing a summary_large_image on my Drupal 7 site.

URL affected (must be public):

https://www.ilri.org/news/ilri-supports-vaccination-against-rift-valley-fever-isiolo-county-kenya-after-outbreak

Note that my account here is new so I can’t post a link, but even in the Discourse post preview I get an get an image in the post preview!

Troubleshooting steps attempted:

The card validator can read my metadata tags successfully:

INFO:  Page fetched successfully
INFO:  23 metatags were found
INFO:  twitter:card = summary_large_image tag found
INFO:  Card loaded successfully

I have seen Twitterbot successfully fetch the page and the image in the Apache server logs (apparently several times, with different response sizes?):

199.16.157.180 - - [21/Apr/2021:08:03:19 +0100] "GET /news/ilri-supports-vaccination-against-rift-valley-fever-isiolo-county-kenya-after-outbreak HTTP/1.1" 200 23259 "-" "Twitterbot/1.0"
199.16.157.183 - - [21/Apr/2021:08:03:27 +0100] "GET /sites/default/files/styles/social_share/public/news/Sheep%20vaccination.jpg?itok=VYqpdk3H HTTP/1.1" 200 211354 "-" "Twitterbot/1.0"
199.16.157.181 - - [21/Apr/2021:08:03:27 +0100] "GET /sites/default/files/styles/social_share/public/news/Sheep%20vaccination.jpg?itok=VYqpdk3H HTTP/1.1" 200 211354 "-" "Twitterbot/1.0"
199.16.157.182 - - [21/Apr/2021:08:03:27 +0100] "GET /sites/default/files/styles/social_share/public/news/Sheep%20vaccination.jpg?itok=VYqpdk3H HTTP/1.1" 200 208458 "-" "Twitterbot/1.0"
  • The image in this post has dimensions 1200x630 (aspect ratio 1.90):
$ gm identify Sheep\ vaccination.jpg\?itok=VYqpdk3H
Sheep vaccination.jpg?itok=VYqpdk3H JPEG 1200x630+0+0 DirectClass 8-bit 217.1Ki 0.000u 0m:0.000005s
  • The image size is within the limits:
$ ls -lh Sheep\ vaccination.jpg\?itok=VYqpdk3H
-rw-r--r-- 1 aorth aorth 218K Apr 19 09:39 'Sheep vaccination.jpg?itok=VYqpdk3H'

More information:

  • The server is using TLS 1.2 (with an A rating on SSL Labs)
  • There is no CDN in front of our web server

What else is left for me to try?

#2

I would try making the url a direct link to a jpeg, without %20 in it… so instead of:

/sites/default/files/styles/social_share/public/news/Sheep%20vaccination.jpg?itok=VYqpdk3H

/sites/default/files/styles/social_share/public/news/Sheep_vaccination_VYqpdk3H.jpg

for example.

Just a guess though, no idea what the problem may be, but the server sending the image several times, with different response sizes seems suspect to me. (i got Content-Length: 222315)

#3

I’d be really surprised if the space in the filename was an issue, but you make a very good point about the content lengths, @IgorBrigadir. I just tried myself in Firefox and got two different content lengths for that same image:

185.211.135.160 - - [22/Apr/2021:08:21:11 +0100] "GET /sites/default/files/styles/social_share/public/news/Sheep%20vaccination.jpg?itok=VYqpdk3H HTTP/1.1" 200 226791 "-" "Mozilla/5.0 (X11; Linux x86_64; rv:89.0) Gecko/20100101 Firefox/89.0"
185.211.135.160 - - [22/Apr/2021:08:21:26 +0100] "GET /sites/default/files/styles/social_share/public/news/Sheep%20vaccination.jpg?itok=VYqpdk3H HTTP/1.1" 200 223252 "-" "Mozilla/5.0 (X11; Linux x86_64; rv:89.0) Gecko/20100101 Firefox/89.0"

With curl the length is something else entirely:

$ curl -I 'https://www.ilri.org/sites/default/files/styles/social_share/public/news/Sheep%20vaccination.jpg?itok=VYqpdk3H'
HTTP/1.1 200 OK
Date: Thu, 22 Apr 2021 07:41:43 GMT
Server: Apache/2.4.18 (Ubuntu)
X-Content-Type-Options: nosniff
Upgrade: h2
Connection: Upgrade
Last-Modified: Mon, 19 Apr 2021 06:39:42 GMT
ETag: "3646b-5c04d98406149"
Accept-Ranges: bytes
Content-Length: 222315
Content-Type: image/jpeg

Definitely weird. I’m checking with my web developers to see if they have any caching plugins or something that might behave differently depending on the user agent.

1 Like
#4

I’m seeing timeouts attempting to load that image so I don’t know if it relates to the space or query parameter, or something else that is upsetting the Twitterbot crawler.

#5

Thank you for all the replies and suggestions. I’m going absolutely insane trying to troubleshoot this. I thought there might be an issue with Drupal or some PHP nonsense, so I set up a static HTML page with Twitter card metadata and I am close to throwing my computer out the window.

The Twitter Card validator does not show an image preview. Here is the verbose output:

INFO:  Page fetched successfully
INFO:  12 metatags were found
INFO:  twitter:card = summary_large_image tag found
INFO:  Card loaded successfully

There is no CDN or cache in front of our server, and I see Twitterbot/1.0 successfully request the page and then the image specified in the card metadata:

199.16.157.181 - - [28/Apr/2021:14:06:21 +0100] "GET /twitter-test/ HTTP/1.1" 200 7610 "-" "Twitterbot/1.0"
199.16.157.182 - - [28/Apr/2021:14:06:21 +0100] "GET /twitter-test/DSC_0488.JPG HTTP/1.1" 200 215821 "-" "Twitterbot/1.0"
199.16.157.180 - - [28/Apr/2021:14:06:21 +0100] "GET /twitter-test/DSC_0488.JPG HTTP/1.1" 200 215821 "-" "Twitterbot/1.0"
199.16.157.181 - - [28/Apr/2021:14:06:21 +0100] "GET /twitter-test/DSC_0488.JPG HTTP/1.1" 200 215821 "-" "Twitterbot/1.0"
199.16.157.183 - - [28/Apr/2021:14:06:21 +0100] "GET /twitter-test/DSC_0488.JPG HTTP/1.1" 200 215821 "-" "Twitterbot/1.0"
199.16.157.182 - - [28/Apr/2021:14:06:22 +0100] "GET /twitter-test/DSC_0488.JPG HTTP/1.1" 200 215821 "-" "Twitterbot/1.0"

Several different Twitterbot instances request this image, though the size is not correct (by an order of magnitude!). The content length in the requests above is 215821, but the size of the image on disk is 1860045. If I request the image with curl, wget, or Firefox the content length is still wrong, but only by a few bytes:

182.113.175.160 - - [28/Apr/2021:14:33:43 +0100] "GET /twitter-test/DSC_0488.JPG HTTP/1.1" 200 1867195 "-" "Mozilla/5.0 (X11; Linux x86_64; rv:89.0) Gecko/20100101 Firefox/89.0"
182.113.175.160 - - [28/Apr/2021:14:34:03 +0100] "GET /twitter-test/DSC_0488.JPG HTTP/1.1" 200 1866631 "-" "curl/7.76.1"
182.113.175.160 - - [28/Apr/2021:14:34:22 +0100] "GET /twitter-test/DSC_0488.JPG HTTP/1.1" 200 1867375 "-" "Wget/1.21.1"

I made a second static HTML page to test. This one is exactly the same as the first one, except the Twitter card image URL points to the same image on another server:

Now the Twitter Card validator shows the image! Here is the validator status:

INFO:  Page fetched successfully
INFO:  12 metatags were found
INFO:  twitter:card = summary_large_image tag found
INFO:  Card loaded successfully

The logs on my other server show:

199.16.157.183 - - [28/Apr/2021:15:41:18 +0200] "GET /2020/04/gadaras-octagonal-martyrium/DSC_0488.JPG HTTP/1.1" 200 1860045 "-" "Twitterbot/1.0"

The content length of the response here is correct! What the hell is going on? The first server is Apache HTTPD and it returns the correct image size for Firefox, curl, and wget, but not for Twitterbot. The second server is nginx and the file is served straight from the disk with try_files. Is this some bizarre Apache configuration issue?

1 Like
#6

The thing i would worry about, is that https://www.ilri.org/twitter-test/DSC_0488.JPG image is too large.

The docs say: Summary with large image | Docs | Twitter Developer Platform

Images for this Card support an aspect ratio of 2:1 with minimum dimensions of 300x157 or maximum of 4096x4096 pixels. Images must be less than 5MB in size.

but in practice, i think this is wrong - frequently anything over 1MB fails, i would aim for something much smaller ~500kb for a twitter image.

#7

but in practice, i think this is wrong - frequently anything over 1MB fails, i would aim for something much smaller ~500kb for a twitter image.

Yeah it feels like the Twitter docs could be out of date or use some refreshing. What’s weird is that the same exact image works—on the exact same static HTML page above—if I change the URL in the twitter:image meta tag to another server.

I resized the image to under 200K and created a third test page. The card validator still shows no image. Output from validator:

INFO:  Page fetched successfully
INFO:  12 metatags were found
INFO:  twitter:card = summary_large_image tag found
INFO:  Card loaded successfully

The Apache HTTPD server log shows me requesting the image first in Firefox, then the Twitterbot requesting the page and the image (several times):

186.22.135.160 - - [28/Apr/2021:16:47:13 +0100] "GET /twitter-test-three/DSC_0488-630.JPG HTTP/1.1" 200 196954 "-" "Mozilla/5.0 (X11; Linux x86_64; rv:89.0) Gecko/20100101 Firefox/89.0"
199.16.157.181 - - [28/Apr/2021:16:47:26 +0100] "GET /twitter-test-three/ HTTP/1.1" 200 7617 "-" "Twitterbot/1.0"
199.16.157.182 - - [28/Apr/2021:16:47:26 +0100] "GET /twitter-test-three/DSC_0488-630.JPG HTTP/1.1" 200 196375 "-" "Twitterbot/1.0"
199.16.157.182 - - [28/Apr/2021:16:47:27 +0100] "GET /twitter-test-three/DSC_0488-630.JPG HTTP/1.1" 200 196375 "-" "Twitterbot/1.0"
199.16.157.181 - - [28/Apr/2021:16:47:27 +0100] "GET /twitter-test-three/DSC_0488-630.JPG HTTP/1.1" 200 196375 "-" "Twitterbot/1.0"
199.16.157.182 - - [28/Apr/2021:16:47:28 +0100] "GET /twitter-test-three/DSC_0488-630.JPG HTTP/1.1" 200 196375 "-" "Twitterbot/1.0"
199.16.157.180 - - [28/Apr/2021:16:47:28 +0100] "GET /twitter-test-three/DSC_0488-630.JPG HTTP/1.1" 200 196375 "-" "Twitterbot/1.0"

At least the content length of the image in the response is similar to the original now… but this is crazy, no?

#8

This topic was automatically closed 14 days after the last reply. New replies are no longer allowed.