Open Graph & Twitter Cards for WordPress: The Complete Setup

Social media sharing drives significant traffic for many WordPress sites. But without proper Open Graph and Twitter Card tags, the preview your link generates is a guessing game — wrong title, missing image, or truncated description. This guide shows you how to control every aspect of how your content looks when shared.

What are Open Graph tags?

Open Graph protocol (developed by Facebook) lets you define how your content appears when shared on social networks. The essential tags:

<meta property="og:title" content="Your Post Title">
<meta property="og:description" content="150-character description">
<meta property="og:image" content="https://yoursite.com/og-image.jpg">
<meta property="og:url" content="https://yoursite.com/post-slug">
<meta property="og:type" content="article">
<meta property="og:site_name" content="Your Site Name">

These tags are used by Facebook, LinkedIn, WhatsApp, Slack, Discord, and most other platforms.

What are Twitter Cards?

Twitter (X) uses its own set of tags for richer link previews:

<meta name="twitter:card" content="summary_large_image">
<meta name="twitter:title" content="Your Post Title">
<meta name="twitter:description" content="150-character description">
<meta name="twitter:image" content="https://yoursite.com/twitter-image.jpg">
<meta name="twitter:site" content="@yourtwitterhandle">

Method 1: Use Yoast SEO (easiest)

Yoast SEO automatically generates Open Graph and Twitter Card tags for every post. In Yoast settings → Social → Facebook, enable Open Graph. In Social → Twitter, enable Twitter Card tags and enter your Twitter username.

For individual posts, use the Yoast SEO panel in the editor to set custom social titles, descriptions, and images.

Method 2: Use Rank Math

Rank Math generates OG and Twitter Card tags out of the box. In the Rank Math panel for each post, go to the Social tab to customize.

Method 3: Manual implementation (no plugin)

Add to your theme's functions.php:

function add_open_graph_tags() {
    if (is_singular()) {
        global $post;
        $img = get_the_post_thumbnail_url($post, 'large') ?: get_bloginfo('url') . '/default-og.jpg';
        echo '<meta property="og:title" content="' . esc_attr(get_the_title()) . '">';
        echo '<meta property="og:description" content="' . esc_attr(get_the_excerpt()) . '">';
        echo '<meta property="og:image" content="' . esc_url($img) . '">';
        echo '<meta property="og:url" content="' . esc_url(get_permalink()) . '">';
        echo '<meta property="og:type" content="article">';
        echo '<meta name="twitter:card" content="summary_large_image">';
    }
}
add_action('wp_head', 'add_open_graph_tags');

OG image specifications

• Facebook/Open Graph: 1200×630px minimum, JPG or PNG, under 8MB
• Twitter summary_large_image: 1200×628px minimum, 2:1 ratio
• Keep important content centered: Some platforms crop edges

Testing your implementation

• Facebook: developers.facebook.com/tools/debug/
• Twitter/X: cards-dev.twitter.com/validator
• LinkedIn: linkedin.com/post-inspector/
• WPStats: Shows OG and Twitter Card detection in the SEO section