How to Add Twitter Card Tags in WordPress

When someone shares your WordPress page on X (formerly Twitter), the platform looks for Twitter Card meta tags to generate a rich preview. Without these tags, your shared links appear as plain URLs with no image, title, or description — significantly reducing engagement. Here's how to set them up.

Method 1: Using Yoast SEO (Recommended)

If you already use Yoast SEO, Twitter Cards are built in:

1. Go to SEO → Social in your WordPress admin.
2. Click the Twitter tab.
3. Enable "Add Twitter Card meta data".
4. Select the default card type: Summary or Summary with large image.
5. Save changes.

Yoast will automatically generate Twitter Card tags for all your posts and pages. You can also customize the Twitter title, description, and image for each individual post in the post editor under the "Social" tab.

Method 2: Using Rank Math

Rank Math also includes built-in Twitter Card support:

1. Go to Rank Math → Titles & Meta → Social Meta.
2. Enable "Twitter Card Type" and select your preferred card type.
3. Save changes.

Per-post customization is available in the Rank Math meta box on each post editing screen.

Method 3: Manual Implementation (Without Plugin)

Add the following to your theme's functions.php or a custom plugin:

function add_twitter_cards() {
    if (is_singular()) {
        global $post;
        $title = get_the_title();
        $excerpt = has_excerpt()
            ? wp_strip_all_tags(get_the_excerpt())
            : wp_trim_words(wp_strip_all_tags($post->post_content), 30);
        $image = get_the_post_thumbnail_url($post->ID, 'large');

        echo '<meta name="twitter:card" content="summary_large_image" />' . "\n";
        echo '<meta name="twitter:title" content="' . esc_attr($title) . '" />' . "\n";
        echo '<meta name="twitter:description" content="' . esc_attr($excerpt) . '" />' . "\n";
        if ($image) {
            echo '<meta name="twitter:image" content="' . esc_url($image) . '" />' . "\n";
        }
        // Optional: Add your Twitter handle
        // echo '<meta name="twitter:site" content="@YourHandle" />' . "\n";
    }
}
add_action('wp_head', 'add_twitter_cards');

Testing Your Twitter Cards

After adding the tags:

1. Use InspectWP to verify the meta tags are present in your page source.
2. Share a link on X to preview the card rendering.
3. Clear any cached previews by appending a query parameter (e.g., ?v=2) to force X to re-fetch the tags.

Best Practices

• Use Summary with large image for blog posts and articles — the larger image attracts more clicks.
• Ensure images are at least 1200 × 628 pixels for optimal display.
• Keep titles under 70 characters and descriptions under 200 characters.
• Always define both Open Graph and Twitter Card tags for cross-platform compatibility.