Add Custom Twitter Card MetaData

What is Twitter Card?

It’s an integration between Twitter and other websites by allowing them to become rich snippets with the same functionality as other Twitter snippets.

To attract more leads to your website, every Social Media share counts. Having a good looking Twitter snippet it’s mandatory these days. A bad snippet will make readers just pass over your post in their feed.

Each card has built-in content attribution, which surfaces appropriate Twitter accounts for the content as specified by you. Users will be able to follow and view the profiles of attributed accounts directly from the card.

Basic Twitter Card Metadata

Twitter card tags look similar to Open Graph tags, and are based on the same conventions as the Open Graph protocol.

  • twitter:cardThe card type, which will be one of “summary”, “summary_large_image”, “app”, or “player”.
  • twitter:site@username for the website used in the card footer.
  • twitter:creator@username for the content creator / author.

You can set the rest or the tags in Open Graph or add all the twitter card tags like twitter:url, twitter:title, twitter:description, twitter:image.

Here is how theTwitter Card looks like in the source code:

<meta property="twitter:url" content="https://plugin.squirrly.co/cat-food" />
<meta property="twitter:title" content="Cat Chow Complete Dry Cat Food" />
<meta property="twitter:description" content="Give your cat complete nutrition to support her long, healthy life when you serve Cat Chow Complete Dry Cat Food." />
<meta property="twitter:image" content="http://plugin.squirrly.co/wp-content/uploads/sites/3/2019/05/100114_PT2._AC_SL1500_V1531951065_.jpg" />
<meta property="twitter:domain" content="Squirrly SEO" />
<meta property="twitter:card" content="summary_large_image" />
<meta property="twitter:creator" content="@SquirrlyHQ" />
<meta property="twitter:site" content="@SquirrlyHQ" /> 

Custom Twitter Card with Squirrly SEO

With Squirrly SEO plugin you can customize the Twitter Card using the Squirrly SEO Snippet or by calling the sq_twitter_card hook in your code.

To edit the Twitter Card  using SEO Snippet follow the instructions from this URL: 
https://howto.squirrly.co/kb/bulk-seo/#bulk_seo_snippet_twittercard

Custom Twitter Cart using Filter Hook

To edit the Twitter Card using the  sq_twitter_card hook, activate Squirrly SEO plugin and add this code in function.php file:

//Hook the Squirrly sq_twitter_card
add_filter('sq_twitter_card', 'custom_squirrly_twitter_card', 11);
function custom_squirrly_twitter_card($tc) {
global $post;

$attachment = false;
$image = false;
if (wp_attachment_is_image($post->ID)) {
$attachment = get_post($post->ID);
} elseif (has_post_thumbnail($post->ID)) {
$attachment = get_post(get_post_thumbnail_id($post->ID));
}

if (isset($attachment->ID)) {
$url = wp_get_attachment_image_src($attachment->ID, 'full');
$image = esc_url($url[0]);
}

$tc['twitter:url'] = get_permalink($post->ID);
$tc['twitter:title'] = get_the_title();
$tc['twitter:type'] = 'article';
if($image) {
$tc['twitter:image'] = $image;
}
$tc['twitter:card'] = 'summary_large_image';
$tc['twitter:domain'] = get_bloginfo('title');
$tc['twitter:creator'] = '@your_twitter_profile';
$tc['twitter:site'] = '@your_twitter_profile';

return $tc;
}

This is a basic example of how you can build your own Twitter Card using the Squirrly hooks.

Was This Article Helpful?

0 Comments

There are no comments yet

Leave a comment

Your email address will not be published. Required fields are marked *