When making a new post one day I came across a bug in my website. I created a new post, attached a featured image, and hit preview. I got a messed up page that had two copies of my featured image above the page content.

As panic set in I went through and checked everything. My site still looked fine. Already published posts seemed okay. Checking previews of already scheduled posts showed that they were fine. I tested different images to see if they were the cause. No luck there either.

I created a few test posts and managed to reproduce the same thing. This was happening 100% on all new posts, but all posts up to now were fine. Why had this just started happening?

Maybe it’s because I had no text in my post yet. I pasted in some random text and hit ‘Preview’. Still the same bug. I deactivated and activated a few plugins but to no avail. After pulling out some of my remaining hair in frustration I checked the page source. Of course, it’s minimised so was completely unreadable:

Thankfully FreeFormatter provides an easy way of formatting and validating several languages, including HTML. I ran it through the HTML formatter and found this:

This happened twice in the head attribute, which explains why we have two images. So what the hell was generating this and which plugin was responsible? My eyes eventually settled on the extra parameters I have below my post editor:

I have a plugin called WordPress SEO by Yoast (which I recommend you get by the way). It allows you to do things such as adding meta descriptions to your posts and generate site maps with ease. It also gives tips for improving a post’s SEO. Whenever I schedule a post, I never leave the Meta Description empty.

I typed some random words in, hit preview, and the extra images had disappeared. Success! But why did this happen?

In my post about improving excerpts, I talked about modifying the excerpts to include featured images. What I think happened was that either WordPress SEO or WordPress itself was using the excerpts to generate meta data for the post. Because excerpts now had images, this added images into the generated meta data. By overriding the meta description the custom text replaces the images.

So the fix (or workaround…) for the issue was simple: either don’t use a featured image on the post, or make sure to fill out Yoast’s Meta description.

The moral of the story is to be aware that plugins, themes and your own customisations can collide. And when they do they can cause some unexpected results.