Twitter Cards in action

Twitter Cards in actionI first wrote about Twitter Cards in June, when Twitter had just announced them, today I got a tweet from Paul Savage who noticed that they were now enabled for yoast.com. That’s super awesome news as it means that the implementation I did in my WordPress SEO plugin works.

Of course I had to do some tweaking afterwards, because as it turns out Twitter’s scraper for the Twitter Card data is easily confused (it doesn’t understand how to parse multiple og:images meta tags). But let me show you what it means if it works well; if you tweet an article from this site, you’ll see a normal tweet with a new “View Summary” link:

Tweet with summary button

When you click that View summary link, the link “expands” and you’ll see this, the complete Twitter Card:

Expanded Twitter Card

As you might notice my Twitter account is there twice, the top one is because I’m the author of that article, the second one is because I set the @yoast account as the main account for this site. So if you see an article tweeted that’s been written by Michiel, you’ll see his twitter account on top and the main @yoast account in the bottom:

Twitter Card Michiel

Can I have Twitter Cards for my site?

I know you’re asking yourself that question. I tested some sites that are running my SEO plugin on which I knew the Twitter Cards implementation in it is activated, but unfortunately couldn’t find any working examples outside of my own site yet. It seems that you really have to apply to participate with your site next to having the functionality active on your site (you can activate it on the SEO -> Social menu).

So, the next step is another update of my SEO plugin which improves a bit on the current Twitter Card implementation now that I can test properly, expect that somewhere early next week. This update will also rely on OpenGraph when activated too where possible so you don’t have another 10 lines of Twitter meta data but instead only 3 or 4 lines for Twitter and the rest of the data coming from OpenGraph. Looking forward to seeing this work on other sites that run my SEO plugin!

Tags:


Yoast.com runs on the Genesis Framework

Genesis theme frameworkThe Genesis Framework empowers you to quickly and easily build incredible websites with WordPress. Whether you're a novice or advanced developer, Genesis provides you with the secure and search-engine-optimized foundation that takes WordPress to places you never thought it could go.

Read our Genesis review or get Genesis now!

49 Responses

  1. DaveBy Dave on 5 September, 2012

    Twitter just approved one of my sites that uses your SEO plugin. It was very exciting to see it in action.

    If we use Facebook’s own plugin to handle the OpenGraph data on the site, will that conflict with the update you’re talking about that consolidates?

    • Joost de ValkBy Joost de Valk on 6 September, 2012

      Hey Dave, good question. I’m actually working on a patch for the official Facebook plugin so I can filter their output, in which case my SEO plugin would just filter the FB output where needed and default to that. As soon as they’ve accepted that I can then also combine the two.

      For now, I would just check the Twitter box, as soon as the update is in place it will then leave out the meta tags that aren’t needed.

      • DaveBy Dave on 7 September, 2012

        That will be amazing. Thanks!

  2. DennisGBy DennisG on 5 September, 2012

    WooHaa, congrats on this!
    And great job of having this feature already in your SEO plugin.

    DG

  3. Yanko TsvetkovBy Yanko Tsvetkov on 5 September, 2012

    Actually, I have Twitter cards activated thanks to your plugin. And it seems to be working even with past posts, which is awesome!

  4. MikeBy Mike on 5 September, 2012

    I have Twitter Cards working for my site, thanks to your plugin — see:

    https://twitter.com/nfcw/status/243444234286428161

    • BerryBy Berry on 14 September, 2012

      Proficiat!
      Maar hoe heb je dat nu gedaan? Ik heb de functie aangezet in de SEO plugin en me aangemeld bij Twitter. Maar moet ik nu verder iets ondernemen?En zo ja, waar?
      Dank voor je antwoord. Geweldig weekend gewenst!

    • BerryBy Berry on 19 September, 2012

      Well done,

      But how did you do it? I have sitched on the function in the SEO plugin and applied with Twitter. But what steps do I further have to take?

      • MikeBy Mike on 19 September, 2012

        Once you have turned it on in the plugin and filled out the form at Twitter ( https://dev.twitter.com/form/participate-twitter-cards ) you just sit back and wait.

        I don’t know how long it takes — it could be hours, days or weeks. I applied when Yoast first mentioned Twitter cards a few weeks ago, and I noticed it was working only quite recently.

  5. BenBy Ben on 5 September, 2012

    The sign up form requires
    Example Summary Card URL:
    Example Photo Card URL:

    I don’t know what url to add because it is created via WordPress SEO plugin.

    • Tiffiny TaylorBy Tiffiny Taylor on 6 September, 2012

      Great question, would love a response.

      • DaveBy Dave on 6 September, 2012

        Put a link to a page on your site that has the plugin activated.

        • Tiffiny TaylorBy Tiffiny Taylor on 6 September, 2012

          Any link from the site?

          • DaveBy Dave on 6 September, 2012

            Pretty much. Twitter needs a URL to scan in order to see if you’ve done the correct tagging. So basically any URL on your site that demonstrates how you tag the rest of your site should work. I run a news site so I submitted a URL of an article since it had the correct info.

            Hope that helps.

      • Joost de ValkBy Joost de Valk on 6 September, 2012

        What Paul said above :) I’d point to a post with an image in it.

  6. Hannes JohnsonBy Hannes Johnson on 5 September, 2012

    Twitter Cards has been active on the Tempo blog for a while now thanks to your plugin :)

    Here is an example of a tweet from July:
    https://twitter.com/tempoplugin/status/223843089524072448

    • Hannes JohnsonBy Hannes Johnson on 7 September, 2012

      This is a tweet from April with a Twitter Cards summary:
      https://twitter.com/tempoplugin/status/190850500638425089

      So I guess it’s retroactive?

      But there is no preview image displayed with this tweet – probably because the twitter:image is too long (not the right dimensions).

      • Joost de ValkBy Joost de Valk on 7 September, 2012

        It’s not because of the image, they’d just resize. I haven’t figured out why it doesn’t work yet and since there’s no debug tool, that’s kinda hard ;)

        • Hannes JohnsonBy Hannes Johnson on 7 September, 2012

          Do the preview images need to be square (same height and width)? Maybe it’s similar to Open Graph images on Facebook – the proportion between height and width can’t be more than 1:3 or 3:1?

  7. Joshua @ContribyBy Joshua @Contriby on 6 September, 2012

    Whoo. Yoast, you constantly blow me away with your attention to detail and dedication to your FREE products. My friend told me he wants to use sqaurespace and I am like, “They don’t have Yoast!”

  8. Tiffiny TaylorBy Tiffiny Taylor on 6 September, 2012

    Clear & pertinent info without unnecessary chit-chat; thank you!
    & don’t forget to Stand Up!

  9. Nadi TKJBy Nadi TKJ on 6 September, 2012

    this is amazing :)

  10. Frederico GorskiBy Frederico Gorski on 6 September, 2012

    So… I have to apply and most likely have the twitter box checked on your plugin? I have done the second, but when I click on the twittercard link, It asks me to log in to twitter, but never accept my username. I go to twitter.com and log in, then return to twitter card, and it still doesn’t recognize me as a logged in user…

    • Frederico GorskiBy Frederico Gorski on 6 September, 2012

      Sorry, but my twitter was created long ago, I never realised I missed including my website url on my profile. Go ahead and Duh me. sorry. Please, delete these two messages.

  11. Kyle SandersBy Kyle Sanders on 6 September, 2012

    Ahhhh, yes!

    This is awesome. I love your plugin!

  12. wpfaqsBy wpfaqs on 6 September, 2012

    actually didn’t know about twitter cards :( now i know by this post tnx @Joost

  13. Arafin ShaonBy Arafin Shaon on 8 September, 2012

    Applied for it by your plugin lets see what happen

  14. Gautam DoddamaniBy Gautam Doddamani on 8 September, 2012

    twitter cards are awesome and also the new related posts block you are displaying at the end of the post :)

  15. torcwebdesignBy torcwebdesign on 8 September, 2012

    Thanks for posting such an important content.
    Very nice.

  16. AndyBy Andy on 8 September, 2012

    It looks great …did you by any chance come across a way to to re-lint / re-scrape …it sems like it caches just one time, and then stays forever …!?

  17. Ankul BararBy Ankul Barar on 9 September, 2012

    You are God Sent! You have it all in your plugins! Amazing!

  18. yansBy yans on 10 September, 2012

    one (Stupid) question :p

    how to set different twitter card type?
    i mean, we should be able to change it to
    - summary
    - photo
    - player

    i did a quick check on a source code..
    /* Display the Twitter card type. */
    This defaults to summary but can be filtered using the
    wpseo_twitter_card_type
    filter.

    but i dont know how to set it, anybody?

    Great Works!!

  19. hansBy hans on 13 September, 2012

    hi yoast, thanks for this info.

    i use the genesis framework. i was wondering whether there is a plugin that you use for the “Share It” box that appears under your posts.

    i know you’re a busy guy and i have one other question. do you think it’s a good idea to have some sort of “print friendly” plugin on your website. my posts are long and i know people would just rather print them.

    fyi – i am a clicky subscriber now – it’s awesome.

  20. FabrizioBy Fabrizio on 26 September, 2012

    Hi,

    I just got an email this morning telling me our website has been accepted for expanded tweets.

    Super-excited I triple-checked but I still cannot see anything.

    Do you think I should just keep calm and wait a little more or maybe I set your plugin somehow wrong?

    Thanks!

    • Joost de ValkBy Joost de Valk on 26 September, 2012

      No I just checked, it looks right in the preview, just caching on Twitters side probably.

      • FabrizioBy Fabrizio on 26 September, 2012

        Great!

        Thank you very much! ;)

  21. MarkBy Mark on 26 September, 2012

    I’m using your WordPress SEO Plugin with Twitter Cards enabled but when I use the Twitter Cards testing tool .. https://dev.twitter.com/docs/cards/preview .. I get the following error:

    - Our fetcher fails to fetch image at URL http://www.mydomainname.com/blah/blah.gif.
    Fetcher response code: DENIED_BV_ROBOTSTXT.
    HTTP response code: 0

    In my Robots.txt file I have:
    Disallow: /wp-content/plugins/
    Is this wrong?

    • Joost de ValkBy Joost de Valk on 26 September, 2012

      Hi Mark,

      I don’t think that line is wrong, but are you perhaps also blocking wp-content/uploads/ ? Because Twitter does need access to the images too.

      After changing your robots.txt you’ll have to wait for 24 hours to get them to update the cache.

      • MarkBy Mark on 28 September, 2012

        I unblocked /wp-content/plugins/ from my robots.txt file and re-submitted via Yoast’s link. Two days later I received an email to say I’ve been accepted. Once again, thank you Joost for some awesome top tips!

  22. CodingStuffBy CodingStuff on 26 September, 2012

    Just got my ‘Twitter Cards has been approved.’ email. Looking forward to see it in action.
    Thanks for the heads up!

  23. JakolienBy Jakolien on 27 September, 2012

    Hi Joost,

    I just activated the feature in your awesome plugin on my site but reading through multiple articles and the Twitter developer copy I am not really sure about what to add to the section once off?

    Can you explain what you need to do to activate for the first time before applying for the feature with Twitter?

    Thanks in advance!
    Jakolien

    • Joost de ValkBy Joost de Valk on 28 September, 2012

      You don’t need to do more than just fill in the form I linked to and activate the feature :)

      • JakolienBy Jakolien on 28 September, 2012

        Just submitted for both my sites! #exciting Have a great weekend! Cheers, Jakolien

  24. Joan LanzagortaBy Joan Lanzagorta on 1 October, 2012

    Hi, I just got an e-mail saying that my application was incomplete. When using Twitter Cards Preview Tool I get the following:

    Fetcher response code: OK
    MISSING_TAG: twitter:title

    Please help – it seems that the twitter:title tag is missing. I reviewed source code and yes, it seems it has all other Twitter Cards meta tags except twitter:title.

  25. Hannes JohnsonBy Hannes Johnson on 2 October, 2012

    I noticed one thing about Twitter Cards – I updated the (meta/og/twitter) description for one of my pages and the next time I posted a link to it on Twitter I didn’t see a summary for that tweet (even though it worked before). But a few days later, when I posted a link to that page on Twitter again I did see a summary.

    So, it’s possible that if you’re changing the Twitter Cards details Twitter needs a couple of days to crawl your site again, or something…

    Just FYI, in case this happens to other people :)