How to Add Open Graph Tags in WordPress

Open Graph tags are small pieces of metadata in your page's HTML that control how your content appears when someone shares it on social media. Without them, platforms like Facebook, LinkedIn, and Twitter have to guess what title, description, and image to show, and they often get it wrong. A shared link with a missing image or a garbled title looks unprofessional, and people are far less likely to click on it. Setting up Open Graph tags properly takes a few minutes and makes a real difference in social media traffic.

Why Open Graph Tags Matter for Social Sharing

Every time someone shares a link on Facebook, LinkedIn, Twitter, or messaging apps like WhatsApp and Telegram, those platforms fetch the Open Graph metadata from your page to build a preview card. This card typically includes a title, a description, and an image. If your OG tags are missing or misconfigured, you might see the wrong image pulled from a sidebar ad, the meta description cut off mid-sentence, or no preview at all.

The numbers speak for themselves. Posts with rich preview cards get significantly higher engagement than plain text links. On Facebook, posts with images see roughly 2-3x more engagement than those without. On LinkedIn, articles with compelling preview images get more clicks and shares. Getting your OG tags right is one of the easiest ways to boost the visibility of your shared content.

The Required Open Graph Tags Checklist

Not all OG tags are equally important. Here are the ones you should always include:

• og:title: The title of your page as it should appear in social shares. Keep it under 60 characters to avoid truncation on most platforms.
• og:description: A brief summary of the page content. Aim for 120-200 characters. This is your chance to write a compelling hook that makes people click.
• og:url: The canonical URL of the page. This ensures all shares point to the same URL, consolidating engagement metrics.
• og:type: The type of content. Use article for blog posts, website for your homepage, and product for e-commerce items.
• og:image: The preview image. This is the single most important OG tag for engagement. More on image best practices below.

Optional but recommended tags include og:site_name (your website name), og:locale (language and region, e.g. en_US), and article:published_time for blog posts.

og:image Best Practices for Maximum Impact

The preview image is what people notice first when scrolling through their social feeds. Getting it right is worth the effort:

• Size: Use images that are at least 1200x630 pixels. Facebook recommends this as the minimum for high-resolution displays. For LinkedIn, 1200x627 pixels works best.
• Aspect ratio: Stick to 1.91:1 for the best cross-platform compatibility. This ratio works well on Facebook, LinkedIn, Twitter, and messaging apps.
• File format: JPEG and PNG are universally supported. Avoid WebP for OG images, as some platforms and crawlers do not support it yet.
• File size: Keep images under 5MB. Facebook may skip images that take too long to download.
• Content: Avoid images with too much text. Facebook used to enforce a 20% text rule for ads, and while this no longer applies to organic shares, clean images with minimal text tend to perform better.
• Fallback image: Always set a site-wide default OG image for pages that do not have a featured image. A branded image with your logo works well as a fallback.

Setting Up Open Graph Tags with Yoast SEO

Yoast SEO generates Open Graph and Twitter Card tags automatically for every page on your site. Here is how to configure it:

For site-wide settings:

1. Install and activate Yoast SEO.
2. Go to Yoast SEO, then Social in the admin menu.
3. On the Facebook tab, enable "Add Open Graph meta data."
4. Upload a default image that will be used when a post or page has no featured image.
5. On the Twitter tab, enable the Twitter Card meta data and choose either "Summary" or "Summary with large image" as your default card type.

For individual posts and pages:

1. Edit the post or page.
2. In the Yoast SEO meta box, click the "Social" tab (the share icon).
3. Under "Facebook preview," customize the title, description, and image for social sharing.
4. Under "Twitter preview," set a different title, description, or image if needed (otherwise Twitter will use the Facebook OG values).

Yoast pulls the featured image automatically as the og:image if you do not set a custom one. It also generates the og:title from the SEO title and the og:description from the meta description, so your social shares stay consistent with your SEO settings.

Setting Up Open Graph Tags with Rank Math

Rank Math handles OG tags similarly to Yoast:

1. Install and activate Rank Math.
2. Go to Rank Math, then General Settings, then Social Meta.
3. Enable "Add Open Graph meta data to your site's header."
4. Set a default social share image for posts without a featured image.

For individual post customization, click the Rank Math icon while editing a post and navigate to the "Social" tab. You can set separate titles, descriptions, and images for Facebook and Twitter.

Adding Open Graph Tags Manually via functions.php

If you prefer not to use an SEO plugin, you can add OG tags through your theme's functions.php. This approach gives you complete control over every tag:

function custom_open_graph_tags() {
    if (is_singular()) {
        global $post;
        $title = get_the_title();
        $description = has_excerpt() ? get_the_excerpt() : wp_trim_words($post->post_content, 30);
        $url = get_permalink();
        $image = get_the_post_thumbnail_url($post->ID, 'large');
        $site_name = get_bloginfo('name');

        echo '<meta property="og:title" content="' . esc_attr($title) . '" />' . "\n";
        echo '<meta property="og:description" content="' . esc_attr($description) . '" />' . "\n";
        echo '<meta property="og:url" content="' . esc_url($url) . '" />' . "\n";
        echo '<meta property="og:type" content="article" />' . "\n";
        echo '<meta property="og:site_name" content="' . esc_attr($site_name) . '" />' . "\n";
        if ($image) {
            echo '<meta property="og:image" content="' . esc_url($image) . '" />' . "\n";
            echo '<meta property="og:image:width" content="1200" />' . "\n";
            echo '<meta property="og:image:height" content="630" />' . "\n";
        }
    } elseif (is_front_page()) {
        $site_name = get_bloginfo('name');
        $description = get_bloginfo('description');
        echo '<meta property="og:title" content="' . esc_attr($site_name) . '" />' . "\n";
        echo '<meta property="og:description" content="' . esc_attr($description) . '" />' . "\n";
        echo '<meta property="og:url" content="' . esc_url(home_url('/')) . '" />' . "\n";
        echo '<meta property="og:type" content="website" />' . "\n";
    }
}
add_action('wp_head', 'custom_open_graph_tags');

Make sure not to add this alongside an SEO plugin that already outputs OG tags. Having duplicate OG tags can confuse social media crawlers.

Open Graph Tags for WooCommerce Products

If you run a WooCommerce store, your product pages benefit from additional OG tags. Both Yoast SEO and Rank Math have WooCommerce integrations that automatically set og:type to product and include product-specific metadata like price and availability.

For manual implementations, you can hook into WooCommerce product data:

function woo_product_og_tags() {
    if (is_product()) {
        global $product;
        $price = $product->get_price();
        $currency = get_woocommerce_currency();
        echo '<meta property="og:type" content="product" />' . "\n";
        echo '<meta property="product:price:amount" content="' . esc_attr($price) . '" />' . "\n";
        echo '<meta property="product:price:currency" content="' . esc_attr($currency) . '" />' . "\n";
    }
}
add_action('wp_head', 'woo_product_og_tags');

Testing Your Open Graph Tags

After setting up your OG tags, you should test them before sharing anything important. Here are the tools you need:

• Facebook Sharing Debugger: Visit developers.facebook.com/tools/debug and enter your URL. It shows exactly what Facebook sees, including the title, description, and image. Click "Scrape Again" to refresh the cache if you have made changes.
• LinkedIn Post Inspector: Visit linkedin.com/post-inspector and enter your URL. LinkedIn caches aggressively, so use this tool to force a refresh after updating your OG tags.
• Twitter Card Validator: Visit cards-dev.twitter.com/validator. Enter your URL to see a preview of how your Twitter Card will look.
• InspectWP scan: Run a scan to verify that your OG tags are present in the page's HTML output.

Clearing Social Media Caches After Making Changes

Social media platforms cache your OG data heavily. If you update your OG tags and the old preview still shows up when sharing, you need to clear the cache:

• Facebook: Use the Sharing Debugger tool and click "Scrape Again." You may need to click it twice for stubborn caches.
• LinkedIn: Use the Post Inspector tool to force a re-scrape. LinkedIn can sometimes take up to 7 days to update its cache naturally.
• Twitter: Use the Card Validator to request a fresh crawl. Twitter usually updates within a few minutes.
• WhatsApp and Telegram: These apps cache previews on the client side. Ask people to clear their app cache, or wait for the cache to expire naturally (usually 24-72 hours).

Common Open Graph Mistakes to Avoid

• Missing og:image: The most common mistake. Without an image, social shares look plain and get ignored. Always set a featured image or a site-wide default.
• Image too small: Images below 200x200 pixels may not display at all on Facebook. Aim for 1200x630 pixels minimum.
• Duplicate OG tags: Running two SEO plugins, or an SEO plugin plus a social media plugin that both output OG tags, results in conflicting metadata. Use only one source for your OG tags.
• og:url mismatch: The og:url should match your canonical URL. If they point to different URLs, social platforms may get confused about which page to credit with engagement.
• Not setting og:type: Some platforms default to website if og:type is missing, which is fine for your homepage but not ideal for blog posts. Set article for posts so platforms display the published date and author information.
• Forgetting Twitter-specific tags: While Twitter can fall back to OG tags, adding twitter:card and twitter:site tags gives you more control over the Twitter preview format.