Simple Twitter Cards for Jetpack

Jetpack’s “Publicize” feature automatically adds a set of OpenGraph and optionally Twitter card tags to WordPress posts. I previously described manually setting a default OpenGraph image. Today we’ll have a look at manually defining Twitter cards. (Note: this post is an enhanced version of material originally added to the previous post.)

Enabling Twitter Cards

If you have a Twitter connection set up, Jetpack will also add Twitter card tags. This used to be a major issue since Jetpack would emit different card types depending on content heuristics – and Twitter required that each card type was approved separately. However, this all changed on 3 July 2015 when Twitter cut down its static card types to just two (Summary and Summary with Large Image) while also dropping the requirement to have them approved. Jetpack uses these two card types exclusively, as far as I can tell, so there should be no more trouble with Twitter approval.

One minor point remains, namely the fact that Twitter cards require your Twitter profile name which Jetpack cannot know by default. You must set up and activate a Twitter connection to do that, and I’d rather not have Jetpack automatically tweet things for me. If you always want just one card type (Summary in my case) the workaround is simple: just disable Jetpack’s Twitter card support entirely and add your own tags. Only two are needed, with one exception discussed below. Here’s the code for your theme’s functions.php file (replace @ChrisNahr with your own handle):

/**
 * Override Jetpack's Twitter card analyzer. We just need summary cards,
 * and Jetpack needs a Twitter connection to know the user name ("site").
 * Christoph Nahr 2017-02-26 
 */
add_filter( 'jetpack_disable_twitter_cards', '__return_true' );
add_filter( 'jetpack_open_graph_tags', function( $tags ) {
    $tags['twitter:site'] = '@ChrisNahr';
    $tags['twitter:card'] = 'summary';

    /*
     * For posts with attached images, retrieve small thumbnail
     * that hopefully adheres to Twitter's 1 MB size limit.
     * OpenGraph image tags always contain full size version.
     */
    if ( !is_archive() && !is_home() && !is_search() ) {
        global $post;
        $thumb = get_post_thumbnail_id( $post->ID );
        if ( $thumb ) {
            $image = wp_get_attachment_image_src( $thumb, 'thumbnail' );
            if ( $image ) {
                $tags['twitter:image'] = esc_url( $image[0] );
            }
        }
    }

    return $tags;
});

Adding Thumbnail Images

This code does not normally emit specific twitter:image tags. Twitter defaults card images to the OpenGraph tag og:image which Jetpack emits automatically anyway. However, there is one specific case where this becomes a problem, namely if the image file size is 1 MB or larger.

Twitter won’t downscale such images but simply ignores them. Jetpack, on the other hand, will not search for a smaller og:image because OpenGraph is mostly consumed by Facebook (which designed this API), and Facebook loves huge images. So Jetpack’s built-in Twitter card support always emits a separate twitter:image tag, using a different algorithm that tries to obey the 1 MB size limit.

The if block in the above code is a similar though greatly simplified algorithm. I only cover the specific case of individual posts with attached images because those are always photo galleries on my weblog, and that’s the only situation where the og:image is likely (much) larger than 1 MB. What my code does is request the smallest “thumbnail” version of the attached image. I configured that size as 200×200 in my WordPress media settings which should always make Twitter happy.

Twitter Robot Note

Twitter pulls all remaining information from OpenGraph tags, so all posts should now properly display a Summary card. One final note: For some bizarre reason Twitter observes robots.txt when gathering Card information, so you won’t see any images that reside in folders blocked by robots.txt. After unblocking it may take a week until Twitter re-crawls your site.