3

I'm trying to add Twitter Cards to my site so that tweets referencing my blog posts will be expandable and show extra info. I've installed the metatag module, enabled the Metatag: Twitter Cards sub-module as well as patched the Twitter Cards sub-module to fix a problem with it generating <link /> tags instead of <meta /> tags.

When I include a twitter:image tag, the Twitter Card fails, but when I remove it, it works just fine. What am I doing wrong?

<meta property="twitter:url" content="http://liberalgeek.com/content/why-do-atheists-celebrate-christmas" />
<meta property="twitter:card" content="summary" />
<meta property="twitter:description" content="I can&#039;t speak for all atheists, I can only speak for myself, so please leave a comment below and explain why you celebrate Christmas! When I hear someone ask, &quot;Why do atheists celebrate Christmas?&quot; my first thought often is: Better Question: Why do Christians celebrate Christmas?" />
<meta property="twitter:creator" content="@kennywyland" />
<meta property="twitter:title" content="Why do Atheists celebrate Christmas?" />

<!-- the following line causes the problem -->
<meta property="twitter:image" content="http://liberalgeek.com/sites/default/files/styles/large/public/Christmas%20Tree.jpg" />

I have tried <meta property= as well as <meta name= and they behave the same way.

The image is publicly visible, it's large enough without being too large... what is wrong?

To be clearer, by "failing" I mean that Twitter refuses to acknowledge there is a Twitter Card for that URL, so the preview is not shown along with the tweet. When I test this on the twitter card preview page, this is the result I get:

enter image description here

However, when I remove the twitter:image tag and generate the preview again it works just fine and looks like this:

enter image description here

During further testing I found the STRANGEST thing. If I change the domain from liberalgeek.com to www.liberalgeek.com, the Twitter Card successfully generates, although the thumbnail image is a broken image. (That may just be due to high twitter volume, but I'm not sure.)

enter image description here

I want the Twitter card to work, even if they don't include the unnecessary www.

Notice that:

  • The .htaccess file is the standard one installed with Drupal
  • I don't think I'm using gzip compression
  • Apache isn't sending back the wrong headers
  • The error log doesn't shown any error
  • The access log shows entries with a return code equal to 200, and a correct content length value, when Twitter tries to access the image

I found a site on my server which twitter handles just fine:

<meta property="twitter:image" content="http://www.geekqi.com/images/StylizedYinYangRedLucida.png" />

But I'm not sure what the difference is between this and all of my other sites.

15
  • what do you mean with "fails"? do you see a broken image?
    – pasine
    Commented Dec 27, 2012 at 23:26
  • Added an image to show you what I mean about "failing." Commented Dec 28, 2012 at 0:08
  • did you try to change from "property" to "name"? see dev.twitter.com/docs/cards
    – pasine
    Commented Dec 28, 2012 at 0:51
  • Yes, but the result is the same. Commented Dec 28, 2012 at 0:52
  • have you checked error log ? Is there any error ? Commented Dec 28, 2012 at 6:13

4 Answers 4

3

I made a test with this values

<meta name="twitter:url" content="http://liberalgeek.com/content/why-do-atheists-celebrate-christmas" />
<meta name="twitter:card" content="summary" />
<meta name="twitter:creator" content="@kennywyland" />
<meta property="twitter:description" content="I can&#039;t speak for all atheists, I can only speak for myself, so please leave a comment below and explain why you celebrate Christmas! When I hear someone ask, &quot;Why do atheists celebrate Christmas?&quot; my first thought often is: Better Question: Why do Christians celebrate Christmas?" />

<meta name="twitter:title" content="Why do Atheists celebrate Christmas?" />

<!-- the following line causes the problem -->
<meta name="twitter:image" content="http://graphics8.nytimes.com/images/2012/02/19/us/19whitney-span/19whitney-span-articleLarge.jpg">

Changing the image, the card works normally in the preview tool.
I would try to check if you have some restriction on the file.
Have a look at the crawling section of the API docs

Twitter's crawler will respect robots.txt when scanning URLs. If a page with card markup is blocked, no card will be shown. If an image URL is blocked, no thumbnail or photo will be shown.

UPDATE As suggested by the author of the question, changing robot.txt could not be enough. Since Twitter could have cached your file, you need to wait at least 24 hours to let it expires.
I add that the same problem could be found not just on robot.txt file, but also on images. Indeed, wrong Twitter cache could lead to a 404 error and a broken preview image.

0
1

To fix this issue do the following: For twitter go to https://cards-dev.twitter.com/validator and insert the webpage URL and then hit Preview card, this will clear twitter cache.

For facebook go to https://developers.facebook.com/tools/debug/sharing/ and insert the webpage URL (make sure Sharing Debuger tab is active)and hit Debug, this will clear your cache. If you still see the old image Scarp the URL by pressing Scrap Again button.

0

I wonder if the Twitter API balks on the %20 space in the image filename.

To eliminate that possibility, it's worth testing with an image URL that has no space in the filename,

i.e:

<meta property="twitter:image" content="http://liberalgeek.com/sites/default/files/styles/large/public/Christmas-Tree.jpg" />

vs the current:

<meta property="twitter:image" content="http://liberalgeek.com/sites/default/files/styles/large/public/Christmas%20Tree.jpg" />
1
-1

Try this: <meta name="twitter:image:src" content="http://liberalgeek.com/sites/default/files/styles/large/public/Christmas%20Tree.jpg" />

1
  • 2
    Could you maybe add some explanation to your code?
    – Mołot
    Commented Apr 15, 2014 at 6:24

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Not the answer you're looking for? Browse other questions tagged or ask your own question.