Blog

Customise Twitter Cards With WordPress

| Published by Callan Milne on August 14, 2020 7:30 pm
How To Customise Twitter Cards With WordPress

By adding just a few lines of markup to your webpage, you can customise how links to your content appear on Twitter. We use the official Twitter plugin for WordPress to do this for us.

This plugin automatically generates Twitter meta tags for most of your site’s pages. It also allows post authors to input a custom card title or description in the editor.

By default, the plugin automatically sets the twitter:card meta value to card for every page and post. For our website, we like to have a larger image displayed on Twitter when our posts are shared.

The official Twitter plugin utilises WordPress hooks, giving us the ability to filter the meta tags it places on each page. By filtering the twitter_card hook, we can change the card attribute for posts.

Add the following snippet to your theme’s functions.php file to change the twitter:card meta value to summary_large_image for all single posts.

add_filter( 'twitter_card', 'fix_twitter_props', 10 );

function fix_twitter_props ( $props ) {
  if ( ! is_single() ) {
    return $props;
  }

  $props['card'] = 'summary_large_image';

  return $props;
}

Additional Links