How to Fix Conflicting Open Graph Images

When a shared article shows an old banner, look for all its og:image tags. A theme and a plugin can each supply an image, leaving the old one ahead of the new one in the page head. Open Graph gives the first image preference when multiple entries conflict. Read the Open Graph array rules.

Read the image groups in source order

Open the public article and choose View Page Source. Search within the <head> for og:image. Record each image URL, then note the dimensions and description declared with that image. A width or height describes the preceding image group. See the MDN guide to page metadata and the Open Graph image properties.

For example, a fictional rain gauge worksheet might have the following image tags.

<meta property="og:image" content="https://example.com/media/old-studio-banner.jpg">
<meta property="og:image:width" content="640">
<meta property="og:image:height" content="360">
<meta property="og:image" content="https://example.com/media/rain-gauge-worksheet.jpg">
<meta property="og:image:width" content="1200">
<meta property="og:image:height" content="630">

Both image URLs can be valid. The problem here is that the studio banner appears first, even though the worksheet image represents this article.

Prepare the image group you want to keep

1. Open the Open Graph Generator. Select article, enter Rain Gauge Worksheet as og:title and use https://example.com/guides/rain-gauge-worksheet/ as og:url.
2. Enter https://example.com/media/rain-gauge-worksheet.jpg in og:image and A rain gauge beside a completed rainfall table in og:image:alt.
3. Choose Generate Open Graph Tags and read the image lines in the output.

<meta property="og:image" content="https://example.com/media/rain-gauge-worksheet.jpg">
<meta property="og:image:width" content="1200">
<meta property="og:image:height" content="630">
<meta property="og:image:alt" content="A rain gauge beside a completed rainfall table">

The generator produces one image group at a time and writes fixed dimension values of 1200 by 630. Check the actual file size in pixels before using those fields. Treat this output as an image excerpt from the full metadata. For the rest of the fields, see the article share preview guide.

Fix the provider that outputs the old image

Find the social image setting or template responsible for each group. In this example, keep the article image and remove the stale banner group from the article response, including the dimensions associated with that banner. Use the existing metadata settings where your CMS provides them.

If the page intentionally offers several images, put the preferred image first and keep each set of dimensions and alt text with its own URL. Move the whole group together. Appending another image below the banner leaves the banner first.

Verify the public HTML after saving

1. Reload the public article source and check the first image URL. Confirm that the banner is gone or appears later only if you intend to retain it.
2. Open the preferred image URL in a signed-out window. Check that the response shows the intended file and confirm its pixel dimensions.
3. Compare the next preview with the saved source. A service can retain a previous preview or apply its own image rules, so keep a record of the HTML you observed.