Implementing Open Graph tags in WordPress is either automatic through your SEO plugin or manual through theme code, depending on how your site is built. Most WordPress sites use Yoast SEO or RankMath, both of which generate Open Graph tags automatically once correctly configured. Sites with custom themes or no SEO plugin need to add Open Graph tags through functions.php or a custom plugin. This guide covers the complete implementation process for all three approaches, the specific settings that matter in each SEO plugin, the verification steps that confirm your tags are being output correctly, and the most common implementation errors that cause Open Graph to fail silently even when the configuration looks correct.
If you want to compare your Open Graph implementation with other SEO practitioners and troubleshoot specific issues, Scale Xpert’s Discord community is where those conversations happen. It is a community for SEO learning and genuine backlink exchange.
Before You Implement: Understanding What WordPress Generates by Default
WordPress does not generate Open Graph tags by default. A freshly installed WordPress site with no SEO plugin and no custom theme code has no og:title, og:image, og:type, or any other Open Graph property in its page output. When someone shares a URL from a standard WordPress site without Open Graph implementation, social platforms fall back to guessing based on the page title tag, the first image found on the page, and extracted text content.
This default behavior produces unpredictable results. The image selected may be your logo, a sidebar widget image, or a stock photo embedded in an older post rather than the featured image you intended. The description may be the first paragraph of your content, your navigation menu text, or your footer content depending on how the platform’s extractor interprets your HTML. The title may include your site name appended in a format different from how you would choose to present it.
Understanding that Open Graph is entirely absent until you explicitly add it explains why implementing it produces immediate, visible improvement in how your shared content looks across every platform that reads Open Graph tags. It is not an optimization of an existing feature. It is enabling a feature that is completely off by default.
Before implementing, verify your current state by checking your existing page source. Right-click any page on your site, select View Page Source, and search for “og:” using Ctrl+F or Cmd+F. If no results are found, you have no Open Graph implementation currently active. If results appear, your current SEO plugin or theme is already generating some Open Graph tags, and your implementation work is configuration rather than installation.
The complete guide to what Open Graph is and why it matters for SEO covers the full protocol specification and the SEO benefits that make this implementation worth prioritizing.
Method 1: Implementing Open Graph Through Yoast SEO
Yoast SEO is the most widely used WordPress SEO plugin and generates comprehensive Open Graph tags automatically once its social settings are correctly configured. The configuration involves three distinct areas: enabling Open Graph output, setting your default social image, and configuring per-post Open Graph overrides.
Step 1: Enable Open Graph Output
In your WordPress dashboard, navigate to SEO in the left sidebar (added by Yoast), then click Social. You will see tabs for Facebook, Twitter, Pinterest, and other platforms. Click the Facebook tab. The first setting is a toggle labeled Add Open Graph meta data. Ensure this is turned on. Despite being labeled Facebook, this setting controls Open Graph output globally, not just for Facebook shares. All platforms that read Open Graph tags, including LinkedIn, WhatsApp, Telegram, and Slack, use the same meta tags that this setting controls.
Step 2: Set Your Default Open Graph Image
Still in the Social settings under the Facebook tab, you will see a field labeled Default image. This is the image Yoast uses as og:image for any page that does not have a featured image or a custom social image set. Upload a high-quality image of at least 1200 by 630 pixels that represents your brand appropriately for social sharing contexts where no more specific image is available. This default image typically appears on your homepage, category pages, tag archive pages, and any individual posts that lack a featured image.
The default image should be visually recognizable as your brand, readable at small preview sizes, and designed with the understanding that it may appear on any page of your site when a more specific image is not available.
Step 3: Configure the Twitter Tab
Click the Twitter tab in the Yoast Social settings. You will see a Card type dropdown with options including Summary and Summary with large image. Select Summary with large image. This setting controls the twitter:card property value and determines whether Twitter/X displays your content with a small thumbnail summary or with a large, feed-dominating image preview. Summary with large image consistently produces higher CTR from Twitter/X shares.
Also enter your Twitter username in the field provided. This populates the twitter:site property.
Step 4: Set Per-Post Open Graph Data
For individual posts and pages where you want to customize the Open Graph title, description, or image beyond the defaults, Yoast adds a Social section within each post’s edit screen. Scroll down past the content editor to find the Yoast SEO metabox. Click the Social tab within that metabox.
You will see two sub-tabs: Facebook and Twitter. Under Facebook, you can enter a custom og:title, og:description, and og:image that override Yoast’s automatic values for that specific post. Under Twitter, you can enter equivalent Twitter-specific overrides. If you leave these fields empty, Yoast uses the post’s SEO title, SEO meta description, and featured image as the Open Graph values automatically.
The most important per-post customization is the Open Graph image. For each article where social sharing is important, upload a custom social image sized specifically for social preview display at 1200 by 630 pixels. This image is separate from your post’s featured image and allows you to use a design optimized for social feeds without changing the in-post visual.
Step 5: Verify Yoast’s Output
After configuring Yoast, verify the output by viewing the page source of any post and searching for og: tags. You should see og:title, og:description, og:image, og:url, og:type, and og:site_name at minimum. Also check that the og:image value is an absolute URL starting with https:// rather than a relative path.
Method 2: Implementing Open Graph Through RankMath
RankMath’s Open Graph implementation follows a similar configuration pattern to Yoast but with slightly different navigation paths and some additional granular controls.
Step 1: Verify Open Graph is Enabled in RankMath
In your WordPress dashboard, navigate to RankMath, then General Settings, then Links. Scroll down to find the Open Graph option and confirm it is enabled. RankMath enables Open Graph by default in most installation configurations, but confirming this prevents the common confusion of configuring settings for a feature that is disabled.
Step 2: Configure Social Profiles
Navigate to RankMath, then General Settings, then Social Networks. Enter your site’s social profile URLs for each platform. RankMath uses these to generate appropriate social profile markup and to populate social-specific Open Graph properties. Enter your Twitter/X username in the Twitter Username field, which populates the twitter:site property.
Step 3: Set the Twitter Card Type
Still in General Settings, click the Social Networks tab if it is not already visible. Find the Twitter Card Type setting and select Summary with Large Image. This is the equivalent of Yoast’s Card type setting and controls how your content displays in Twitter/X feeds.
Step 4: Configure Per-Post Open Graph in RankMath
RankMath adds a metabox to each post and page edit screen. In the RankMath metabox, click the Social tab. You will see the ability to set a custom Social Title, Social Description, and Social Thumbnail (the Open Graph image) for both Facebook/Open Graph and Twitter specifically. Fill in the Social Thumbnail field with an image sized at 1200 by 630 pixels for posts where you want a specific social image. Leave the Social Title and Social Description fields empty to use RankMath’s automatic generation from your SEO title and meta description.
RankMath also provides an Open Graph preview directly in the Social tab that shows how your post will appear when shared on Facebook and Twitter/X based on your current settings. This preview updates as you change settings, allowing you to verify the appearance before publishing.
Step 5: Configure RankMath’s Schema Integration
RankMath integrates Open Graph generation with its schema markup system. When you set og:type to article on a post, RankMath automatically generates the corresponding Article schema markup with consistent values. This integration ensures that your Open Graph and schema markup stay aligned, preventing the entity inconsistency that reduces AI citation confidence. Navigate to RankMath, then Titles and Meta, then Posts to configure how RankMath generates Open Graph for your post types.
Method 3: Custom Code Implementation Without a Plugin
Sites using custom themes without SEO plugins, or sites where SEO plugin Open Graph generation conflicts with specific requirements, can implement Open Graph directly through WordPress hooks in the theme’s functions.php file or in a custom plugin.
The WordPress hook for adding content to the HTML head is wp_head. Adding a function hooked to wp_head that outputs Open Graph meta tags produces the same result as plugin-generated tags, with complete control over the specific values output.
A basic custom Open Graph implementation for posts looks like this in functions.php:
function custom_open_graph_tags() {
if ( is_single() || is_page() ) {
global $post;
// Get post data
$title = get_the_title( $post->ID );
$url = get_permalink( $post->ID );
$description = has_excerpt( $post->ID )
? get_the_excerpt( $post->ID )
: wp_trim_words( strip_tags( $post->post_content ), 30 );
// Get featured image or fallback
$image_url = '';
if ( has_post_thumbnail( $post->ID ) ) {
$image_array = wp_get_attachment_image_src(
get_post_thumbnail_id( $post->ID ),
'large'
);
$image_url = $image_array[0];
} else {
$image_url = 'https://yoursite.com/path/to/default-og-image.jpg';
}
// Output Open Graph tags
echo '<meta property="og:title" content="' . esc_attr( $title ) . '" />' . "\n";
echo '<meta property="og:type" content="article" />' . "\n";
echo '<meta property="og:url" content="' . esc_url( $url ) . '" />' . "\n";
echo '<meta property="og:image" content="' . esc_url( $image_url ) . '" />' . "\n";
echo '<meta property="og:description" content="' . esc_attr( $description ) . '" />' . "\n";
echo '<meta property="og:site_name" content="' . esc_attr( get_bloginfo( 'name' ) ) . '" />' . "\n";
// Article-specific properties
echo '<meta property="article:published_time" content="' . get_the_date( 'c', $post->ID ) . '" />' . "\n";
echo '<meta property="article:modified_time" content="' . get_the_modified_date( 'c', $post->ID ) . '" />' . "\n";
// Twitter Card tags
echo '<meta name="twitter:card" content="summary_large_image" />' . "\n";
echo '<meta name="twitter:title" content="' . esc_attr( $title ) . '" />' . "\n";
echo '<meta name="twitter:description" content="' . esc_attr( $description ) . '" />' . "\n";
echo '<meta name="twitter:image" content="' . esc_url( $image_url ) . '" />' . "\n";
}
}
add_action( 'wp_head', 'custom_open_graph_tags' );
This function outputs Open Graph tags for single posts and pages. Extend it with additional conditional checks (is_home(), is_archive(), is_category()) to handle other page types according to your site’s specific needs.
For the homepage specifically, create a separate conditional that outputs og:type as website rather than article and uses your designated homepage Open Graph image and description.
When using custom code, add a priority parameter to wp_head to ensure your tags are not duplicated if a plugin also outputs Open Graph. Priority values below 10 output before most plugin content, and you can disable plugin Open Graph output specifically if you know the plugin’s output hook and priority.
Verifying Your Open Graph Implementation
After implementing Open Graph through any method, three verification steps confirm correct output before testing on live platforms.
Verification Step 1: Page Source Check
View the source of any post or page on your site (right-click, View Page Source). Search for og: in the page source. Confirm that og:title, og:type, og:image, og:url, and og:description are all present. Check that the og:image value is an absolute URL beginning with https:// not a relative path. Check that og:title and og:description values are enclosed in quotes with no character encoding errors for special characters.
Verification Step 2: Facebook Sharing Debugger
Navigate to developers.facebook.com/tools/debug/ and enter any URL from your site. The debugger fetches your page as Facebook’s crawler sees it and displays every detected Open Graph property with its value. Review the output for warnings or errors. Common errors at this stage include og:image too small (image does not meet Facebook’s minimum 200 by 200 pixel requirement), og:image not accessible (the image URL returns an error when Facebook’s crawler attempts to fetch it), or missing required properties.
The debugger also shows an accurate preview of how your URL will appear when shared in a Facebook feed, confirming that the visual output matches your intent.
Verification Step 3: LinkedIn Post Inspector
Navigate to linkedin.com/post-inspector/ and enter your URL. LinkedIn has specific requirements for og:image including a minimum size of 1200 by 627 pixels and a preference for images that are not extremely tall or narrow. The Post Inspector shows whether your image meets LinkedIn’s requirements and previews the card as it will appear on LinkedIn.
Common Open Graph Mistakes in WordPress
Several specific errors appear repeatedly across WordPress Open Graph implementations. Identifying them by their symptom helps diagnose which error is affecting your specific implementation.
Symptom: Social preview shows the wrong image
Cause: Your SEO plugin is using the first image found in the post content rather than your featured image, or your og:image field in the post’s social settings overrides the featured image with an older image. Fix: Verify the featured image is set on the post, check that your SEO plugin’s social image field for that specific post is either empty (to use the featured image) or set to the correct custom image.
Symptom: Social preview shows no image at all
Cause: The og:image URL is a relative path rather than an absolute URL, the image URL returns a 404 error, or the image file size exceeds platform limits (Facebook has an 8MB limit). Fix: Check the og:image value in page source for absolute URL format, verify the image URL loads correctly in a browser, and check image file size.
Symptom: Social preview shows old title or description after you updated your post
Cause: Social platforms cache Open Graph data. The cached version from when the URL was first shared continues to display. Fix: Use Facebook’s Sharing Debugger’s Scrape Again button to force a cache refresh for Facebook. For other platforms, re-submitting the URL in the platform’s debugging tool forces re-fetch. WhatsApp and Telegram cache invalidation is not directly controllable.
Symptom: Open Graph tags appear in page source but platform shows generic preview
Cause: Your page has duplicate og: meta tags from multiple sources (SEO plugin plus theme code), causing the platform to use the first or last occurrence inconsistently. Fix: Disable Open Graph output in one of the conflicting sources. If using Yoast or RankMath, disable any Open Graph functions in your theme’s functions.php. If using custom code, disable Open Graph output in your SEO plugin settings.
Symptom: Twitter/X shows a small summary card instead of large image
Cause: The twitter:card property is missing or set to summary rather than summary_large_image. Fix: Confirm your SEO plugin’s Twitter Card type is set to Summary with Large Image and verify the twitter:card meta tag appears in page source with the value summary_large_image.
Maintaining Open Graph Across Site Changes
Open Graph implementation is not a one-time task. Several common site changes require reviewing and updating your Open Graph configuration.
Theme changes often affect Open Graph output when the new theme includes its own social meta tag functions that conflict with your SEO plugin. After any theme change, verify your Open Graph output through the page source check and Facebook Sharing Debugger immediately.
Plugin updates to Yoast or RankMath occasionally change default settings or add new Open Graph properties that require configuration. Review your Social settings in your SEO plugin after each major version update to confirm settings have not been reset.
Domain migrations require updating all absolute og:image URLs if your image URLs change with the domain. After a domain migration, audit og:image values across your most shared content to ensure they resolve correctly at the new domain.
Understanding how to connect technical SEO signals including Open Graph, schema markup, and canonical tags as a unified technical foundation gives you the framework for maintaining all these technical elements together rather than as isolated implementation tasks.
Frequently Asked Questions
Yes, but only when the Open Graph setting is explicitly enabled. Navigate to SEO, then Social, then the Facebook tab in your WordPress dashboard. The Add Open Graph meta data toggle must be turned on. Once enabled, Yoast generates og:title, og:description, og:image, og:url, og:type, and og:site_name automatically for all posts and pages, using the featured image as og:image and the SEO title and meta description as og:title and og:description.
RankMath enables Open Graph by default in most installations. Verify the setting in RankMath, then General Settings, then Links by confirming the Open Graph toggle is on. RankMath also integrates Open Graph generation with its schema markup output to maintain consistency between the two systems.
Using both custom code and an SEO plugin for Open Graph output on the same page creates duplicate tags that cause inconsistent platform behavior. Choose one method. If you need custom Open Graph output for specific pages, use your SEO plugin’s per-post social override fields rather than adding custom code that conflicts with the plugin’s output.
How do I set a different Open Graph image than my featured image?
In Yoast, scroll to the Yoast SEO metabox below the post editor, click the Social tab, then Facebook, and upload a custom image in the Facebook Image field. In RankMath, open the RankMath metabox, click Social, and upload a custom image in the Social Thumbnail field. These custom social images override the featured image for Open Graph purposes while leaving the in-post featured image unchanged.
Why does Facebook show old Open Graph data after I update my page?
Facebook caches Open Graph data from previous visits to your URL. When you update og:title, og:description, or og:image, Facebook continues displaying the cached version until you force a re-fetch. Use Facebook’s Sharing Debugger at developers.facebook.com/tools/debug/, enter your URL, and click Scrape Again to force Facebook to re-fetch your page and update its cache with your new values.
Add a custom function to your theme’s functions.php file that hooks into wp_head and outputs meta tags with property and content attributes for each Open Graph property. The function should include conditional logic for different page types (single posts, pages, homepage, archives) with appropriate og:type values for each. Use WordPress functions like get_the_title(), get_permalink(), and wp_get_attachment_image_src() to dynamically generate values from each page’s content.
What happens if I have no og:image on my pages?
Without og:image, social platforms select an image from your page content using their own criteria, which produces unpredictable results. Facebook may select your logo, a sidebar image, or no image at all, showing a text-only link preview. Twitter/X shows a summary card without an image. LinkedIn shows a generic link card. All these outcomes produce lower CTR from social shares than a properly sized, purposefully designed og:image.
Conclusion
Open Graph implementation in WordPress is straightforward when using Yoast or RankMath, requiring primarily configuration of existing settings rather than custom development. The critical configuration points are enabling Open Graph output in your plugin’s social settings, setting a high-quality default image at 1200 by 630 pixels for pages without specific images, configuring Twitter Card type to summary_large_image, and setting custom social images for your most important individual posts. Verify through the Facebook Sharing Debugger and LinkedIn Post Inspector after implementation to confirm the output is correct before building any social sharing campaigns around your content. Maintain the implementation through theme changes and plugin updates by periodically re-verifying that Open Graph tags are still appearing correctly in your page source.
Connect with other WordPress SEOs comparing their Open Graph configurations at Scale Xpert on Discord, a community for SEO learning and genuine backlink exchange.
