How to Control and Customize Open Graph Tags in Yoast SEO

If you've ever shared a WordPress post on social media and been frustrated by the wrong image, language, or description showing up, you're not alone. A common source of this issue is the Open Graph (OG) meta tags generated by the Yoast SEO plugin. This guide will explain how Yoast SEO determines these tags and provide practical solutions for taking control of them.

Understanding the Open Graph Hierarchy

Yoast SEO populates Open Graph tags like og:image and og:description using a specific hierarchy. Understanding this order is key to troubleshooting:

1. User-defined Social Image: An image set in the "Facebook image" field within the Social tab of the Yoast SEO metabox.
2. Featured Image: The post's or page's designated featured image.
3. Content Image: A prominent image found within the page's content.
4. WooCommerce Gallery Image (if applicable): For sites using the Yoast SEO WooCommerce extension, the first image in a product's gallery can serve as a fallback.

If you haven't set an image at a higher level, the plugin will automatically fall back to the next option. This logic also applies to the og:description tag, which uses the meta description or a generated excerpt from the post content.

Common Problems and Their Solutions

1. The Wrong Language (og:locale)

The og:locale tag (e.g., en_US) is primarily based on your WordPress site's language setting. If this tag is incorrect, the first step is to change your site language in Settings → General → Site Language.

For more advanced control, you can use a filter. However, it's crucial to use a valid locale code from the official Open Graph list. For example, to force Canadian English, you would add this to your theme's functions.php file:

function my_wpseo_change_og_locale( $locale ) {
    return 'en_CA';
}
add_filter( 'wpseo_locale', 'my_wpseo_change_og_locale' );

Note: Some codes, like en_CA, may not be supported by all social platforms, which might default to a more common locale like en_US.

2. Using a Specific Image Size (og:image)

By default, Yoast SEO may output the full-size version of an image. If you want to use a smaller, generated WordPress image size (like 'medium' or 'large'), you can use the following filter:

function my_wpseo_opengraph_image_size( $size ) {
    return 'medium';
}
add_filter( 'wpseo_opengraph_image_size', 'my_wpseo_opengraph_image_size' );

3. Removing or Altering Specific OG Tags

In some cases, you may need to remove a tag entirely, such as an og:locale:alternate tag that is causing issues on a multilingual site. The recommended method is to filter the list of presenters before they are output. The following example removes both the primary and alternate locale tags:

function my_remove_og_locale_presenters( $presenters ) {
    $presenters_to_remove = [
        'Yoast\WP\SEO\Presenters\Open_Graph\Locale_Presenter',
        'Yoast\WP\SEO\Presenters\Open_Graph\Locale_Alternate_Presenter'
    ];
    
    return array_filter( $presenters, function( $presenter ) use ( $presenters_to_remove ) {
        return ! in_array( get_class( $presenter ), $presenters_to_remove, true );
    });
}
add_filter( 'wpseo_frontend_presenters', 'my_remove_og_locale_presenters' );

4. Setting OG Tags for Custom Pages

For special pages with unique slugs (like those created by filtering plugins), Yoast's automatic detection might fail. In these scenarios, you can conditionally output custom tags. It's important to use a priority higher than 10 to ensure your code runs after Yoast's.

add_action( 'wp_head', function() {
    if ( strpos( $_SERVER['REQUEST_URI'], '/my-custom-slug/' ) !== false ) {
        ?>
        <meta property="og:title" content="My Custom Title" />
        <meta property="og:description" content="My custom description." />
        <meta property="og:image" content="https://example.com/image.jpg" />
        <?php
    }
}, 20 ); // Higher priority number

Important Considerations

• Cache: After making any code changes, clear your WordPress cache (if using a caching plugin) and then use Facebook's Sharing Debugger to scrape your URL again and see the updated tags.
• Theme Functions File: Always add code snippets to your child theme's functions.php file to prevent them from being lost during theme updates.
• Dynamic Blocks: As noted in community discussions, the current logic for auto-generating descriptions and images from post content may not fully parse dynamic blocks. This is a known limitation.

By understanding the hierarchy and using these targeted code solutions, you can effectively customize your Open Graph tags to ensure your content looks perfect when shared across social networks.