Adding Featured Images to Your Website (and Avoiding Duplication)
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:
- Choose Your Image: Select an image that is relevant and visually appealing.
- Navigate to Your Post: In your WordPress dashboard, go to the post you want to add the image to.
- 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
- Navigate to Theme Customizer: Go to your WordPress dashboard, click on 'Appearance', => 'Customize'.
- Access Custom CSS: In the Theme Customizer, find the 'Additional CSS' section.
- Paste the Code: Copy and paste the above CSS code into this section.
- 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.
Recent Comments
297
I'm trying to work on the class for 'Adding featured images and avoiding duplicates' my theme is Generate Press but I'm having so much trouble trying to log into my back office. When I go to login I have 2 gravatars one for Admin and one for Laura, see image below.
Then when I'm logged in my administration bar doesn't look like Kyles' from the class. I don't see edit post on that bar, see this image. I feel like so much is off. And I can't continue with the class. Thanks!
click on customise at the top in the second image and choose additional css and you will see the same screen.....
or you can click on the sewnewyork and it should give you the sidemenu to choose appearance>>customize>>additional css.....
I am having trouble resizing my image, i have tried not editing it as kyle said but it does not shrink down. I have tried editing it, but it stays the same size. I have tried copying it from my page and reselecting it, but that has no change either. I have scanned down this chat to see if there is a solution, but there doesn`t seem to be one. Sorry if you have already gone over this.
On the right sidebar of your settings in posts, you can choose the size you want: large, medium, small, and thumbnail. However, your theme sometimes controls that. May I ask what you use?
You can also resize and upload in the Canva app, clearing the caches of browsers and servers reflecting new changes.
You can also empty the server's cache.
Websites > Site Manager > Details > Sitespeed > Empty site cache
Abie
Thanks Abie i will have a look at those : ). I haven`t changed the theme so it will be the one that was set up with the site. thanks
I have done this to my current posts that had pictures attached. I have one without a pic at all, and am about to create more articles, so how do I attach a pic to them at the time of publishing please? I've obviously done it before as my other posts had pics, but cant for the life of me find out how I did it or the training on it :(
You can access the content area through the website tab at the top menu.
https://my.wealthyaffiliate.com/content/new
I click the highlighted mountain button. And that's before you publish.
If after, Free Image Sources You can also use AI images like Bing Creator, Text to Image app via Canva Magic Media, DALL-E via ChatGPT-4 (paid), Leonardo.AI (free and paid) and MidJourney (paid)
Abie
If you are publishing through SiteContent directly, you will want to log in and edit your post right after it is published to add the featured image. It will only take a second and I recommend using your header image of your post as your featured image if you have one.
Hi Kyle, the issue is I have a post I published with no image. When I started I published two posts with images as it was in the training somewhere, then the training order changed and I cant find how to do it.
Thanks for this informative video, Kyle.
I'm certain I followed it step-by-step, but I still ran into one hiccup. After all was said and done, the FEATURED IMAGE shows up on my home page for a particular post but is not visible when I go to the post itself.
Can someone help me sort this thing out? Thanks.
Joshua
What is your website URL? Also, have you cleared the caches of both browsers and servers to reflect any changes you have made?
You may also press F12 (developer tools) to see what is really going on and try to diagnose the issue.
Abie
See more comments
Good day, my question is not related to this topic lesson "Adding Featured Images to Your Website (and Avoiding Duplication)".
I just noticed the "Mark as Complete" check box on top left corner of the post does not work. I really get a thrill at watching my progress through these lessons after ticking the "Mark as Complete" tick box to show a lesson is complete. Can technical team perhaps fix this little bug please?