Did you ever wonder about the beautiful image that you see along with the shared article in Facebook or Twitter? This is called featured image of the article and the social platforms uses protocol like Open Graph to fetch this featured image while embedding your article. In many ways than one, featured images capture the essence of a post or a page in WordPress. They act almost as a represent a post or page and most likely the first thing a visitor will lay their eyes on before opening the page. This means the featured image is a critical part of your website as it can massively influence the browsing journey of your prospects. In this article, we will explain how to add featured image to your WordPress posts. We will also go over other applications of featured images on WordPress such as how it appears on social media, as well as disabling featured images and finding the correct featured image size for your website.
Why You Need Featured Image?
Featured images act as the graphical representation of your content and using them in WordPress have a wide array of benefits for your site.
- Themes make use of the uploaded featured images and show them nicely in blog page, archive pages and sidebar widgets. Many magazine and news websites even show the featured images on homepage layout. For example, all those images what you see in the below home page layout are featured images uploaded under corresponding posts. Without featured images, the theme will only show text content which will spoil the beauty of the page altogether.
- Furthermore, if you have an eCommerce website on WordPress, you will have a featured image for each of the products on your website.
- A captivating featured image coupled with an intriguing post title can lead to a surge in website visitors.
- Lastly, whenever a page from your website is shared on a social media feed, guess what is going to be shown? Yes, that’s right, the article’s featured image. Below is an example of the featured image showing in Facebook social feed.
Note: Many plugins also use the featured image for showing in the widget. For example, related posts plugins will add featured images to show the list of articles along with a thumbnail of featured image.
Adding Featured Image in WordPress Posts
One of the best things about featured images on WordPress is that it is a default core feature provided by the platform. Obviously, you need to insert a featured image for each post in your site so that they appear elegantly on archive pages and on social platforms. Adding a featured image to a WordPress post is very simple and straightforward.
- Open your website’s WordPress admin panel and click on “Posts” menu.
- Either click on “Add New” if you want to create a new post or edit one of the posts that you’ve already created and want to add or update the feature image.
- On the post editor located on the right-hand side of the page, you will find the “Featured image” meta box as shown in the screenshot below.
- Click on “Set featured image” to open your “Media Library”.
- Here you can either upload a new image from your computer under “Upload files” section or select one of the files already in your “Media Library”.
- Click “Set featured image” after you’ve selected an image.
- It will look like below on the post and you can anytime replace the uploaded featured image with a new image.
- Click on “Publish” or “Update” button to publish your article.
Just like with posts, the steps for adding a featured image on pages are exactly the same. The only difference here is that the pages will not appear on archives so that featured image is only importance for social sharing and not used by most themes on the site. If you are using old Classic Editor or any custom post types like WooCommerce then you can upload the featured image within Classic Editor interface similar to Gutenberg editor.
Featured Image Meta Box is Missing
If you play around the settings in the editor, sometimes you will end up messing up the default settings and find the “Featured Image” box is missing. Follow the below instructions to enable meta box the editor.
On Gutenberg Editor:
- Click on the three vertical dots “Options” icon showing on the top right corner of the editor.
- Select “Preferences” option from the menu.
- Go to “Panels” tab and enable “Featured Image” option.
On Classic Editor:
- Click on “Screen Options” button showing on top right corner of the screen.
- This will open a slide down and enable “Featured Image” check box.
After enabling the option, you will see the “Featured Image” meta box on the sidebar or below the post content.
Featured Image Appearance on Published Content
The uploaded featured image in the above case with Twenty-Twenty-One theme will look like below on the published article.
However, display of the featured image completely depends on the theme you use. Many free and commercial themes offer different layouts to choose the position of your featured image. For example, Kadence theme allows to show the featured image above, below or behind the title. Below is an example of featured image showing behind the title using Kadence theme.
Below is another example of a blog page on GeneratePress theme showing featured images.
Adding Open Graph for Sharing on Social Media
The most important aspect where featured images are utilized would be when sharing a post or a page in a social media channel. Like we have mentioned before, you need to use Open Graph meta tags in the header section of your articles to make use of sharing featured images in social platforms. Some platforms like Twitter uses Twitter Card, however, Open Graph will also work on Twitter. When embedding or sharing your articles, these social platforms will check the header section and fetch corresponding meta data including featured image and show nicely with appropriate thumbnail.
The easy way to insert Open Graph meta tags in your WordPress site is to use one of the free SEO plugins available in WordPress repository. Best example is to use Yoast SEO or Rank Math and enable the automatic inclusion of meta tags on all your pages. If you don’t have a featured image set for plenty of old posts on your site, then it is difficult task to open each post and upload the featured image. Alternatively, you can set a default featured image to share on social media using Yoast SEO plugin.
- Install and activate the Yoast SEO plugin on your WordPress website.
- Open the plugin’s social page by hovering over the SEO menu, and then clicking on “Social” submenu.
- Open Facebook tab, and make sure to enable the “Add Open Graph meta data” option. Activating the Open Graph meta data for Facebook will enable it to display a preview with a featured image whenever a link from your website is shared on the platform.
- Click on the “Select Image” button in the default image tab.
- Upload an image or select an existing image from your website’s media library, and then click on “select”.
- You can do the same of Twitter also and click on “save changes”.
And that’s all!! From now on, any article you share on social media from your site will show the featured image if already upload or show the default image if there is no featured image available. You can also make sure to check the source code of your page and confirm the meta tags are present. As you can see in the below source code, Yoast SEO plugin adds Open Graph and Twitter tags. For the featured image, you can see there are three meta tags used:
<meta property="og:image" content="Image-URL" />
<meta property="og:image:width" content="Image-Width" />
<meta property="og:image:height" content="Image-Height" />
Similarly, you can use a custom featured image for single post using the same Yoast SEO plugin instead of the default WordPress featured image. You can do this by going to “Social” tab under “Yoast SEO” meta box within post editor and upload your image. This image will be used as a featured image only for that post.
Hiding Featured Images from Showing on Articles
Since featured images are not necessarily to be part of the content, there are good reasons to hide them from your site. Depending upon the situation, you can do this on entire site or only where it is not required.
- If you do not want to show featured images on social media, then simply disable Open Graph meta tags on the header section of your site.
- Featured images are generally larger in size and slow down the page loading speed. Therefore, make sure to lazy load images so that they load only when the user scrolls to that position. This will be useful on archive and blog pages where you may have lot of images.
- As the featured image on single post layout is available in above the fold area, Google PageSpeed Insights and other speed measurement tools will show problems like preload largest contentful image. In this case, you can disable the visibility from theme settings or preload them using a caching plugin like WP Rocket.
- Finally, it may affect the revenue from advertisements as it occupies prominent and considerable space in above the fold area. In this case, you can disable the featured image using theme settings or by adding simple CSS code like .featured-image-css-class{display:none;}.
Many themes like GeneratePress, Astra and Kadence offer disabling featured image on the entire site with single click. You can generally do this from the customizer settings for blog page and single blog post layout. Similarly, you can disable only on a specific post using theme options available inside post editor.
If your theme does not offer any options, and you want to hide a featured image for a particular post, then all you must do is to use “Hide Featured Image” plugin.
After installing and activating the plugin, you will find a “Hide Featured Image” checkbox option in post editor. Just check “Yes” and the featured image will be hidden from the published page’s frontend view.
Bulk Editing Featured Images
By default, WordPress allows you to upload featured image for a single post. Though you can view featured images of multiple posts under “Posts > All Posts” section, it is not possible to delete or upload the images in bulk. If you really want to bulk edit featured image, then Yyu need to use a third-party plugin.
- Install and activate WP Sheet Editor plugin. This is a good plugin that helps you to edit post details in an Excel spreadsheet format. You can edit the details within the editor without downloading or uploading.
- Follow the onscreen instructions to setup the plugin and opt to use the free version which is sufficient for bulk uploading or deleting featured images.
- Go to “Posts > WP Sheet Editor” or “WP Sheet Editor > Edit Posts” menu to open all your posts in an Excel sheet format.
- Scroll to the right side and find featured image field. You will see a small thumbnail when there is a featured image for that post or it will show empty when no featured image is available.
- Hover over any featured image to see the large image preview and click on the upload button. This will open your “Media Library” from where you can select an image or upload a new image.
- When you want to delete all features, simply select the cells for multiple posts and press delete key in your keyboard. Now, you will see the fields are changed to “(empty)”.
- After finishing bulk changing your featured images, click “Save” button.
- The plugin will show you a warning that changes are not reversible and confirm the prompt to save your changes.
Finding Correct Size for Featured Image
As mentioned, your theme will register different images sizes for generating thumbnails from featured images. Most free themes use the default WordPress thumbnails generated by WordPress, while premium themes generally use custom size. Therefore, it is essential to upload the correct size of the featured image so that the thumbnails are generated proportionately without cropping.
If your theme uses default WordPress thumbnails and you want to change the default size across your website, then go to “Settings > Media” section in the admin panel. Here, you will be able to change the default thumbnail, medium and large images sizes for your featured images.
If your theme uses custom thumbnail sizes, then check with your theme’s developer on how to change the size. Some themes may show the details in the featured image meta box while many themes do not show. In general, always upload larger size images so that thumbnails can be generated proportionately.
Note: Changing a theme or plugin will result in your site using different featured image size compared to the registered sizes. In this case, you will face two problems. One is that there will be lot of old unused thumbnails available on your server occupying storage space. Second is your new theme will use inappropriate images uploaded on old theme. This will cause problems like properly resize images in Google PageSpeed Insights tool. Fortunately, you can use Regenerate Thumbnails plugin to resolve both problem by deleting old thumbnails and regenerating featured images to the image sizes required for your new theme.
Final Words
All in all, featured images are an important part of your website’s presentation, aesthetics, marketing, and content strategy. They act as the “cover” for your proverbial book and should always be prioritized to ensure success with the content that you are trying to appeal to your audience. However, it is not always necessary to showcase them on single blog post which may affect other elements and speed. You can use theme settings or separate plugins to disable or bulk edit featured images in your site.
Leave a Reply
Your email is safe with us.