Skip to content

Open Graph

Adding Open Graph tags in WordPress

By Hannah Voss, Editor · Reviewed September 2026 · 7 min read

Quick answer

Open Graph tags tell networks what title, description and image to show when your page is shared. In WordPress, let one SEO plugin output them, set a default image, and override the title, description and image per post where needed. Check the page source for duplicates from your theme or a share plugin, then test in each network's debugger.

A dark paper preview panel with two thin grey paper bars standing apart on either side of it, ready to be assembled

The tags that matter

TagRequired by the protocolWhat it controls
og:titleYesHeadline on the preview card
og:typeYesUsually website or article
og:imageYesThe preview image
og:urlYesThe canonical address the share counts against
og:descriptionNoOne or two lines under the title
og:site_nameNoYour site name on some cards
og:image:width and og:image:heightNoLets the network lay out the card before downloading the image

Option 1: one SEO plugin

  1. Pick one source

    Most SEO plugins output Open Graph tags. Use exactly one plugin for them; turn off the same feature in your share plugin and theme.

  2. Set defaults

    Add a default share image, 1200 by 630 pixels, for pages without their own. See Open Graph image size.

  3. Override per post

    In the post editor's social settings, write a share title and description when the SEO title does not suit a social feed.

  4. Check the source

    View the page source and search for og:image. There should be one set of tags.

  5. Test

    Run the address through the Sharing Debugger and the LinkedIn Post Inspector.

Option 2: theme code

If you do not use an SEO plugin, print the tags from wp_head in your child theme. Use the post's featured image at a registered size of 1200 by 630, fall back to a site default, and escape every value.

add_action( 'wp_head', function () {
  if ( ! is_singular() ) { return; }
  $img = get_the_post_thumbnail_url( null, 'og-image' ) ?: 'https://example.com/default-share.png';
  printf( '<meta property="og:title" content="%s">', esc_attr( get_the_title() ) );
  printf( '<meta property="og:type" content="article">' );
  printf( '<meta property="og:url" content="%s">', esc_url( get_permalink() ) );
  printf( '<meta property="og:image" content="%s">', esc_url( $img ) );
} );

Open Graph in WordPress: a worked example

The post is invented; the tag set is the one a correctly configured site prints. A post titled "Why the town clock runs slow" at https://example.com/town-clock/ has a featured image uploaded at 2400 by 1600. The theme registered an og-image size of 1200 by 630 with a hard crop, the SEO plugin owns the tags, and the editor wrote a shorter social title because the SEO title carried the site name. The head of the page then contains this block, and nothing else with an og: prefix.

<meta property="og:type" content="article">
<meta property="og:title" content="Why the town clock runs slow">
<meta property="og:description" content="A 140 year old escapement, a hot summer, and a repair that took three attempts.">
<meta property="og:url" content="https://example.com/town-clock/">
<meta property="og:site_name" content="Example Town Journal">
<meta property="og:image" content="https://example.com/wp-content/uploads/2026/09/town-clock-1200x630.jpg">
<meta property="og:image:width" content="1200">
<meta property="og:image:height" content="630">
<meta property="og:image:alt" content="The town clock face with the minute hand at ten past">
<meta name="twitter:card" content="summary_large_image">

Ten lines. The og:url matches the canonical link exactly, including the trailing slash, so every share counts against one address. The image URL is absolute and points at the cropped 1200 by 630 file rather than the 2400 by 1600 original, which keeps the file near 150 KB. The single twitter:card line is all X needs when the Open Graph set is complete; the rest of that story is in Twitter card tags.

Why share plugins shipped their own tags

Some share plugins, MashShare with its Open Graph add-on among them, generated tags so that the image chosen for sharing matched the buttons. That made sense when few themes printed tags. Today it usually means two conflicting sets, which is the most common cause of the wrong image appearing on Facebook.

Source of duplicate tagsWhere to turn it offHow to confirm
SEO pluginIts social or Open Graph settingsKeep this one; it should be the only source
Share button pluginThe plugin's Open Graph or social meta optionSearch source for a second og:image after saving
ThemeCustomizer social settings, or a wp_head hook in functions.phpSwitch to a default theme briefly and compare source
Page builderIts SEO or meta panel per pageCheck a builder page and a plain post separately
Caching or optimisation pluginRarely; some inject a fallback imageDisable, purge, view source again
The Open Graph setup loop01One pluginoutputs tags02Page sourceone set only03Debuggerscrape again04Previewcorrect card
When the preview is wrong, go back to step two before anything else.

Refreshing the networks after a change

Editing a tag changes nothing on a network that has already cached the old card. After you save, clear your own layers first, then ask each network to fetch the page again. The order below applies to every tag change, including the first setup.

  1. Purge the page cache and any CDN for the post URL, then confirm the new tags in a private window.
  2. Paste the URL into the network's sharing debugger for Facebook and press Scrape Again; read the tags it lists back, not just the preview.
  3. Paste the URL into the LinkedIn Post Inspector, which fetches a fresh copy on each run.
  4. For X, draft a post with the link and check the composer preview; new posts pick up the change before old ones.
  5. Wait a minute, then run the Facebook debugger once more; the image is sometimes fetched on the second scrape.

What goes wrong

  • Two sources. Two og:image tags in the source, usually the SEO plugin and a share plugin. The network takes one, and it is often the wrong one; the diagnosis is in Facebook showing the wrong image or share text.
  • A relative image path. /wp-content/uploads/... without the scheme and host is ignored by most scrapers. Use the absolute URL.
  • og:url that differs from the canonical. A trailing slash or a www difference splits share counts between two addresses.
  • Tags printed only for logged-in users. A plugin that outputs tags inside an admin-only condition, or a page cache that stored a pre-plugin copy, leaves readers' shares without tags. Always view source logged out.
  • Missing authorship tags. The Open Graph set says what the page is; the author and article:author tags described in the authorship tags that sit next to Open Graph say who made it, and a few clients show that name on the card.

Check the Open Graph WordPress setup worked

  • View source, logged out, and count the og:image tags. The answer is one.
  • og:url equals the canonical link character for character.
  • The og:image URL opens in a private window over https and is 1200 by 630.
  • The Facebook debugger lists the same title, description and image as your source, with no warning about a missing image or app ID.
  • The LinkedIn Post Inspector shows the same card.
  • A post shared from a test account on each network shows the intended card.

For the wider picture, see the Open Graph and link preview guides. Readers who get this far often also need Facebook showing the wrong image or share text or Twitter cards on X: tags and testing.

Sources

Questions

Do I need a plugin for Open Graph tags?

No, but an SEO plugin is the easiest way. Theme code in wp_head works if you escape every value.

Which Open Graph tags are required?

The protocol requires og:title, og:type, og:image and og:url. Description and image dimensions are strongly recommended.

Why do I have two sets of Open Graph tags?

Your theme, SEO plugin or share plugin each output tags. Turn the feature off in all but one.

Where do Open Graph tags go in WordPress?

In the head of the page, printed by the wp_head action. SEO plugins do this for you; theme code hooks the same action and prints the tags before the closing head tag.

How do I add Open Graph tags to WordPress without a plugin?

Hook wp_head in a child theme, print og:title, og:type, og:url and og:image for singular pages, escape every value with esc_attr or esc_url, and fall back to a default image when a post has none.

Share this guide

Hannah Voss, Editor. Checks every guide against a working WordPress install and the networks' current documentation. Last reviewed September 2026.

  1. Facebook showing the wrong image or share textFix Facebook showing the wrong image or text when you share a WordPress post: duplicate tags, small images, cache, blocked crawlers, and the Sharing Debugger.7 min read
  2. Open Graph image size: 1200 by 630 and the safe zoneThe right Open Graph image size is 1200 by 630 pixels at a 1.91:1 ratio. Minimums, file limits, formats, and a centre safe zone for square crops.6 min read
  3. Twitter cards on X: tags and testingSet up Twitter card tags so links to your WordPress posts show a large image on X: the summary_large_image card, fallbacks to Open Graph, sizes and testing.6 min read
  4. Authorship tags for shared links: author, article:author and fediverse:creatorAdd authorship signals to link previews: the author meta tag, article:author, twitter:creator and fediverse:creator, with WordPress code and testing steps.6 min read