Open Graph Tags in WordPress

WordPress powers millions of sites, but a default install ships no Open Graph tags. Share a post without them and Facebook picks a random image from the page. Yoast SEO, Rank Math, and manual theme edits each solve this differently. Pick the right approach and every post gets a controlled preview card.

Short answer

Install Yoast SEO or Rank Math to auto-generate Open Graph tags from post title, excerpt, and featured image. Both plugins add og:title, og:description, og:image, and og:url to every public page. For full control without a plugin, add meta tags in your theme's header.php or use a small code snippet. Set a featured image on every post you share. After changes, scan the live URL with OpenGraph Check and confirm the preview before posting.

Why WordPress previews fail out of the box

WordPress outputs a document title and meta description through themes, but Open Graph is not part of core. Without a plugin or custom code, crawlers see no og:image and guess from page content. That leads to:

• Wrong or cropped thumbnails
• Missing descriptions on archive pages
• Logo images used instead of article art
• Stale previews when you change the featured image

Any serious content site needs explicit OG tags.

Option 1: Yoast SEO

Yoast is the most widely installed SEO plugin. Open Graph support is built in and enabled by default on recent versions.

Setup steps

1. Install Yoast SEO from Plugins → Add New
2. Go to SEO → Settings → Site features → Social sharing
3. Enable Open Graph data
4. Upload a default OG image for pages without a featured image
5. Set Facebook app ID (optional, helps with Insights)

Per-post control

Edit any post and open the Yoast sidebar or meta box:

• Social preview tab shows Facebook and X previews
• Override title and description for social separately from SEO title
• Featured image becomes og:image automatically

Yoast strengths

• Mature, well-documented
• Social preview UI in the editor
• Works with WooCommerce product pages
• Integrates with Google Search Console features

Yoast limitations

• Heavy plugin if you only need OG tags
• Social tab can confuse editors who edit SEO title but forget social override
• Some themes duplicate OG tags if they also output social meta

Option 2: Rank Math

Rank Math is a strong Yoast alternative with a generous free tier and granular social controls.

Setup steps

1. Install Rank Math SEO
2. Run the setup wizard and enable Social Meta
3. Under Rank Math → General Settings → Edit Snippet → Social, set default OG image
4. Connect Facebook App (optional)

Per-post control

Rank Math shows a Social tab in the snippet editor:

• Custom Facebook title, description, and image per post
• Separate X (Twitter) card settings
• Live preview while editing

Rank Math strengths

• Lightweight compared to Yoast
• Built-in schema markup alongside social tags
• Free version covers OG for most sites
• Redirection module helps fix URL changes that break og:url

Rank Math limitations

• Smaller ecosystem than Yoast
• Advanced features push toward Pro
• Same theme conflict risk as any plugin

Yoast vs Rank Math for Open Graph

Both plugins output correct tags for typical blog posts. Choose based on your broader SEO workflow, not OG alone. If you already use one, do not install both. Duplicate meta tags confuse crawlers.

Option 3: Manual implementation

Skip plugins when you want minimal overhead or full theme control.

Add tags in functions.php

function mytheme_open_graph_tags() {
  if ( is_singular() ) {
    global $post;
    $title = get_the_title();
    $description = has_excerpt() ? get_the_excerpt() : wp_trim_words( strip_tags( $post->post_content ), 30 );
    $url = get_permalink();
    $image = get_the_post_thumbnail_url( $post->ID, 'full' );
    if ( ! $image ) {
      $image = 'https://example.com/wp-content/uploads/default-og.jpg';
    }
    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:image" content="' . esc_url( $image ) . '" />' . "\n";
  }
}
add_action( 'wp_head', 'mytheme_open_graph_tags', 5 );

Hook early in wp_head so tags appear before other plugins. Use esc_attr and esc_url for security.

Manual pros and cons

Pros: No plugin dependency, exact output control, faster admin

Cons: No editor preview UI, you maintain code across theme changes, no automatic WooCommerce or archive handling

For a marketing site with five pages, manual works. For a blog with twenty posts per week, use a plugin.

Featured images are non-negotiable

Both plugins and manual code rely on the featured image for og:image. Posts without one fall back to a site-wide default or nothing.

Before publishing:

1. Set featured image at 1200 × 630 px or larger
2. Use JPG or PNG under 5 MB
3. Avoid text-heavy images that crop badly on mobile

Size guide: Open Graph Image Size Guide.

Common WordPress OG problems

Duplicate og:image tags

Two plugins or a plugin plus theme both output OG tags. Disable social meta in one source. View Page Source and count og:image entries. There should be exactly one set.

Caching plugins serve stale HTML

WP Rocket, W3 Total Cache, and LiteSpeed Cache can cache old meta tags. Purge cache after changing featured images or social overrides. See Why Social Platforms Cache Link Previews.

CDN or lazy-load breaks image URL

Some lazy-load plugins swap src attributes but leave OG tags pointing to low-res placeholders. Confirm og:image in source HTML points to the full-size attachment URL.

Multilingual sites (WPML, Polylang)

Each language version needs its own OG tags. Yoast and Rank Math both support WPML. Verify each locale URL separately with OpenGraph Check.

og:url mismatch on redirects

HTTP to HTTPS or www redirects can confuse crawlers if og:url uses the old format. Set WordPress site URL correctly under Settings → General.

Verification workflow for WordPress

1. Publish or update the post
2. Purge WordPress and CDN cache
3. View Page Source on the public URL
4. Confirm one set of og:* tags with absolute HTTPS image URL
5. Open the image URL in a browser tab
6. Scan with OpenGraph Check
7. Run Facebook Sharing Debugger before Meta campaigns

Full testing guide: How to Test Open Graph Tags.

When to override defaults

Override the auto-generated social title when:

• SEO title is keyword-heavy but social needs a hook
• Featured image differs from the hero image you want shared
• Running A/B tests on share copy for paid social

Keep overrides in the plugin social tab, not by editing HTML in the post body.

FAQ

Does WordPress add Open Graph tags automatically?

No. Core WordPress does not output OG tags. You need a plugin or custom code.

Yoast or Rank Math for Open Graph only?

Either works. Rank Math is lighter. Yoast has broader adoption and documentation. Do not run both.

Can I add OG tags without a featured image?

Yes, with a default site-wide image in plugin settings. Per-post images always perform better.

Do page builders (Elementor, Divi) break OG tags?

Rarely, if SEO plugin loads in wp_head. Conflicts happen when builders inject their own SEO modules. Disable duplicate social output in the builder.

How do I fix wrong image on old Facebook shares?

Change the image, purge cache, re-scrape in Facebook Sharing Debugger. See Facebook Preview Not Updating.

Should I set og:description separately from meta description?

Optional. They can match. Social descriptions benefit from action-oriented copy under 125 characters.

Does WooCommerce need special OG setup?

Product pages need og:type product and a product image. Yoast WooCommerce SEO and Rank Math Pro handle this. Verify product URLs individually.

Bottom line

WordPress needs help for Open Graph tags. Yoast and Rank Math automate the work for content teams. Manual code suits lean sites with developer maintenance. Set featured images, avoid duplicate plugins, purge cache after edits, and verify every important URL with OpenGraph Check before you share.