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.

  • what do you mean with "fails"? do you see a broken image? – pasine Dec 27 '12 at 23:26
  • Added an image to show you what I mean about "failing." – Kenny Wyland Dec 28 '12 at 0:08
  • did you try to change from "property" to "name"? see dev.twitter.com/docs/cards – pasine Dec 28 '12 at 0:51
  • Yes, but the result is the same. – Kenny Wyland Dec 28 '12 at 0:52
  • have you checked error log ? Is there any error ? – mohit_rocks Dec 28 '12 at 6:13
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.

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

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

  • 2
    Could you maybe add some explanation to your code? – Mołot Apr 15 '14 at 6:24

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

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