Image Not Displaying on Twitter Cards


#1

Issue:

None of my pages at my site are displaying the image in the image cards, even though the validator is not displaying an error and the meta tag is correctly set.

URL affected:

Troubleshooting steps tried already:


#2

So what troubleshooting steps have you tried from the linked article?

Are you sure that the images are valid and can be read by the crawler?


#3

The images are valid. I tried everything from your docs. The problem perists. Other sites that use og:image display the image correct. Using the twitter:image tag is not working and display the image. Your validatior doesn’t event show an image, when thigh it says everything is valid and my site is whitelisted.


#4

First, let’s try fetching the image.

$ curl -A Twitterbot "http://invocation.co/modules/Repository/Resources/vendor/thumbnail/generate.php\?src\=https%3A%2F%2Fimg.youtube.com%2Fvi%2FtiVL3hIoMgE%2Fhqdefault.jpg\&w\=1920\&h\=960\&bg\=000000\&f\=png\&zc\=T\&hash\=fbdc96e4e4606c41554a84487d66cf70"
<!DOCTYPE HTML PUBLIC "-//IETF//DTD HTML 2.0//EN">
<html><head>
<title>403 Forbidden</title>
</head><body>
<h1>Forbidden</h1>
<p>You don't have permission to access /modules/Repository/Resources/vendor/thumbnail/generate.php\
on this server.<br />
</p>
</body></html>

Now, let’s check why that might be denied.

$ curl http://invocation.co/robots.txt
User-agent: *
Disallow: /app
Disallow: /config
Disallow: /docs
Disallow: /images
Disallow: /install
Disallow: /javascript
Disallow: /lib
Disallow: /locale
Disallow: /modules    <--- This prevents ALL user-agents from accessing your image.
Disallow: /plugins
Disallow: /system
Disallow: /themes
Disallow: /admin.php
Disallow: /ajax.php
Disallow: /jcss.php
Disallow: /mo2json.php
Disallow: /user.php

As stated in the troubleshooting post and page, your images MUST be accessible to Twitterbot (we obey Google’s robot specification). This is clearly not the case for your site. You’ll need to resolve this.


#5

Andy,

User agents are not prevented from accessing the image. If you were you go directly to the URL in the browser, you will see the image. The line in the robots file is not preventing the image, because PHP is doing a pass through to the actual location on the server where the image is stored (which is not in the /modules location):

http://invocation.co/modules/Repository/Resources/vendor/thumbnail/generate.php/?src=https%3A%2F%2Fimg.youtube.com%2Fvi%2FtiVL3hIoMgE%2Fhqdefault.jpg&w=1920&h=960&bg=000000&f=png&zc=T&hash=fbdc96e4e4606c41554a84487d66cf70

No other site (i.e. Facebook, Google, etc.) has a problem accessing the same image URLs from the meta tags. Only Twitter has an issue getting the image. Also, your code sample doesn’t appear to be accurate.

I executed a curl at http://onlinecurl.com, and the image loads fine. Insert this code at the site, to see the image returned:

curl --user-agent Twitterbot http://invocation.co/modules/Repository/Resources/vendor/thumbnail/generate.php/?src=https%3A%2F%2Fimg.youtube.com%2Fvi%2FtiVL3hIoMgE%2Fhqdefault.jpg&w=1920&h=960&bg=000000&f=png&zc=T&hash=fbdc96e4e4606c41554a84487d66cf70

So, what else could be the problem?


#6

@andypiper Any comments to my last reply? Please advise. Thanks.


#7

I got it to work, by doing a redirect on the image location, instead of pass-through in my code. Again, only Twitter has the issue with retrieving the image via pass-through, so it is something on Twitter’s side preventing it from occurring. You can see now that I have the robots.txt file the same as it was before, and the image is able to be displayed, only if I do the redirect on the location.

Can you look into this further on Twitter’s end, to only pass-through to occur, instead of me having to do a redirect on all my images just for Twitter? Thanks.


#8

We are unlikely to be able to make this change at this time - this is how the cards crawler is designed.


#9

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