A set of social platform icons representing Open Graph social sharing images in WordPress

How to Add Open Graph and Social Sharing Images in WordPress for Beginners

by

Share a blog post on Facebook or X without Open Graph tags in place, and you’ll often get a blank grey box, a randomly grabbed image, or no preview at all. That broken-looking preview costs clicks before anyone even reaches the page — people scroll past a link that looks untrustworthy or unfinished far more readily than one with a clean title, description, and image attached.

In most sites I build, this is one of the first things I check after publishing content, because it’s invisible from inside WordPress itself — the only way to actually see what a shared link looks like is to test it through a social platform’s own preview tool, and it’s easy to assume it’s working when it isn’t.

This guide covers what Open Graph tags actually do, how to add them to a WordPress site without a full SEO plugin, and how to make sure every post shares with the right title, description, and image every time.

The Short Version

Open Graph tags are meta tags in a page’s <head> that tell social platforms what title, description, and image to show when a page is shared. Add them via functions.php or a lightweight snippet, always include a properly sized image (1200×630px), and test every template type with Facebook’s Sharing Debugger before trusting it’s working.

What Happens Without Them

Without Open Graph tags, a social platform falls back to guessing — grabbing the first image it finds in the page, truncating whatever text is nearby, and sometimes pulling nothing usable at all. That fallback behaviour is inconsistent across platforms and posts, so a site without proper tags ends up with shares that look fine on some posts and broken on others, with no obvious pattern to fix.

Since Veravix runs without a dedicated SEO plugin, Open Graph output has to come from custom functions rather than a plugin’s built-in social preview settings. That’s a genuine gap worth closing directly, because a large share of a new post’s early traffic often comes from social shares and messaging apps before search rankings have had time to build — and every one of those early shares renders using whatever Open Graph data is (or isn’t) present.

Setting It Up

1. Understand the Core Tags You Need

Four Open Graph properties cover the vast majority of what social platforms actually read: og:title (the headline shown in the preview), og:description (the short summary beneath it), og:image (the preview thumbnail), and og:url (the canonical link that gets shared, even if someone copied a URL with tracking parameters attached). A fifth, og:type, tells the platform whether it’s looking at an article, a website homepage, or another content type, which affects how some platforms format the preview. The full list of available properties is documented in the Open Graph protocol specification, though the four above cover nearly every real-world case.

2. Add the Tags via functions.php

Hook into wp_head to output the tags dynamically for posts, pages, and the homepage, pulling from each page’s actual title, excerpt, and featured image rather than hardcoding anything. A minimal version looks like this:

function veravix_open_graph_tags() {
    if ( is_singular() ) {
        global $post;
        $title = get_the_title( $post );
        $description = get_the_excerpt( $post );
        $image = get_the_post_thumbnail_url( $post, 'large' );
        $url = get_permalink( $post );
        echo '<meta property="og:title" content="' . esc_attr( $title ) . '" />' . "\n";
        echo '<meta property="og:description" content="' . esc_attr( $description ) . '" />' . "\n";
        if ( $image ) {
            echo '<meta property="og:image" content="' . esc_url( $image ) . '" />' . "\n";
        }
        echo '<meta property="og:url" content="' . esc_url( $url ) . '" />' . "\n";
        echo '<meta property="og:type" content="article" />' . "\n";
    }
}
add_action( 'wp_head', 'veravix_open_graph_tags' );

Add a fallback image for posts that don’t have a featured image set, since a missing og:image tag is one of the most common reasons a share ends up with no preview thumbnail at all.

3. Size and Optimise Your Images Correctly

Use a 1200×630px image for og:image — that’s the aspect ratio (roughly 1.91:1) most platforms crop to, and a smaller image gets stretched or padded with awkward whitespace. Keep the file size reasonable too; a multi-megabyte image can slow down or fail entirely on a platform’s preview crawler. If you’re already following good image SEO practices for on-page images, apply the same compression discipline here rather than treating social images as a separate, unoptimised category.

4. Write Titles and Descriptions Specifically for Sharing

An og:title doesn’t have to be identical to your SEO title, and often shouldn’t be — a title written for a search results page needs to work alongside a meta description a searcher already partly trusts, while a shared social post has to earn a click with almost no other context. The same care that goes into writing SEO titles and meta descriptions applies here, just angled toward a scroll-past audience rather than someone who already typed a search query.

5. Test With Each Platform’s Debugging Tool

Don’t trust that the tags are working just because the code looks right — test the actual rendered output. Facebook’s Sharing Debugger fetches a URL fresh and shows exactly what will display when it’s shared, flagging missing or malformed tags directly. X discontinued its own official Card Validator in 2022, so for X/Twitter previews, a third-party card-preview tool is the closest equivalent now available. Run every distinct template on your site through at least one debugger once — homepage, a standard post, and a page — since a tag that renders correctly on posts can still be missing on pages if the wp_head hook wasn’t scoped broadly enough.

6. Clear Cached Previews After Changes

Social platforms cache Open Graph data aggressively, sometimes for weeks, so a fix that works perfectly in a debugger can still show the old broken preview on a link that was already shared once. Use each platform’s debugger tool to force a re-scrape after any change — most have a “scrape again” or “fetch new information” button that clears the cached version immediately rather than waiting for it to expire naturally.

Practical Tips

  • Set a site-wide fallback image (like your logo on a branded background) for any page without its own featured image, so nothing ever shares with a completely blank preview.
  • Keep og:description under roughly 200 characters — most platforms truncate longer text anyway, sometimes mid-sentence in an ugly spot.
  • Check how a URL looks in WhatsApp and Slack too, not just Facebook and X — both use Open Graph tags and both have their own quirks in how they render previews.
  • Revisit your fallback image if you ever change your site’s branding — an old logo quietly showing up on every unbranded share is easy to miss.

Common Mistakes

  • Using an image that’s too small, causing platforms to stretch or reject it entirely.
  • Forgetting to test after a theme or plugin update, which can silently strip or duplicate the wp_head output.
  • Assuming Open Graph tags also cover Twitter/X Cards — X reads its own separate twitter: tags by default, and only falls back to Open Graph tags if those are missing.
  • Not clearing the cached preview after fixing a broken tag, then assuming the fix didn’t work.

functions.php vs an SEO Plugin’s Built-In Tags

Adding tags via functions.php makes sense for a site like this one that already manages SEO through custom functions rather than a dedicated plugin — it keeps everything in one place and avoids adding plugin overhead for a handful of meta tags. If a site already runs an SEO plugin such as Yoast or Rank Math, use its built-in social preview settings instead of adding a second, conflicting set of tags — having both active at once can cause duplicate meta tags that platforms handle unpredictably.

Conclusion

Add the core Open Graph tags through functions.php, use a properly sized fallback image so nothing shares blank, and test every template through Facebook’s Sharing Debugger before trusting it works. For the wider picture of getting a new WordPress site’s SEO foundations right from the start, see the step-by-step guide to building a WordPress website.