How to Set an Open Graph Image in WordPress

To set an Open Graph image in WordPress, configure your SEO plugin’s social-image field, verify that it outputs one og:image tag, then check the rendered page source. A post’s featured image may be used, but it is not always the highest-priority value. In Yoast, a custom social image for the individual post or page can override the featured image; sitewide defaults act as fallbacks.

Open Graph metadata lives in the page’s <head>. Social and messaging services can read values such as og:title, og:description, og:url, and og:image when they build a link preview. Yoast documents Open Graph data as being consumed by services including Facebook, Pinterest, LinkedIn, WhatsApp, and Google.

What controls the image WordPress shares?

The image usually comes from a priority chain rather than one universal WordPress setting. The exact chain depends on the SEO plugin, theme, and any custom code:

1. Per-page social image: an image selected in the SEO plugin’s Facebook or social-sharing panel.
2. Featured image: the post or page’s featured image, if no dedicated social image is set.
3. Content image: a prominent image found in the article, depending on the plugin.
4. Template or post-type default: a default configured for a post type or template.
5. Sitewide fallback: a global default image used when the page has no better candidate.

That order explains a common surprise: changing the featured image may not change the preview if a dedicated social image is already set. It also explains why a logo can appear on a page that has no image: the plugin or theme eventually falls back to a sitewide default.

Set an Open Graph image with Yoast SEO

Enable Open Graph output

1. Open WordPress Dashboard → Yoast SEO → Settings → Site features → Social sharing.
2. Turn Open Graph data on.
3. Click Save changes.

Yoast says this feature is enabled by default in current installations, but checking the switch is useful when another plugin, a migration, or a custom theme has changed the site configuration.

Choose an image for one post or page

1. Edit the post or page in WordPress.
2. Open the Yoast SEO social or Facebook preview section.
3. Choose an image in the social-image field and save or update the content.

This per-item image is the most direct way to control a preview. It can take priority over the featured image, so use it when the image that looks best in the article is not the image you want in a social card.

Set the sitewide fallback image

Yoast documents the default image path as SEO → Social → Facebook → Default image. Interface names can vary by release, so look for a Social, Facebook, or default-sharing-image setting if the labels differ. This image is a fallback; it does not necessarily replace a per-post social image or featured image.

Set an Open Graph image with another SEO plugin

Most full SEO plugins expose a social-image field while editing a post. The workflow is generally:

1. Open the post or page editor.
2. Find the plugin’s Social, Facebook, Open Graph, or Sharing panel.
3. Upload or select the intended image.
4. Save the post and inspect the generated HTML.
5. Configure a global fallback in the plugin’s social settings.

Do not assume every plugin uses the same fallback order. The WordPress.org Open Graph plugin documents a chain of featured image, content images, attached images, then a site icon, custom logo, or header image. It also disables Jetpack’s Open Graph output while active to avoid duplicate tags. Rank Math documents developer filters for changing image output and fallback behavior. Check the plugin’s current documentation before relying on a specific order.

Verify the actual og:image value

The editor preview is not the final authority. Verify what an unauthenticated crawler receives.

Browser method

1. Open the public URL in a private browser window.
2. View the page source, not only the inspected DOM.
3. Search for og:image.
4. Count the tags and copy each URL.
5. Confirm the chosen URL is absolute, publicly reachable, and points to the intended file.

<meta property="og:image" content="https://example.com/wp-content/uploads/social-card.jpg">

Command-line method

curl -L https://example.com/my-post/ | grep -i 'og:image'

Use the canonical public URL and follow redirects. If the command returns no tag, the plugin is not emitting Open Graph data for that response, or a cache is serving an older document.

Use code when you need a controlled override

Code overrides are useful for a rule such as “use a special image for every item in this post type.” They are also easier to version-control than manual edits. Add snippets through a child theme or a code-management plugin so a theme update does not erase them.

Yoast filter

add_filter( 'wpseo_opengraph_image', function ( $image ) {
    if ( is_singular( 'case-study' ) ) {
        return 'https://example.com/wp-content/uploads/case-study-social.jpg';
    }

    return $image;
} );

The wpseo_opengraph_image filter replaces an existing value when the callback returns a new image. Yoast documents that it does not create an image when none exists, so keep a plugin-level fallback configured as well.

Important implementation details

• Return an absolute URL, including https://.
• Do not return an attachment ID unless the filter specifically expects one.
• Restrict the condition with is_singular(), a post type, taxonomy, or known URL rule.
• Keep one component responsible for the final tag.

Image selection, format, and layout considerations

Open Graph itself is a metadata protocol; it does not force one universal image size across every consumer. Platform guidance changes, and the research for this article did not verify a current cross-platform dimension requirement. A WordPress support answer recommends an image near 1200 × 630 pixels and JPEG, GIF, or PNG, but treat that as community guidance rather than a universal rule.

Choose a source image that remains legible when cropped. Keep important faces, product screenshots, and headings away from the extreme edges. Use a stable URL, avoid replacing the file contents repeatedly at the same path, and make sure the server returns an image content type. If your workflow produces WebP, verify that every target crawler accepts it; JPEG or PNG is a conservative fallback when compatibility matters.

Why the wrong image appears

Symptom	Likely cause	Fix
The featured image is ignored	A per-post social image has higher priority	Change or clear the plugin’s social-image field
A logo appears everywhere	The page has no candidate image and uses the global fallback	Set a per-page image or change the fallback
Two different images appear in source	Two plugins, a theme, or Jetpack emit Open Graph tags	Disable output in all but one component
The source is correct but sharing is stale	A crawler or page cache has an older response	Confirm the public HTML first, then use the destination platform’s current refresh process
The image URL returns an error	Private media, hotlink protection, redirect, or permissions issue	Open the image URL without logging in and fix access or redirects
No og:image exists	Open Graph output is disabled or the template is bypassing the plugin	Enable output and inspect the active theme/template

Duplicate Open Graph tags

Duplicate output is one of the most damaging configuration mistakes. Yoast warns that duplicate Open Graph tags can cause social sites to display incorrect titles, descriptions, or images. Common sources include an SEO plugin plus a theme, a second SEO plugin, Jetpack, or hand-written tags in header.php.

Search the complete page source for property="og:. If more than one component emits the same property, choose one owner and turn off the others. Do not solve duplicates by changing image priorities randomly; the crawler may select either value.

Advanced WordPress patterns

Different images by post type

Configure defaults per post type when your SEO plugin supports templates. For example, product pages can use a product image while documentation pages use a diagram. Keep a sitewide fallback for pages that do not match a template.

Dynamic or generated images

If a service generates an image on demand, ensure the URL is stable long enough for crawlers to fetch it and does not require a logged-in session. Return a normal image response and avoid relying on JavaScript to create the metadata or image after page load.

Multilingual sites

Set the social image at the language-specific post level when translations have different subjects. Then inspect each translated URL independently; a correct default on one locale does not prove that another locale emits the same tag.

Performance, reliability, and maintenance

• Keep metadata server-rendered: crawlers can fetch the initial HTML without running your editor or client-side application.
• Use a CDN for media: a nearby, cacheable image host reduces fetch latency.
• Keep URLs permanent: changing filenames breaks old shares and makes debugging harder.
• Monitor after plugin changes: SEO and theme updates can add or remove emitters.
• Test representative templates: check a post, page, archive if shared, and any custom post type.
• Keep a fallback: pages without featured images should still produce a deliberate preview.

Or skip the browser setup

If you need screenshots of WordPress pages for documentation, QA, or social-card workflows, ScreenshotNeo provides a website screenshot API and MCP server. It can accept a URL and return PNG, JPEG, WebP, or PDF. Its clean-shot flow accepts consent banners before capture and removes more than 60 known consent platforms, newsletter popups, and chat widgets; each step can be disabled.

One request is enough:

curl -G "https://api.screenshotneo.com/v1/shot" -d access_key=YOUR_API_KEY --data-urlencode url=https://example.com/my-post/ -o shot.webp

Python:

import requests

r = requests.get(
    "https://api.screenshotneo.com/v1/shot",
    params={"access_key": "YOUR_API_KEY", "url": "https://example.com/my-post/"},
    timeout=90,
)
r.raise_for_status()
open("shot.webp", "wb").write(r.content)

Node.js:

const q = new URLSearchParams({
  access_key: 'YOUR_API_KEY',
  url: 'https://example.com/my-post/'
});
const res = await fetch(`https://api.screenshotneo.com/v1/shot?${q}`);
if (!res.ok) throw new Error(`Screenshot failed: ${res.status}`);
const bytes = await res.arrayBuffer();
await Bun.write('shot.webp', bytes);

See the ScreenshotNeo documentation for the full API. Bot checks, blank pages, timeouts, failed loads, and cache hits are not billed as clean shots, and response headers identify the page verdict and billing status with X-Page-Verdict and X-Billed. The MCP server includes take_screenshot, get_page_info, and capture_pdf for Claude, Cursor, and other MCP clients. You can also set a viewport or device preset, wait for a selector or network idle, hide selectors, add custom CSS or JavaScript, block resources, provide cookies or headers, capture one element, load lazy images, and use caching with a chosen TTL.

There are 1,000 free screenshots each month with no card. Paid plans start at $5 for 3,000 shots. Create a free ScreenshotNeo account.

FAQ

Does changing the featured image always change the Open Graph image?

No. A plugin’s dedicated social-image field can take priority, and a global fallback may be used when no candidate image exists.

Do I need fb:app_id?

Yoast says the warning is not a blocker for displaying shared content and recommends ignoring it for this purpose.

Should I install a second Open Graph plugin?

Usually no. Two emitters can create duplicate tags and unpredictable previews. Choose one component to own Open Graph output.

Why is the preview still old after I fixed the HTML?

First confirm the public page source is correct. If it is, the destination service may still have a cached crawl. Use that service’s current refresh mechanism.

Can I set the image without an SEO plugin?

Yes, a theme or custom code can emit the meta tag, but you must also manage fallbacks, escaping, absolute URLs, and duplicate-output risks yourself.