Open Graph Tags in WordPress: Plugins and Manual Implementation
WordPress does not output Open Graph tags by default. You need either a plugin or manual code to control how your pages appear when shared on social platforms.
Plugin Approach: Yoast SEO
Yoast SEO is the most widely used WordPress SEO plugin. It automatically generates OG tags from your post content and lets you override them per page.
Setting OG tags in Yoast: Edit any post or page in WordPress. Scroll down to the Yoast SEO meta box (or open it in the sidebar). Click the Social tab (share icon). Select the Facebook sub-tab to set OG tags: Facebook Title overrides og:title (defaults to post title), Facebook Description overrides og:description (defaults to meta description), Facebook Image overrides og:image (defaults to featured image).
Select the Twitter sub-tab to set Twitter Card tags. Same fields as Facebook, but for twitter:title, twitter:description, twitter:image. If left blank, falls back to the Facebook values, then to post defaults.
Yoast global settings: Navigate to Yoast SEO > Social in the admin sidebar. On the Facebook tab, enable Open Graph meta data, set a default OG image for pages without a featured image, and enter your Facebook Page URL. On the Twitter tab, choose the default card type (summary or summary_large_image).
Yoast automatically sets og:type to article for posts and website for pages. It also outputs og:locale, og:site_name, and article:published_time/article:modified_time for posts.
Plugin Approach: Rank Math
Rank Math is an alternative to Yoast with similar OG tag management.
Setting OG tags in Rank Math: Edit a post or page. Click the Rank Math icon in the top toolbar or scroll to the Rank Math meta box. Click the Social tab. Configure the Facebook section: Title overrides og:title, Description overrides og:description, Image overrides og:image.
Switch to the Twitter section for Twitter-specific overrides. Rank Math also supports per-post card type selection (summary vs summary_large_image) and adds article properties for posts.
Manual Approach: functions.php
If you do not want a plugin, add OG tags via the wp_head action in your theme's functions.php.
function add_og_meta_tags() {
if (is_singular()) {
global $post;
setup_postdata($post);
$title = get_the_title();
$description = has_excerpt() ? get_the_excerpt() : wp_trim_words(get_the_content(), 30);
$url = get_permalink();
$site_name = get_bloginfo('name');
$type = is_single() ? 'article' : 'website';
// Get featured image or fallback
$image = '';
if (has_post_thumbnail()) {
$img_data = wp_get_attachment_image_src(get_post_thumbnail_id(), 'full');
if ($img_data) {
$image = $img_data[0];
}
}
// Fallback image
if (empty($image)) {
$image = 'https://example.com/images/default-og.jpg';
}
echo '<meta property="og:title" content="' . esc_attr($title) . '" />' . "\n";
echo '<meta property="og:description" content="' . esc_attr($description) . '" />' . "\n";
echo '<meta property="og:type" content="' . esc_attr($type) . '" />' . "\n";
echo '<meta property="og:url" content="' . esc_url($url) . '" />' . "\n";
echo '<meta property="og:site_name" content="' . esc_attr($site_name) . '" />' . "\n";
echo '<meta property="og:image" content="' . esc_url($image) . '" />' . "\n";
echo '<meta property="og:image:width" content="1200" />' . "\n";
echo '<meta property="og:image:height" content="630" />' . "\n";
echo '<meta name="twitter:card" content="summary_large_image" />' . "\n";
// Article properties for posts
if (is_single()) {
echo '<meta property="article:published_time" content="' . esc_attr(get_the_date('c')) . '" />' . "\n";
echo '<meta property="article:modified_time" content="' . esc_attr(get_the_modified_date('c')) . '" />' . "\n";
}
wp_reset_postdata();
} else {
// Homepage / archive fallbacks
$site_name = get_bloginfo('name');
$description = get_bloginfo('description');
$image = 'https://example.com/images/default-og.jpg';
echo '<meta property="og:title" content="' . esc_attr($site_name) . '" />' . "\n";
echo '<meta property="og:description" content="' . esc_attr($description) . '" />' . "\n";
echo '<meta property="og:type" content="website" />' . "\n";
echo '<meta property="og:url" content="' . esc_url(home_url('/')) . '" />' . "\n";
echo '<meta property="og:site_name" content="' . esc_attr($site_name) . '" />' . "\n";
echo '<meta property="og:image" content="' . esc_url($image) . '" />' . "\n";
echo '<meta name="twitter:card" content="summary_large_image" />' . "\n";
}
}
add_action('wp_head', 'add_og_meta_tags', 5);Manual Approach: Theme header.php
If you prefer editing the template directly, add OG tags to your theme's header.php inside the <head> tag. The functions.php approach is more maintainable. The header.php approach works but mixes logic with template markup and is harder to override in child themes.
<head>
<meta charset="<?php bloginfo('charset'); ?>">
<meta name="viewport" content="width=device-width, initial-scale=1">
<?php if (is_singular() && has_post_thumbnail()): ?>
<?php $img = wp_get_attachment_image_src(get_post_thumbnail_id(), 'full'); ?>
<meta property="og:title" content="<?php echo esc_attr(get_the_title()); ?>" />
<meta property="og:description" content="<?php echo esc_attr(get_the_excerpt()); ?>" />
<meta property="og:image" content="<?php echo esc_url($img[0]); ?>" />
<meta property="og:image:width" content="<?php echo esc_attr($img[1]); ?>" />
<meta property="og:image:height" content="<?php echo esc_attr($img[2]); ?>" />
<meta property="og:url" content="<?php echo esc_url(get_permalink()); ?>" />
<meta property="og:type" content="article" />
<meta name="twitter:card" content="summary_large_image" />
<?php endif; ?>
<?php wp_head(); ?>
</head>Setting a Default OG Image
Every page should have an OG image, even if no featured image is set. Here are the options:
Yoast SEO: Go to Yoast SEO > Social > Facebook and upload a default image under "Image URL."
Rank Math: Go to Rank Math > Titles & Meta > Global Meta and set the "OpenGraph Thumbnail."
Manual (functions.php): Add a fallback in your OG tag function (shown in the code example above) that uses a hardcoded URL when no featured image exists.
Recommended default image specs: 1200 x 630 pixels, your brand logo or a branded template, JPEG or PNG format.
Testing WordPress OG Tags
1. View page source. Open your page in a browser, right-click, and select "View Page Source." Search for og: to find your meta tags. Verify they are inside the <head> tag.
2. Facebook Sharing Debugger. Go to developers.facebook.com/tools/debug/, enter your URL, and click Debug. Check which tags Facebook detected and whether there are warnings.
3. Twitter Card Validator. Go to cards-dev.x.com/validator and enter your URL. Check the log for parsing errors.
4. Check for duplicates. A common issue is multiple plugins outputting OG tags. Search the page source for og:title — if it appears more than once, you have a conflict.
Common WordPress OG Issues
Duplicate OG tags: Caused by multiple SEO plugins active at the same time (e.g., Yoast + Rank Math). Fix: deactivate one SEO plugin. Only use one plugin for OG tags.
Stale image after update: Caused by Facebook cache (30 days) or WordPress caching plugin. Fix: clear your caching plugin, then scrape again in the Facebook Debugger.
OG image shows wrong image: Theme or plugin adds its own og:image before yours. Fix: check the wp_head action priority. Use a lower number (higher priority) in add_action.
Tags not in <head>: Plugin outputs tags in <body> due to incorrect hook. Fix: verify the plugin uses wp_head hook. Check for theme issues with wp_head() placement.
CDN serves stale HTML: CDN caches the full page including meta tags. Fix: purge CDN cache after content updates. Configure CDN to respect Cache-Control headers.
Featured image too small: Original upload is below 200x200. Fix: re-upload a larger image (1200x630 recommended) as the featured image.
OG tags missing on custom post types: Plugin does not support the custom post type. Fix: check plugin settings for CPT support, or use the manual functions.php approach with is_singular('your_cpt').
Quick Reference
Yoast SEO: Per-page control, auto-generates defaults, widely supported. Downside: plugin overhead, potential conflicts.
Rank Math: Similar to Yoast, good UI, built-in Schema support. Downside: plugin overhead, potential conflicts.
functions.php: No plugin dependency, full control. Downside: requires PHP knowledge, manual maintenance.
header.php: Simple, no hooks needed. Downside: mixes logic with template, harder to maintain.
FAQ
Use a plugin if you want per-page OG customization through the WordPress editor without touching code. Use the manual approach if you want to minimize plugin dependencies, have a developer maintaining the site, or need custom logic (e.g., pulling OG data from custom fields or ACF).
Facebook caches OG data for approximately 30 days. Steps: (1) Clear your WordPress caching plugin (WP Super Cache, W3 Total Cache, etc.). (2) If using a CDN (Cloudflare, etc.), purge the CDN cache. (3) Go to the Facebook Sharing Debugger and click "Scrape Again" twice. See Facebook Meta Tags for more details.
Do not do this. You will get duplicate meta tags, which confuses crawlers. Choose one method. If you use Yoast (or any SEO plugin), remove any manual OG tag code from your theme.
WooCommerce product pages work with standard OG plugins. Yoast SEO and Rank Math both detect WooCommerce and set og:type to product, add price metadata, and use the product image as og:image. No extra configuration needed in most cases.
Yoast SEO and Rank Math both generate OG tags for archive pages automatically, using the category/tag name as the title and description. For manual implementations, check for is_category() or is_tag() in your functions.php code and use single_cat_title() or single_tag_title() for the title.