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.
This is what I was looking for :)
Thanks for sharing!