Adding Featured Images to Your Website (and Avoiding Duplication)

190
371
2.5M followers

Hey everyone,

Today I want to discuss the beautifying and optimizing your WordPress site using Featured Images. Not only do these images add a visual appeal to your posts, but they also play a crucial role in enhancing user engagement and even the SEO performance of your website.

What are Featured Images?

Featured images, often referred to as 'post thumbnails', are the primary images that represent your content. They are the first thing your audience sees on your blog roll page, social media shares, and in search engine results. A well-chosen featured image can dramatically increase click-through rates and make your content more enticing ,and it can beautify the homepage of your website (which by default is your blog roll with most Wordpress websites).

Why Use Featured Images?

There are a few reasons that you should consider using featured images, and I want to discuss these. You should be adding featured images as your build out your website, and these are the reasons that validate WHY you should be doing this.

Reason 1: Visual Appeal: They break up text, making your posts more engaging and easier to read. They also beautify the homepage of your website, which will show featured images associated with all of your posts.

Reason 2: Branding: Consistent use of style and color in images strengthens your brand identity. Often times you will see the use of images with text overlays, or images integrated into the featured images that further solidify the branded nature of your content.

Reason 3: SEO Benefits: Images can be optimized with alt tags, contributing to your site’s SEO. Also it improves your overall design of your website, which can also have a bearing on your rankings in search engines.

Alright, we now know the benefits...let's look at the process of adding featured images to your posts.

How to Add Featured Images in WordPress

Adding featured images in WordPress is a breeze. Here's how you do it:

  1. Choose Your Image: Select an image that is relevant and visually appealing.
  2. Navigate to Your Post: In your WordPress dashboard, go to the post you want to add the image to.
  3. Set Featured Image: On the right-hand side, you’ll see a link titled 'Set featured image'. Click on it, upload your image, and voila!

Customizing Your Theme to Avoid Duplication

Sometimes, your theme might display the featured image twice: once as the featured image and again in the post content (typically above the content). If you are seeing a featured image show up above the title of your post, there is a process that you can leverage to remove this.

To avoid this, you can add a little CSS magic in the Custom CSS section of your Theme Customizer.

Here’s the code you need:

.single .featured-image {
display: none !important;
}

This code will hide the featured image from the top of each post, preventing duplication.

How to Add This Custom CSS

Additional CSS to Remove the Featured Image

  1. Navigate to Theme Customizer: Go to your WordPress dashboard, click on 'Appearance', => 'Customize'.
  2. Access Custom CSS: In the Theme Customizer, find the 'Additional CSS' section.
  3. Paste the Code: Copy and paste the above CSS code into this section.
  4. Publish Your Changes: Click 'Publish' to save your changes.

Note: While this code is generally effective, it might need tweaking depending on your specific theme.


Using featured images effectively can make a significant difference in how your website content is perceived and engaged with. And with a little bit of customization, you can make sure your site looks just right (no duplicate images).

Experiment, be creative, and watch your site visually come to life! As always, if you have any questions about this process, please leave your comments below.

190
371
Login
Create Your Free Wealthy Affiliate Account Today!
icon
4-Steps to Success Class
icon
One Profit Ready Website
icon
Market Research & Analysis Tools
icon
Millionaire Mentorship
icon
Core “Business Start Up” Training

Recent Comments

371

Good afternoon, WA community, I am getting duplicate images. I have a unique concern in that the duplicate images are removed from Chrome but not Mozilla browser. The CSS code has been added and I am not using Generate Press theme. I am using GreenWealth theme. Any suggestions. I have already cleared my browsing history out.

it will be a different code for your theme....

1

"The code is for GeneratePress which is the recommend theme here.
Perhaps you can ask ChatGPT for the code and let them know your theme

1

Hi Rhonda.

Try moving the duplicate image somewhere down in your content. Or delete if you're ok with that.

1

I will try this, I think it may be due to my browser settings in Mozilla, because the duplicate image is gone in Chrome. I will still see in Chat GPT if there is a more effective code for Mozilla. Thank you

1

Hi Meina, I would be okay with deleting the extra image. It only occurs in Mozilla though. There is not a duplicate image in Chrome. Thanks for the help.

1

Have you tried clearing your site cache?

1

Thank you, it worked!

1

Yes, however, coding had to be corrected first. Everything is displaying correct now. I am happy!

1

This solved it! Thanks again.

2

Correct, I have the correct code now. It is resolved! Thank you for your response!

2

Wonderful to hear Rhonda, Now you can move forward and continue to enjoy what you do.

Wishing you well and enjoy the rest of your weekend.

Andre

1

Thanks again, very greatful, Andre, you're right it is a huge relief that I can move forward! My website looks much better.

1

Great to hear keep moving forward

1

👍

1

Hi Kyle, I just switched to an Astra theme and i am having a hard time with my featured images on Doggyclothingandapparel.com. Some of the thumbnails will show the featured image and some wont. on some when i go and adda featured image and save it. it still doesnt show up. what should i do?

Hi Lloyd. Try clearing your browser cache if you haven't already.

1

i got it worked out. I installed the Astra theme for my website and added the Elementor Plug in . that fixed it

1

I see all the featured images are now there. Depending on the theme, their location will be different and in this case, they are the background for the snippet of your content.

I assume you are all sorted now. If you are not seeing it, refresh your browser as it will be there. :)

Thanks Kyle. I went to an Astra theme and that took care of it. I just tried going to a different theme called Brandstore so I could have the blog and the store but now i keep getting a critical error when trying to set it up. how can I fix this?

@Kyle I plugged in that code- copied and paste into the CSS but my website is still showing double images for the featured image and article image. It's quite frustrating. Any tips, because I am hoping to go live and start applying for affiliate links soon and want to have this fixed soon. THANKS!

1

are you using generatepress theme - this code only works with that theme

no, but I think I figured it out thanks to this community chat:)

1

glad you are sorted...

1

Solved. I asked my friend Chatty (ChatGPT) and he advised me to use the following code, which worked immediately:

.single-post .wp-post-image {
display: none;
}

And now, after hours of tension, I could hug the world, as I am so glad I have mastered this challenge. LOl

"Adversity makes the strong stronger and the weak weaker." (Myke Tyson)

4

Levantem,
Where do you put the "code"?

Janice

1

THANK YOU ---- I just read your comment and it worked for me too woohooo!! you are the best

1

Sorry, did not notice your message.
You put the code inthe field "Additional CSS", at WordPress.
I guess you have found it already, right?

Am glad to hear it worked well for you.

To our success!

I struggled with removing the duplicate image above the title. Refreshing after you add the .css code probably won't work. You have to clear cache. My site is hosted on hostinger using litespeed cache plugin. Kyle's CSS code and several others you can find on google worked, but for me only after doing this.

2

See more comments

Login
Create Your Free Wealthy Affiliate Account Today!
icon
4-Steps to Success Class
icon
One Profit Ready Website
icon
Market Research & Analysis Tools
icon
Millionaire Mentorship
icon
Core “Business Start Up” Training