WordPress Gutenberg OG Tags: Add Open Graph Meta to Block Editor Posts

How to correctly add and customize og:title, og:image, og:description, and Twitter card meta tags for WordPress posts and pages built with the Gutenberg block editor — covering Yoast SEO, Rank Math, and manual methods.

Where Gutenberg fits in the OG stack

Gutenberg is WordPress's block editor — it controls content, not <head> meta tags. OG tags are managed by your SEO plugin (Yoast, Rank Math, All in One SEO) or a custom theme/plugin. Gutenberg itself doesn't output OG tags, but it does expose a sidebar where SEO plugins add their panels.

Setting OG tags via Yoast SEO in Gutenberg

With Yoast SEO installed, a Yoast SEO panel appears at the bottom of every Gutenberg post/page editor. Here's how to configure per-post OG tags:

  1. Open the post in Gutenberg
  2. Scroll to the Yoast SEO panel at the bottom
  3. Click Social → Facebook tab
  4. Set Facebook image — upload a 1200×630px image here. This becomes your og:image
  5. Set Facebook title (overrides og:title)
  6. Set Facebook description (overrides og:description)
  7. Repeat in the Twitter tab to set twitter:image

If you leave the Social fields empty, Yoast falls back to the post's featured image and SEO title/description. Explicitly setting them gives you full control.

Setting OG tags via Rank Math in Gutenberg

With Rank Math installed, use the Rank Math sidebar panel in Gutenberg:

  1. Open the post in Gutenberg
  2. Click the Rank Math icon in the top-right toolbar
  3. Go to Social tab
  4. Under Facebook, set Image, Title, and Description
  5. Under Twitter, set the Twitter-specific overrides

Rank Math also has a global fallback image setting at Rank Math → Titles & Meta → Global Meta → Thumbnail Image

The featured image as OG fallback

Both Yoast and Rank Math use the post's featured image as the OG image fallback when no explicit Social image is set. To ensure correct OG images in Gutenberg:

  1. In the right sidebar under Post, set Featured image
  2. Use an image at least 1200×630px (1.91:1 ratio)
  3. Avoid images smaller than 600×315px — Facebook and LinkedIn may reject them
/* Recommended OG image specs */
Minimum:    600  × 315  px
Optimal:    1200 × 630  px
Max file:   8 MB
Format:     JPG or PNG (not GIF, not WebP for older crawlers)

Manual OG tags without a plugin

If you prefer not to use an SEO plugin, add OG tags to your theme's functions.php or a custom plugin using the wp_head action:

// functions.php
function my_og_tags() {
  if (is_singular()) {
    global $post;
    setup_postdata($post);

    $title       = get_the_title();
    $description = get_the_excerpt() ?: wp_trim_words(get_the_content(), 30);
    $url         = get_permalink();
    $image       = '';

    if (has_post_thumbnail()) {
      $thumb = wp_get_attachment_image_src(get_post_thumbnail_id(), 'large');
      $image = $thumb ? $thumb[0] : '';
    }

    echo '<meta property="og:title" content="' . esc_attr($title) . '" />' . PHP_EOL;
    echo '<meta property="og:description" content="' . esc_attr($description) . '" />' . PHP_EOL;
    echo '<meta property="og:url" content="' . esc_url($url) . '" />' . PHP_EOL;
    echo '<meta property="og:type" content="article" />' . PHP_EOL;

    if ($image) {
      echo '<meta property="og:image" content="' . esc_url($image) . '" />' . PHP_EOL;
      echo '<meta name="twitter:card" content="summary_large_image" />' . PHP_EOL;
      echo '<meta name="twitter:image" content="' . esc_url($image) . '" />' . PHP_EOL;
    }

    echo '<meta name="twitter:title" content="' . esc_attr($title) . '" />' . PHP_EOL;
    echo '<meta name="twitter:description" content="' . esc_attr($description) . '" />' . PHP_EOL;
  }
}
add_action('wp_head', 'my_og_tags', 5);

Cache clearing after Gutenberg updates

After editing OG meta in Gutenberg and publishing, social platforms cache the previous values. Force a re-scrape:

  • Facebook/LinkedIn: Use the sharing debugger / post inspector to clear cache
  • Twitter: Paste the URL in the Twitter Card Validator
  • Slack/Discord: Share the URL in a test channel; they re-fetch on new share
  • WordPress cache: Purge WP Rocket, W3 Total Cache, or Cloudflare cache after changes

Verify your Gutenberg post OG tags

After publishing, paste your WordPress post URL into OGFixer to preview how it appears on Twitter, LinkedIn, Slack, and Discord — and verify the featured image renders at the right size.