OG
OGProof
Tutorial8 min read

WordPress Open Graph Tags: The Complete Setup Guide

How to add Open Graph tags to WordPress using Yoast SEO, Rank Math, or All in One SEO — plus manual fallbacks, common plugin conflicts, and how to validate OG tags on your WordPress site.

WordPress powers over 40% of all websites, but it does not add Open Graph meta tags by default. Without them, sharing a WordPress post on Twitter, LinkedIn, Facebook, or Discord produces a blank card — no image, no title preview, no description. This guide covers every method to fix that, from the most popular SEO plugins to manual code-based approaches.

Why WordPress Does Not Include OG Tags by Default

Core WordPress is intentionally minimal — it generates the basic HTML structure but leaves the <head> contents to plugins and themes. Open Graph tags are not part of the HTML specification (they are a protocol layered on top of it), so WordPress core does not include them. Every WordPress site needs either an SEO plugin or custom code to output OG tags.

TipSome WordPress themes include OG tag support built in — check your theme documentation before installing a plugin. If your theme already outputs og:title and og:image, adding an SEO plugin may cause duplicate tags.

Option 1: Yoast SEO (Most Popular)

Yoast SEO is the most widely-used WordPress SEO plugin and includes full Open Graph support out of the box. After installing and activating Yoast, you need to enable OG output:

  1. 1.Go to SEO → Social in your WordPress admin.
  2. 2.Click the Facebook tab.
  3. 3.Enable the "Add Open Graph meta data" toggle.
  4. 4.Upload a default OG image (used on pages that do not have their own featured image).
  5. 5.Click Save Changes.

Once enabled, Yoast automatically adds og:title, og:description, og:image, og:url, and og:type to every page. For posts, it uses the post title, the Yoast meta description, and the featured image as the OG image. For pages without a featured image, it falls back to the default OG image you configured.

Setting Per-Post OG Tags in Yoast

To customize OG tags for a specific post or page, scroll to the Yoast SEO meta box in the editor and click the Social tab. Here you can override:

  • —Facebook title — overrides og:title for Facebook and LinkedIn
  • —Facebook description — overrides og:description
  • —Facebook image — overrides og:image with a custom upload (use at least 1200×630px)
  • —Twitter title, description, and image — same but for twitter:* tags
  • —Twitter card type — summary or summary_large_image
TipYoast's 'Facebook' fields control og:* tags, which are read by LinkedIn, Discord, Slack, and most other platforms — not just Facebook. The naming is historical.

Option 2: Rank Math

Rank Math is a newer, faster alternative to Yoast that enables Open Graph by default during setup. To verify or configure it:

  1. 1.Go to Rank Math → General Settings → Links.
  2. 2.Scroll to Open Graph and confirm "Add Open Graph Meta Tags" is enabled.
  3. 3.Navigate to Rank Math → Titles & Meta to set default OG images per post type.
  4. 4.In the block editor, open the Rank Math sidebar and click the Social tab to set per-post overrides.

Rank Math also generates twitter:card, twitter:title, and twitter:description automatically. You can override the Twitter card type from the Social tab in the editor — choose between summary and summary_large_image.

Option 3: All in One SEO (AIOSEO)

All in One SEO includes Open Graph support in the free version. After installation, go to All in One SEO → Social Networks → Facebook to enable OG tags and set a default image. Like Yoast, it uses 'Facebook' as the label but the tags apply to all OG-aware platforms.

Option 4: Manual OG Tags (No Plugin)

If you prefer not to use an SEO plugin, you can add OG tags manually in your theme's functions.php or in a custom plugin. The correct hook is wp_head:

<?php
// Add to functions.php or a custom plugin
function my_open_graph_tags() {
    global $post;

    if ( is_singular() && isset( $post ) ) {
        // Use featured image as OG image
        $og_image = '';
        if ( has_post_thumbnail( $post->ID ) ) {
            $img_src = wp_get_attachment_image_src(
                get_post_thumbnail_id( $post->ID ),
                'full'
            );
            if ( $img_src ) {
                $og_image = esc_url( $img_src[0] );
            }
        }

        // Fallback to site logo or a static default
        if ( ! $og_image ) {
            $og_image = esc_url( get_site_url() . '/wp-content/uploads/og-default.jpg' );
        }

        $og_title       = esc_attr( get_the_title( $post->ID ) );
        $og_description = esc_attr( wp_strip_all_tags( get_the_excerpt( $post->ID ) ) );
        $og_url         = esc_url( get_permalink( $post->ID ) );
        $og_type        = 'article';

        echo '<meta property="og:title" content="' . $og_title . '" />' . "
";
        echo '<meta property="og:description" content="' . $og_description . '" />' . "
";
        echo '<meta property="og:image" content="' . $og_image . '" />' . "
";
        echo '<meta property="og:image:width" content="1200" />' . "
";
        echo '<meta property="og:image:height" content="630" />' . "
";
        echo '<meta property="og:url" content="' . $og_url . '" />' . "
";
        echo '<meta property="og:type" content="' . $og_type . '" />' . "
";
        echo '<meta property="og:site_name" content="' . esc_attr( get_bloginfo( 'name' ) ) . '" />' . "
";
        echo '<meta name="twitter:card" content="summary_large_image" />' . "
";
    }
}
add_action( 'wp_head', 'my_open_graph_tags', 5 );

The priority argument 5 in add_action ensures your OG tags are output before most other head content. If your theme or another plugin also outputs OG tags, you may get duplicates — use a priority of 1 and add a check to remove theme-generated OG tags.

OG Image Requirements for WordPress

The featured image is the most important factor for WordPress OG images. Use these settings to ensure it meets all platform requirements:

  • —Upload images at 1200×630px (1.91:1 ratio) — works on Twitter, LinkedIn, Facebook, Discord, Slack, and iMessage
  • —Use JPEG or PNG format — JPEG is preferred for photographs (smaller file size), PNG for graphics with text
  • —Keep file size under 5MB — Twitter and LinkedIn have this limit
  • —Always use HTTPS — your WordPress site should already have an SSL certificate; if the og:image URL starts with http://, Twitter and iMessage will not display it
  • —Set og:image:alt — Yoast uses the image alt text from your media library; set a descriptive alt text on every featured image

Adding a Default OG Image

Not every page will have a featured image — archive pages, search results, the homepage, and category pages often do not. Set a default OG image that represents your brand. In Yoast, this is under SEO → Social → Facebook → Default image. In Rank Math, it is under Titles & Meta → Global Meta.

The default image should be 1200×630px and use your logo or a brand visual that works out of context. Avoid using an image that is only meaningful on a specific page — the default shows everywhere there is no override.

Common WordPress OG Tag Problems

1. Caching Plugin Serving Stale OG Tags

WordPress caching plugins (W3 Total Cache, WP Rocket, WP Super Cache) serve cached HTML to reduce server load. If you update an OG tag, the cached version of the page still contains the old tag. After changing OG tags, clear your page cache immediately — and then use the platform-specific cache-clearing tools (Facebook Sharing Debugger, LinkedIn Post Inspector) to force a fresh crawl.

2. Duplicate OG Tags From Theme + Plugin

If your theme already generates OG tags and you also have an SEO plugin doing the same, the page will contain duplicate og:title tags. Platforms typically use the first one they find, but the duplicate causes confusion and inflates HTML size. To check, view the page source (Ctrl+U) and search for og:title — if it appears twice, disable OG output in your theme or tell the SEO plugin to skip duplicates (Rank Math has a 'Remove previous SEO metadata' option).

3. Featured Image Not Used as OG Image

In Yoast, the featured image is used as og:image only when the image is in the media library and has a full-size version available. If you set the featured image but Yoast is using the default image instead, check that the image is publicly accessible (not password-protected), that the image URL is HTTPS, and that the image dimensions are above the 200×200px minimum that Yoast checks before using an image as OG.

4. OG Tags Missing on Homepage

The WordPress homepage is treated differently depending on your 'Reading' settings. If your homepage is a static page, use Yoast's page editor to set OG tags on that page. If it is the latest posts feed (the default), set the default OG image and description in Yoast's Search Appearance → Content Types → Posts settings.

OG Tags for WooCommerce Product Pages

WooCommerce product pages benefit from Open Graph tags, particularly for product images shared on social media. Yoast SEO and Rank Math both recognize WooCommerce product types and will use the product featured image as og:image. For best results:

  • —Set the product featured image to at least 1200×630px, even if you also have a square product gallery image
  • —Write a compelling product short description — Yoast uses this as og:description on product pages
  • —Set og:type to 'product' if you want rich product cards on supported platforms (Facebook Product Catalog uses this)
  • —Use Yoast's Social tab on each product to customize the title and description for social sharing separately from the SEO title

Validating WordPress OG Tags

After configuring your SEO plugin, always verify the actual HTML output rather than relying on the plugin preview. Plugins can have bugs, caching can serve stale content, and some OG tags may be missing for specific post types. The only reliable way to verify is to fetch the page server-side — exactly as the social crawlers do.

# Fetch your WordPress page as Twitterbot and check OG tags
curl -s -A "Twitterbot/1.0" "https://yoursite.com/your-post/" \
  | grep -i '<meta.*og:\|<meta.*twitter:'

# Check the homepage
curl -s -A "LinkedInBot/1.0" "https://yoursite.com/" \
  | grep -i '<meta.*og:'

If you see duplicate og:title lines in the output, a theme + plugin conflict is present. If og:image is missing, the featured image is not being recognized or the post is using the default fallback.

OGProof handles this automatically: paste any WordPress URL and it fetches server-side using each crawler's user-agent, parses all OG and Twitter Card tags, and renders platform-accurate previews for Twitter, LinkedIn, Facebook, Discord, Slack, and iMessage. It flags duplicate tags, missing images, wrong image dimensions, and descriptions that will be truncated.

Recommended WordPress OG Tag Setup

  • —Install Yoast SEO or Rank Math (not both)
  • —Enable Open Graph output in the plugin settings
  • —Upload a default OG image at 1200×630px to use on pages without featured images
  • —Set featured images at 1200×630px for all posts and pages
  • —Verify each post type generates correct og:title, og:description, og:image, and twitter:card
  • —Clear your page cache after any OG tag changes
  • —Use OGProof to validate the live output after caches have cleared

Validate your OG tags now

Paste any URL and see exactly how it renders on Twitter, LinkedIn, Facebook, Discord, Slack, and iMessage — in seconds.

Try OGProof free →
← All articles