The Open Graph protocol (OG) is a set of meta tags originally created by Facebook in 2010. These tags sit in the <head> of your HTML and tell social media platforms exactly how to display your content when someone shares a link. Without them, platforms try to piece together a preview from whatever they can find on the page, and the result is usually not great.
Where Open Graph Tags Appear in Practice
When someone pastes a link into Facebook, LinkedIn, WhatsApp, Telegram, Slack, or Discord, the platform fetches the page and reads its OG tags. Those tags determine the preview title, description, and image that appear in the post or message. This preview is often the first impression people get of your content, so controlling it matters. A link with a clear image and compelling title gets significantly more clicks than one with a broken thumbnail or a generic description pulled from the page footer.
Required vs. Optional Open Graph Tags
The Open Graph specification defines four required properties:
og:title: The title of your content as it should appear in the social preview.og:type: The type of content. Defaults to "website" if omitted.og:image: The URL of the image to display in the preview.og:url: The canonical URL of the page.
Beyond these, several optional tags are commonly used:
og:description: A one-to-two sentence summary of the page.og:site_name: The name of your overall website (e.g., "InspectWP").og:locale: The language and territory (e.g.,en_US,de_DE).og:video: A URL to a video file associated with the content.
Understanding og:type Values
The og:type tag tells platforms what kind of content the page represents. The most common values are:
- website: Use for your homepage and general pages. This is the default if no type is specified.
- article: Use for blog posts, news articles, and any written content with a publication date. This type unlocks additional tags like
article:published_time,article:author, andarticle:section. - product: Used by e-commerce sites to describe products. Supports tags like
product:price:amountandproduct:price:currency. - profile: For pages representing a person. Supports
profile:first_nameandprofile:last_name.
og:image Requirements and Best Practices
The preview image is the most visually prominent part of a social share, so getting it right is important. Here are the specifics:
- Minimum size: Facebook recommends at least 1200 x 630 pixels for high-resolution displays. Images smaller than 600 x 315 pixels may not display properly or may appear as a small thumbnail instead of a large card.
- Aspect ratio: 1.91:1 is the standard for large link previews across most platforms. Square images (1:1) also work but produce a different layout.
- File size: Keep images under 8 MB. Facebook and LinkedIn can be slow to render very large images.
- Format: JPEG and PNG are universally supported. WebP works on some platforms but not all.
- Always use absolute URLs: The image URL must start with
https://. Relative paths will not work because the social platform fetches the image from its own servers.
How the Facebook Sharing Debugger Works
Facebook caches your OG data aggressively. If you update your OG tags, the old preview may still show when someone shares your link. The Facebook Sharing Debugger (developers.facebook.com/tools/debug/) lets you enter a URL and see exactly what Facebook reads from it. You can click "Scrape Again" to force Facebook to refetch the page and update its cache. This tool is also valuable for debugging issues like missing images, incorrect titles, or tags that are not being parsed correctly. LinkedIn has a similar tool called the Post Inspector.
Open Graph and Twitter Cards
Twitter (now X) developed its own meta tag system called Twitter Cards. Twitter Card tags use the name attribute instead of property:
<meta name="twitter:card" content="summary_large_image" />
<meta name="twitter:title" content="Your Page Title" />
<meta name="twitter:description" content="A brief description" />
<meta name="twitter:image" content="https://example.com/image.jpg" />The good news is that Twitter falls back to Open Graph tags when Twitter Card tags are missing. So if you have og:title but no twitter:title, Twitter will use the OG title. However, the twitter:card tag itself has no OG equivalent, so you should always include at least that one Twitter-specific tag. Setting it to summary_large_image produces the most visually appealing preview with a large image above the text.
WordPress and Open Graph Tag Generation
WordPress core does not include Open Graph tags by default. You need a plugin to add them. The most popular options are:
- Yoast SEO: Generates all essential OG tags automatically using the post title, excerpt, and featured image. Lets you override OG title, description, and image per post through the "Social" tab in the editor. Also generates Twitter Card tags.
- Rank Math: Similar to Yoast with automatic OG generation and per-post overrides. Includes a social preview feature that shows how the post will look when shared.
- The SEO Framework: A lightweight alternative that generates OG and Twitter tags with minimal setup. Less configuration options but solid defaults.
If you use a page builder like Elementor or a caching plugin, make sure the OG tags are present in the cached HTML output. Some aggressive caching setups can strip meta tags from the <head> section.
WooCommerce Product Open Graph Tags
For WooCommerce stores, OG tags become even more important because product previews directly influence purchase decisions. A well-configured product page should include og:type set to "product", along with the product name as the title, a compelling description, and the main product image. SEO plugins like Yoast WooCommerce SEO or Rank Math can generate these automatically. The product price and availability can also be included through additional OG tags, which some platforms display in the preview.
Common Open Graph Mistakes
- Wrong image size: Using an image smaller than 600 x 315 pixels results in a tiny thumbnail instead of a large card preview. Always use the recommended 1200 x 630 pixels.
- Missing og:image tag: Without an image tag, platforms either show no image or pick a random image from the page, which might be a sidebar ad or a logo that looks terrible as a preview.
- Relative URLs: All OG URLs must be absolute.
/images/photo.jpgwill not work; it must behttps://example.com/images/photo.jpg. - Duplicate OG tags: Having two
og:titletags on the same page (for example from two different plugins) causes unpredictable behavior. Check your page source to make sure each OG tag appears only once. - Not testing after changes: OG data is cached by social platforms. After updating tags, always clear the cache using the Facebook Debugger or LinkedIn Post Inspector to verify the new tags are working.
What InspectWP Checks
InspectWP scans your page's <head> section and reports which Open Graph and Twitter Card tags are present. It shows the exact values for each tag, making it easy to verify that titles, descriptions, and image URLs are correct. Missing social media meta tags are highlighted as an SEO improvement opportunity, since pages without OG tags tend to get less engagement when shared on social platforms.