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 is mandatory these days. A bad-looking snippet will make readers just ignore 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 of the tags in Open Graph or add all the Twitter card tags like twitter:url, twitter:title, twitter:description, twitter:image.

Here is how the Twitter 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 the 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 the BULK SEO feature, follow the instructions from this URL >

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.