How to Set Up Open Graph Tags in WordPress?

Sajjad
WordPress
01 Sep, 2026

Open Graph tags control exactly how your posts look when shared on Facebook, LinkedIn, or Slack: which title shows up, which image gets pulled in as the preview thumbnail, and which description appears underneath it. Without them, social platforms are left guessing, and they usually guess badly, grabbing the wrong image, truncating your title mid-sentence, or pulling in navigation text instead of your actual excerpt.

The good news is that Open Graph is just a handful of <meta> tags in your page's <head>, and WordPress gives you several ways to add them correctly: an SEO plugin you probably already have installed, or a small amount of custom PHP if you want full control. This guide covers both, plus how to verify the tags are actually working before you hit publish.

What Open Graph Tags Actually Are

Open Graph is a protocol originally created by Facebook (now maintained as an open standard) that lets any webpage describe itself to a social network using a specific set of <meta property="og:..."> tags in the <head>. When someone pastes your URL into Facebook, LinkedIn, or a Slack channel, the platform fetches your page, reads these tags, and builds the preview card from them instead of trying to parse your visible content.

The core tags every page should have are:

og:title — the headline shown on the shared card, which doesn't have to exactly match your <title> tag.
og:description — the summary text under the title, typically one or two sentences.
og:image — the thumbnail image, which should be a real, absolute URL (not a relative path).
og:url — the canonical URL for the page, so shares always point back to the right address even if someone shared a URL with tracking parameters attached.
og:type — usually article for blog posts and website for your homepage or other pages.

Twitter (now X) uses a similar but separate set of tags prefixed twitter:, though it falls back to Open Graph tags for anything it doesn't find, so most sites only need to add a couple of Twitter-specific tags on top of Open Graph rather than duplicating everything.

Method 1: Use an SEO Plugin (Recommended)

If you already have an SEO plugin installed, generating Open Graph tags is mostly a matter of turning a setting on and filling in a few fields, rather than writing any code yourself. This is the right approach for the vast majority of sites, since it handles per-post overrides, sitewide defaults, and image fallbacks automatically.

Using Yoast SEO

Go to Yoast SEO → Settings, and make sure Social sharing is enabled under the site features.
On any individual post or page, scroll to the Yoast SEO meta box below the editor and open the Social tab.
Set a custom Facebook Title, Facebook Description, and Facebook Image if you want them to differ from your default SEO title and meta description; otherwise Yoast falls back to those automatically.
Under Yoast SEO → Settings → Site features → Social sharing, upload a sitewide default Open Graph image, used whenever a post doesn't have a featured image or a custom social image set.

Using Rank Math

Go to Rank Math → Titles & Meta → Global Meta → Open Graph, and confirm Enable Open Graph output is switched on.
Set your default sitewide Facebook Image, used as the fallback for any post without a featured image.
On an individual post, open the Rank Math meta box, go to the Social tab, and override the title, description, or image for that specific post.

Either plugin outputs the full set of og:title, og:description, og:image, og:url, and og:type tags automatically on every page, pulling from the featured image and excerpt by default unless you override them, and both also handle twitter:card tags in the same panel.

Method 2: Add Open Graph Tags Manually With PHP

If you'd rather not add another plugin just for this, or you want tags that behave in a very specific way your SEO plugin doesn't support, you can hook directly into wp_head and output the tags yourself. Add this to your theme's functions.php, or better, a must-use plugin so it survives a theme switch:

add_action( 'wp_head', function () {
    // Avoid duplicate tags if an SEO plugin is already handling this.
    if ( defined( 'WPSEO_VERSION' ) || class_exists( 'RankMath' ) ) {
        return;
    }

    if ( is_singular() ) {
        $post = get_queried_object();

        $title       = get_the_title( $post );
        $description = has_excerpt( $post )
            ? get_the_excerpt( $post )
            : wp_trim_words( wp_strip_all_tags( $post->post_content ), 30 );
        $url         = get_permalink( $post );
        $type        = 'article';

        $image_id  = get_post_thumbnail_id( $post );
        $image_url = $image_id
            ? wp_get_attachment_image_url( $image_id, 'large' )
            : get_site_icon_url( 512 );
    } else {
        $title       = get_bloginfo( 'name' );
        $description = get_bloginfo( 'description' );
        $url         = home_url( '/' );
        $type        = 'website';
        $image_url   = get_site_icon_url( 512 );
    }

    printf( '<meta property="og:title" content="%s" />' . "\n", esc_attr( $title ) );
    printf( '<meta property="og:description" content="%s" />' . "\n", esc_attr( $description ) );
    printf( '<meta property="og:url" content="%s" />' . "\n", esc_url( $url ) );
    printf( '<meta property="og:type" content="%s" />' . "\n", esc_attr( $type ) );
    printf( '<meta property="og:site_name" content="%s" />' . "\n", esc_attr( get_bloginfo( 'name' ) ) );

    if ( $image_url ) {
        printf( '<meta property="og:image" content="%s" />' . "\n", esc_url( $image_url ) );
        printf( '<meta name="twitter:card" content="summary_large_image" />' . "\n" );
    }
}, 5 );

A few details worth understanding here:

The early guard against WPSEO_VERSION and RankMath prevents duplicate, conflicting Open Graph tags from being output twice on the same page if you (or a future you) later install an SEO plugin without removing this code.
wp_get_attachment_image_url( $image_id, 'large' ) returns an absolute URL to a full-sized image, not the relative path stored in the database, which matters because social crawlers won't resolve a relative URL correctly.
The priority argument 5 on add_action runs this early in wp_head, so if anything else needs to filter these values later, it has the chance to.

Choosing the Right Open Graph Image

Whichever method you use, the image itself matters more than any other single tag, since it's the most visually prominent part of the preview card on every platform.

Use a minimum of 1200×630 pixels. This is the size Facebook and LinkedIn recommend, and it renders correctly across both wide desktop feeds and narrow mobile ones without cropping unpredictably.
Keep it under roughly 5MB (Facebook's actual documented limit, well above what any reasonably optimized image needs to be), and consider converting it to WebP for a smaller file size without hosting-side compression artifacts.
Avoid putting critical text near the edges. Different platforms crop the same image to different aspect ratios, so text or logos placed near the border can get cut off on some networks even though they display fine on others.
Set a sitewide fallback image. Both Yoast and Rank Math let you configure one under their social settings, so pages without a featured image (a plain text page, for example) still generate a usable preview instead of a broken one.

Testing Your Open Graph Tags

Never assume Open Graph tags are working just because you can see them in your page source; social platforms cache the preview the first time they crawl a URL, which can hide both successes and mistakes until you force a fresh check.

Facebook Sharing Debugger (developers.facebook.com/tools/debug) — paste in your URL and click Scrape Again to force Facebook to re-fetch the page and show you exactly which tags it found, including any it's still using from a stale cache.
LinkedIn Post Inspector (www.linkedin.com/post-inspector) — does the same thing for LinkedIn's own cache, which is separate from Facebook's.
Twitter Card Validator is no longer publicly available, but Twitter/X reads standard Open Graph tags as a fallback for any twitter: tag it can't find, so testing with the Facebook debugger above is usually enough to confirm the preview will work there too.
View source directly with your browser's "View Page Source" (not the inspector, which shows the DOM after JavaScript runs) to confirm the raw <meta property="og:..."> tags are actually present in the HTML your server sends, rather than being injected client-side where a crawler might miss them.

If a stale image or title keeps showing up after you've fixed the tags, that's almost always the platform's own cache, not your site; re-scraping the URL through the debugger tools above is the fix, not editing the tags again.

Frequently Asked Questions (FAQ) About Open Graph Tags in WordPress

Not strictly. Twitter/X falls back to standard Open Graph tags (og:title, og:description, og:image) for anything it can't find in a dedicated twitter: tag. Adding twitter:card with a value of summary_large_image is usually the only Twitter-specific tag worth adding on top of full Open Graph coverage.

Facebook caches the Open Graph data for a URL the first time it's shared, and won't re-check it automatically. Use the Facebook Sharing Debugger and click "Scrape Again" to force it to re-fetch the current tags from your page.

Yes, both Yoast SEO and Rank Math use the post's featured image as the Open Graph image by default if no custom social image is set. The manual PHP method shown above does the same thing with wp_get_attachment_image_url().

1200x630 pixels is the recommended size for Facebook and LinkedIn, giving a roughly 1.91:1 aspect ratio that displays correctly without awkward cropping across most platforms and devices.

Not directly. Open Graph tags control social sharing previews, not search engine ranking factors. That said, better-looking social previews tend to get more clicks and shares, which can indirectly support your broader efforts to optimize your WordPress site for search engines.

Yes, and it causes duplicate or conflicting meta tags, which can make social platforms pick the wrong one unpredictably. If you switch SEO plugins, make sure only one has social/Open Graph output enabled, and check your page source afterward to confirm there's only one og:title tag.

Yes. The manual PHP example above handles both cases: singular posts and pages get an article type tag built from the post's own data, while everything else (the homepage, archive pages) falls back to sitewide site details with a website type tag.

Conclusion

Open Graph tags are a small amount of markup with an outsized effect on how your content performs once it leaves your site: the difference between a link that gets ignored in a feed and one with a clean title, a relevant description, and an image sized to actually display correctly. For most sites, an SEO plugin you likely already have installed handles this with a few settings and per-post overrides, no code required.

If you need more control than a plugin offers, the manual wp_head approach above gives you the same result with full ownership of the logic, and it's a pattern you can extend as needed, adding article-specific tags like article:published_time or article:author for even richer previews. Either way, always verify the result with the Facebook Sharing Debugger before assuming it's working, since a stale cache can hide a real problem for weeks.

Here are a few additional resources if you want to go deeper:

Open Graph Protocol: Official Specification — the full list of supported properties beyond the core set covered here.
Facebook Sharing Debugger — test and force a re-scrape of any URL's Open Graph data.
Yoast SEO Documentation: Social Settings — configuring Open Graph and Twitter Card output in Yoast.