ZeroToWP

Open Graph

Quick Definition

A protocol created by Facebook that controls how your pages appear when shared on social media and messaging apps — defining the title, image, and description shown in link preview cards.

The Open Graph protocol official specification at ogp.me

What Is Open Graph?

Open Graph (OG) is a protocol that controls how your web pages appear when someone shares them on Facebook, LinkedIn, Twitter, WhatsApp, Slack, and other platforms. Without it, social networks have to guess which title, image, and description to display — and they often guess wrong.

Facebook introduced the Open Graph protocol in 2010, building on existing standards like Dublin Core and RDFa. The specification lives at ogp.me and defines a set of <meta> tags you place inside the <head> section of your HTML. When a social platform's crawler fetches your URL, it reads these tags to generate the rich preview card users see in their feeds.

Four meta tags are required by the protocol:

  • og:title — The headline shown on the preview card.
  • og:type — The content type (e.g. article, website, video.movie).
  • og:image — The URL of the image displayed in the card. For best results, use a 1200 × 630 pixel image.
  • og:url — The canonical URL of the page.

Two optional but strongly recommended tags round out most implementations: og:description (a one-to-two sentence summary) and og:site_name (your website's name).

Open Graph in Practice

On WordPress, you rarely add Open Graph tags by hand. SEO plugins like Yoast SEO and Rank Math automatically generate all required OG tags for every post and page, pulling from your SEO title, meta description, and featured image. Both plugins also let you override the social title and image per post if you want the shared version to differ from the search engine version.

Twitter Cards work similarly but use their own tags (twitter:card, twitter:title, twitter:image). Twitter will fall back to Open Graph tags when its own are missing, so most SEO plugins output both sets automatically.

After setting your tags, use Facebook's Sharing Debugger to preview exactly what Facebook will display and force it to re-scrape a page after changes. LinkedIn has its own Post Inspector for the same purpose.

Without Open Graph tags, platforms often pull the wrong image (a sidebar ad or logo), truncate the title, or show no description at all — making your shared links look unprofessional and reducing click-through rates.

Why It Matters

Every time someone shares your content on social media or in a group chat, Open Graph tags determine whether that link looks compelling or broken. A well-configured OG image and title can significantly increase the number of clicks your shared posts receive. Since WordPress SEO plugins handle this automatically, there is almost no reason to leave it unconfigured.

Sources: The Open Graph protocol — ogp.me · WPBeginner — Open Graph in WordPress

Related Terms

Related Articles