How to add Open Graph tags to WordPress

Step by step

1. Check what a page prints now

curl -s https://example.com/a-post/ | grep -o '<meta property="og:[^>]*>'

No output means no tags. Several lines with the same property twice means two tools are printing them, which produces conflicting cards.

2. Turn them on in the plugin

Open Hydrogen SEO → Social. Under Social meta tags, make sure Open Graph tags is on. A second switch, X (Twitter) card tags, controls the twitter:* tags, which fall back to the Open Graph values when no X-specific text is set. Leave both on unless your theme or another plugin is deliberately responsible for social tags.

3. Understand where each value comes from

You do not have to fill in anything per post. Values resolve in this order:

1. The post's own Open Graph fields in the SEO Settings sheet.
2. Otherwise, its SEO title and meta description.
3. For the image: the post's OG image, otherwise its featured image, otherwise the default share image from the Social screen.

So a post with a good title, description and featured image already has a complete card.

4. Write social copy for posts that matter

For a post you expect to be shared, open the SEO Settings sheet and go to the Open Graph fields. Set an OG title without the brand suffix and with the hook first, an OG description of one or two sentences, and an OG image at 1200×630 pixels with any text large enough to read at feed size. The live share-card preview updates as you type. Save the post.

5. Set the homepage card

The homepage has its own fields on Hydrogen SEO → Homepage: OG title, OG description and OG image. It is the most shared URL on most sites, so give it a dedicated image with the brand legible at small sizes.

6. Or add the tags without a plugin

In a child theme's functions.php:

add_action( 'wp_head', function () {
    if ( ! is_singular() ) {
        return;
    }
    $post = get_queried_object();
    $tags = array(
        'og:type'        => 'article',
        'og:title'       => get_the_title( $post ),
        'og:description' => wp_strip_all_tags( get_the_excerpt( $post ) ),
        'og:url'         => get_permalink( $post ),
        'og:site_name'   => get_bloginfo( 'name' ),
    );
    if ( has_post_thumbnail( $post ) ) {
        $tags['og:image'] = get_the_post_thumbnail_url( $post, 'full' );
    }
    foreach ( $tags as $property => $content ) {
        printf( '<meta property="%s" content="%s" />' . "\n", esc_attr( $property ), esc_attr( $content ) );
    }
}, 5 );

Open Graph uses the property attribute, not name. This covers posts and pages. Archives and the homepage need their own branches, and there is no fallback image, which is where a hand-rolled version starts to grow.

7. Test the card and refresh old previews

Paste the page's head into the Open Graph preview to see the card. Platforms cache what they scraped the first time a URL was shared. If an old card persists after you fix the tags, use the platform's own tool to re-scrape: Facebook's Sharing Debugger and LinkedIn's Post Inspector both fetch the page again on request.

The image is where cards fail

• Size. Use 1200×630 pixels, a 1.91:1 ratio. Much smaller images may be shown as a small thumbnail or dropped.
• Absolute URL. og:image must be a full https:// address that loads without a login.
• Not blocked. If robots.txt or hotlink protection stops the platform's crawler fetching the image, the card has none.
• One clear image. A post without a featured image falls back to the site default, so set one; see set a default social share image.

Do Open Graph tags help rankings

No. Google does not use them as a ranking signal for web search. Their value is in how links look when shared, which affects whether people click. Treat them as part of presentation, alongside titles and descriptions.