Adding Featured Images to Your Website (and Avoiding Duplication)

72
2.4M 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

  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.

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

99

Hi Kyle,

I did what you said and added that snippet code, but the featured image that I added is still there when I look at my post. I edited the featured image to its original size so now it is bigger than ever.
Do you think that the featured image is still there because I added it when I created the post?

Did you refresh your browser after making the changes?

Yes I did. I copied and pasted the URL into a new window and then clicked on it, but when the page came up, it is still showing the featured image. Hmmmm

i purposely put featured images in when creating my posts so that when visitors come to my website there is an image attached to each post. It looks better like you said.

Sandra

Hi Kyle,

I deleted the code and added it again. Refreshed and eureka it worked!!!

thanks Kyle.

Sandra

Thanks, Kyle; I was starting to wonder about this. 😊

I have started using the Hubs "Your Path to $x,xxx Month Revenue", and I like to click on the "See All" view.

Thanks to the above, I quickly identified the lessons I had missed, and I'm now entirely up to date and 100% focused on blogging!

All the best,
Paul

Awesome, really glad to hear you are enjoying the new task platform. A lot of thought has been put into that, and the tasks and the flow of those will evolve at the same speed that building a business evolves. ;)

Where can you find the ALT TEXT box if you use the block editor?
TIA

If you scale the image down, does that still allow all devices to adjust the image?

If I leave the image size on generate press, it gives me a yellow box: "The images listed below are being resized to fit a container. To avoid serving oversized or blurry images, try to match the images to their container sizes. "

Thanks

The Alt text box will show when you upload or you edit the image. And that is no problem, that is what you want.

If you don't try to resize it yourself, then it will automatically proportionally resize your images based on the type of device the end user is using, which is what you want. :)

I do not see the Alt text box when I am on the block editor. I'll fiddle some more with it.

The container box doesn't matter then? I don't know if this is connected, but when I scaled it down, my Google PageSpeed Insights improved. Im still learning that one, but it seems the performance and the Largest conetenful pain improve.

Thank you for the article Kyle, this does help me to consider photos more in the projects I'm working on. It makes me wonder what other people are seeing when viewing my site.
Funny how things that should be retained get lost in the shuffle while going through life and business.

Thanks again for this explanation of avoiding duplication with featured images on a website. Very helpful.

RitaAnn~

Yeah, the featured image can really help you beautify the homepage blog roll, and it will present your website as having a lot more substance on arrival, versus a sea of text.

Glad this helped you out here Rita and nice to hear from you! :)

Glad to be here too.

Thanks. :-)

RitaAnn~

Hi all,

I am really struggling with this. It seems some themes do not have the Customize option under Appearance. Furthermore, are there other themes apart from GeneratePress for which this method works? What are they called? And how do we tweak the css code if it won't work on a particular theme?

I am really stuck on this. Please help.

Thanks!

I personally use Blocksy Agency. The free version has many features, and I find it very versatile. Others include Kadence WP.

If there's no Customize, Widgets, or Menus with your theme, then you need to change it.

To change your theme, here is what to do.

You may go to Appearance > Themes and add new.

Input what you are looking for, install, and activate.

Your content will be left intact; you may lose out on CSS styles and social media icons if, however, with a bit of tweaking, you are done.

We always recommend leaving a backup theme; you may do so with the Twenty Twenty-Four. (Default)

You are after the Additinal CSS from within the Customize section.

And here's Kyle's resource; they've just blogged half an hour ago.

I have spent the last few hours tinkering around with a few themes, and I've come out with a better understanding of how they work and how to use them. And, indeed, you're right that Blocksy and Kadence have extensive features. I love their capability around featured images, and they're both so so good I kept going back and forth between them, but I'm happy with Blocksy.

Thank you so very much!

Great choice and you're welcome :)

@TheAbiePPlus- If I change my generate site to blocksy, is it a pretty smooth transition? I have20 articles with pictures and affiliate links. I was going to go and add featured images to generate site, but thinking of changing it so don't want to do all that if format changes. Mind you, I get easily frustrated with wordpress lol.

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