core

Open Graph

> Quick definition: Open Graph is a set of HTML meta tags added to a page's <head> that tells social platforms what title, description, image, and URL to display in a link preview. It was introdu...

Open Graph

Open Graph (OG) is a metadata protocol that controls how your web pages appear when shared on social media platforms. Without it, Facebook, LinkedIn, and other platforms guess which image and text to display — usually with poor results.

Quick definition: Open Graph is a set of HTML meta tags added to a page’s <head> that tells social platforms what title, description, image, and URL to display in a link preview. It was introduced by Facebook in 2010 and is now used by virtually every major social network. Last verified: April 2026.

This glossary entry is for WordPress site owners and freelancers who want clean, professional-looking social shares without touching code manually.

Affiliate disclosure: Some links on WPSchool lead to products we have a referral relationship with. This page is educational and contains no affiliate links.

What does Open Graph do in WordPress?

Open Graph tags sit in your page’s HTML <head> and are invisible to visitors. When someone shares a link, the social platform reads those tags — not the page content — to build the preview card. Without OG tags, platforms pull unpredictable images and truncated titles. We see this constantly on client sites where the homepage shares fine but product pages display a generic logo thumbnail.

The four essential Open Graph tags

Every page needs at minimum four tags to produce a reliable share preview:

TagWhat it setsExample value
og:titlePreview headline”Best WordPress Hosting 2026”
og:descriptionPreview subtitle”We tested 12 hosts — here’s the winner.”
og:imagePreview imageA 1200×630px JPG or PNG
og:urlCanonical URLhttps://wpschool.com/post-slug/

Twitter/X uses its own twitter:card tags but falls back to OG tags when Twitter-specific ones are absent — so OG tags cover both platforms with one implementation.

How to set Open Graph tags in WordPress

You do not write these tags manually. Any major SEO plugin handles it automatically:

  • Rank Math — OG fields are built into every post’s SEO panel; free tier included. (WordPress.org plugin page)
  • Yoast SEO — Social tab on each post lets you set a custom OG image and title; also free.
  • AIOSEO — Social Networks tab under each post with per-platform preview.

In our testing across 200+ client sites, Rank Math Pro’s per-post social preview is the fastest workflow — you see the card mock-up before publishing, which eliminates the guesswork.

One gotcha most guides skip

Facebook and LinkedIn cache OG data aggressively. If you update an OG image after a page has already been shared, the old image keeps appearing. Fix it by submitting the URL to the Facebook Sharing Debugger — this forces a cache refresh. LinkedIn has its own Post Inspector tool that does the same thing. We include this step in every client site launch checklist because missing it means launch-day shares show stale content.

Code example

<meta property="og:title" content="Open Graph Explained" />
<meta property="og:description" content="What OG tags do and how to set them in WordPress." />
<meta property="og:image" content="https://example.com/og-image.jpg" />
<meta property="og:url" content="https://example.com/open-graph/" />
<meta property="og:type" content="article" />

SEO plugins write this automatically — you never need to paste it by hand.

  • Meta tags — the broader category OG tags belong to
  • Twitter Card — Twitter’s equivalent metadata system
  • Schema markup — structured data for search engines, distinct from social metadata
  • Canonical URL — the og:url value should always match your canonical
  • Featured image — WordPress’s featured image is what most SEO plugins use as the default og:image

Additional reading

Back to Glossary