Also, you may have to configure a specific theme setting so that featured images are populating for all posts. Another way to see if this works is if you have any social sharing buttons on your website. Finally, the featured image shows up automatically when you create a feed or gallery of your blog posts or other webpages. Go to its Post Settings panel and open the Featured Image section. Some other buttons that appear include the Select Image, Replace Image, and Remove Featured Image. Usually, duplicate featured images arent two featured images, but one featured image and a separate photo in the articles content area. However, you may have to update previously published posts for the default featured image to show up on those. The only time youll find that its okay to share an image on your website for free is when you pull from a website like Pexels or Unsplash. Therefore, we recommend using tools for cropping, compressing, and resizing before opting to increase your PHP memory limit. The problem prevents images from displaying on both the backend and frontend. It looks like only two of the images selected are actually stored as featured images in our posts. Click the Choose Image button to proceed. You should avoid stuffing keywords just because you want to. An easy way to see if the Open Graph code is activated on your site is by utilizing an SEO plugin. A column called Featured Image is supposed to appear after the Post Date. After the plugin is installed and activated, go to Featured Images > Bulk Edit. However, the 1200 x 628 pixels suggestion is just a starting off point. I have spent MONTHS trying to figure out why my images were not working it was the Hotlink thing ALL along!!! The Featured Image Settings are towards the bottom. WordPress permissions decide who can read, write, or edit website files. Again, in this tutorial, we named the page Homepage, but you may have something different. However, keep in mind that an image uploaded to your blog posts content area doesnt have anything to do with the featured image, even if its the first photo you upload to that article. A theme or plugin usually defines it. You can troubleshoot a featured image not showing up or edit each featured image manually. Note: Sometimes newer websites have trouble with Facebook and other social sites because Facebook hasnt crawled the site already. You never know when a human error may result in a featured image not being uploaded to your website. First, you can do it from your WordPress site's dashboard via the Kinsta Cache tab in the left sidebar and the Clear cache button: How to clear Kinsta page cache in WordPress Dashboard Second, you can also clear your site's cache via your MyKinsta dashboard. But what if the featured images arent showing on the blog page? Each social network has its own display for shared content, but Facebook is a solid starting point considering its the most popular one. Lets take a look at the basic differences between cover and featured images. The featured image should quickly appear whenever someone wants to share one of your posts or pages on a social network. Take a photo with your own camera. Be sure to Save the settings after youre done. Legal information. You may be having trouble uploading the featured image the right way. Deleted all plugins. Scroll down to the section called Document Settings. For this section, well show you how to activate the Open Graph markup with two of the most popular SEO plugins: AIO (All In One) SEO and Yoast SEO. This step involves choosing the image youd like to have shown as the new featured image for a few of your current posts or pages. Youve figured out how to upload a featured image and completed your post content. Select the Twitter Cards tab to show the settings to configure your Twitter Card Tags. Click on the area where you want to place a header image. Start your free trial today. But, several systems (about 25% of known systems) don't show the images, only a blank rectangle with a small image icon in the center. body a.novashare-ctt{display:block;background:#00abf0;margin:30px auto;padding:20px 20px 20px 15px;color:#fff;text-decoration:none!important;box-shadow:none!important;-webkit-box-shadow:none!important;-moz-box-shadow:none!important;border:none;border-left:5px solid #00abf0}body a.novashare-ctt:hover{color:#fff;border-left:5px solid #008cc4}body a.novashare-ctt:visited{color:#fff}body a.novashare-ctt *{pointer-events:none}body a.novashare-ctt .novashare-ctt-tweet{display:block;font-size:18px;line-height:27px;margin-bottom:10px}body a.novashare-ctt .novashare-ctt-cta-container{display:block;overflow:hidden}body a.novashare-ctt .novashare-ctt-cta{float:right}body a.novashare-ctt.novashare-ctt-cta-left .novashare-ctt-cta{float:left}body a.novashare-ctt .novashare-ctt-cta-text{font-size:16px;line-height:16px;vertical-align:middle}body a.novashare-ctt .novashare-ctt-cta-icon{margin-left:10px;display:inline-block;vertical-align:middle}body a.novashare-ctt .novashare-ctt-cta-icon svg{vertical-align:middle;height:18px}body a.novashare-ctt.novashare-ctt-simple{background:0 0;padding:10px 0 10px 20px;color:inherit}body a.novashare-ctt.novashare-ctt-simple-alt{background:#f9f9f9;padding:20px;color:#404040}body a.novashare-ctt.novashare-ctt-simple-alt:hover,body a.novashare-ctt.novashare-ctt-simple:hover{border-left:5px solid #008cc4}body a.novashare-ctt.novashare-ctt-simple .novashare-ctt-cta,body a.novashare-ctt.novashare-ctt-simple-alt .novashare-ctt-cta{color:#00abf0}body a.novashare-ctt.novashare-ctt-simple-alt:hover .novashare-ctt-cta,body a.novashare-ctt.novashare-ctt-simple:hover .novashare-ctt-cta{color:#008cc4}WordPress featured images not showing properly on your site? This tool scrapes any URL you want and tells you whether any errors occur with Facebook accessing the information. One way to complete this task is by opening up your Facebook account and pretending youre about to share a status update. Think about using the built-in image editing tools in WordPress for featured images that are already uploaded but could use some changes. Your theme layout does not support featured images. Here, youll see a Progress Bar at the top of the page. In the WordPress Customizer, click the Change button for the Active Theme Select the Twenty Fifteen theme or another theme you want to use that supports and displays a background image. The featured image has its own section for uploading, away from the content editor. Unfortunately, an image with malware or a virus is already compromised. The whole point of a featured image is to serve as a visual introduction to the article, much like a title, and the first paragraph of an article provides previews to the reader of what they can expect to read. The reason it shows on that page is because the header image has white areas on the left and right. The plugin works with posts and pages, including custom posts and WooCommerce products. We have an excellent guide on optimizing your WordPress images. Its important to test out how the Default Featured Image works on your site. Try to set the images as featured images for the Posts and the pages. Select the first two checkboxes to grab the Open Graph image, while the other is for using the page or post featured image. Scroll down the list of settings to locate the Preferences option. I suggest you to upgrade to pro. So after a serious research, I realized that, I need to export both post and media as well. The key to fixing this issue is ensuring your user roles and permissions are all set properly. Upload the image here and click the Save button. If its not there, click the Screen Options tab and mark the Featured Image checkbox to reveal it in the editor. We recommend reading our guide on WordPress user roles to ensure everyone on your team can access and view featured images at all times. Go to the post in question, click on the Share to Facebook link, and see if the featured image appears in the pop-up window. These are the general settings for all social media sharing, making sure Facebook and Twitter dont randomly select photos from your article or other places on your website. Scroll down on that panel and open the Featured Image dropdown item. To remove that image block, click on the three-dot icon after selecting the image block. Yeah inside the Editor, when editing a post, clicking the Settings, then scrollow down past Permalink, Categories, Tags, etc. Furthermore, theres an option in the Edit Image panel that lets you revert to the original dimensions whenever you want. Its also rather common to adjust the cover to fill the pages full width, making it even more effective to introduce an article or a separator between sections. Again, Kinsta bans many Open Graph plugins, including this one. Where do you go from here? For example, you may rather have one featured image appear in the sidebar, but a different one shows up when the post is in a list on your homepage. Also, I believe the classic editor should be a matter of choice instead of another plugin to install. My Header media is not showing on my homepage on desktop view. As always, we recommend backing up your WordPress site before making edits to the code. For the AIOSEO plugin, navigate to the All in One SEO menu and click on the Social Networks tab. Premium Responsive WordPress Themes with advanced functionality and awesome support. The theme doesnt allow for featured images, or you have to turn them on through the theme settings. Your theme, or a plugin, has an error or is causing a conflict with your featured images working. The most important piece of image metadata is its Alt Text, which can be found by opening your featured image in the Media Library. Configure WordPress Dashboard Settings 5. It's only on select pages though (front page and blog page). If youre still having problems, go to SEO > Social in the WordPress dashboard. Finally, a cover image allows for its own unique customization options, like the ability to place overlaying text on top of the image or including a filter. Another Screen Options dilemma comes into play when you do not see the actual field to upload and insert a Featured Image. Simply, the above code is informing WordPress that if someone opens the page, which is 'about' then WordPress will display a file called header-about.php if it is existing. Theres a completely different section that handles the featured image. Note: Youre always able to come in here and change the static homepage. Were most interested in the bulk editing tool for this tutorial. That means you cant simply take any photo and expect it to look great as a featured image. You can type in custom width and height, or decide on a percentage, so that the tool automatically changes the size of all featured images based on the percentage given. It helps with cleaning out those posts where you forgot to add a featured image or, at some point, removed it due to the original featured image not holding up to your standards. Now, go to your Facebook page (personal or business) and paste a link with a featured image into the Status field. You have the option to crop the featured image thumbnail to the exact dimensions. You may find that the theme coding doesnt support a featured image. Theyre all telling you that Facebook is either having trouble accessing the Open Graph data from your website, or theres no Open Graph data, to begin with. Its more common to see something with specifics, like a message that tells you an image or video Exceeds the Maximum Upload Size For This Site.. Our feature-packed, high-performance cloud platform includes: Get started with a free trial of our Application Hosting or Database Hosting. Now that you have the featured images ready, get sharing! You are not familiar with PHP so you can use this plugin for the header image. The Preferences module includes a wide range of options for a document. Its also common to see varying degrees of featured image problems. For free, a fee, or with attribution. No featured image complements the posts when sharing on Facebook. I don't understand why the image only works in . First, you have to decide what youre trying to achieve. Even if they tell you that the image is too big, how do you move on from there? You can also do this with pages or click on the All Posts option if youre interested in adding a featured image to a previously generated post. If youre going with this route, we recommend an image compression plugin that automatically shrinks and optimizes all images uploaded to WordPress, such as Optimole or Imagify. We recommend only using a media hosting platform, or maybe another website host that you own yourself. The max height shouldnt matter as much since your featured images shouldnt be that tall. You should now see a thumbnail of that image for all posts that dont have featured images already uploaded. This brings up the Media Library, from where you can choose an image to serve as your Default Featured Image. Once thats all said and done, click on the Debug button to process all URLs in the list and make it so that the featured images, and all other relevant post data, appear when shared on Facebook. To move forward and see the featured image in action, click the Publish button. Its also possible to locate all images on your WordPress site by going to the Media Library. This lists various settings for the entire post and can also reveal Block-specific settings if you have a WordPress Gutenberg block currently selected. Post thumbnails are what featured images used to be called in WordPress from its early days. First, the plugin opens up the default limit that WordPress sets of having one featured image per post. 2023 Kinsta Inc. All rights reserved. However, if you use any other hosting provider, it may prove useful. WordPress added the Cover block to its Gutenberg editor only recently. Although there are limited simple solutions to remove suspicious coding, your best bet is to stick with photos you either purchase legally or take your own photos instead of pulling directly from Google (which is technically illegal anyway) or finding images from sketchy websites. Click the + Block Inserter icon to add a new block. It should have a Front Page label next to it. Think about installing a plugin that resolves problems for featured images without you having to do much work. You may discover that your theme does well with slightly wider or shorter featured images. Because of this, a cover image is part of the post or page itself, and not separated like a featured image. Such plugins may not be the best solution if they block the featured image from being shown on a Latest Posts list, or if they make the featured image load slowlythe featured image should load immediately for optimal user experience. To change the featured images location, cut this piece of code and paste it somewhere else in the page/post template. These dont control your featured image, but they show up right below the featured image, so its important for displaying the content. Many of them provide tools for seeing previews of what shows up on Facebook and other social networks. Scroll through the list of pages to locate the one you assigned as the Homepage. Click the Preview Filtering button to see which bulk replacements will occur. This is important because the bulk edit is permanent, so you want to be sure of your actions at each step. This field is available on all WordPress posts and pages by going to the Post Settings panel on the right side of the article or page. Thats a problem, so follow the steps below to ensure your featured image is always ready to go for social sharing. Furthermore, an engaging story isnt complete without the introduction, and thats exactly the purpose of a featured image. Allow Featured Image for Viewing 6. Click on the Select Default Featured Image button. Insert any content you want for the blog post. Luckily, as WordPress has evolved, the errors have become a little less ambiguous, making it somewhat easier to determine their cause. Without automated featured images, youre left with blocks of text and links to webpages. The most important option right now is the Include Image field. Rather, quickly explain whats in the picture and potentially add the keyword to boost your rankings. Regardless, you must bulk edit these featured images so that youre not spending hours editing each and every one of them. Click the Remove Block option at the very end of the list. 2 Answers. However, youre usually going to opt for the one titled Replace featured images by the selected image. This allows you to upload an image that will replace as many current featured images as you want. It can also prevent people from sharing your work, considering its not all that appealing to share a blog post on Facebook that doesnt have a featured image. Finally, you also have the option to visit theDevelopers Debug Tool on Facebook. In general, the following solutions tend to help with error codes telling you that an image is either too large or not currently supported for uploading: Your hosting provider often sets the WordPress memory limitations. However, you still may see a vague error, as the following HTTP error. message. As long as youre not making the image too small, you should still be able to offer a beautiful featured image. If youre having problems with the SEO plugins discussed above, or you simply dont plan on using an SEO plugin (and therefore, dont have access to a quick Open Graph activation button), there are a few other options to activate Open Graph. Not only that, but its essential to realize that featured images display differently when compared to a regular photo uploaded to a post or page. With the OG plugin activated, you should now see the post information and the featured image in the preview. Although it may be a temporary fix, this can also prove useful for setting permanent featured images on pages and general blog posts. Every hosted image, including featured images, has metadata crawled by the search engines to figure out what your post or page is all about. I always prefer the classic editor. Images in my header seem to be spontaneously not showing in my headers. A lot! Its a must-read to speed up your WordPress site. Whether youre overriding existing featured images or trying to fix ones that werent existent in the first place, the Quick Featured Images plugin does the trick for all of that. Created new Home page. The most common ones are: Incorrect home and site URL. Do the same for footer.php to get the footer. There are several steps you can take to mitigate the problems: Thats a simple three-step process, but theres much more detail behind fixing your featured images. Locate the section titled Actions with a single image. This means you can upload an image that acts as the post or pages cover media, similar to a book or magazine cover. Unfortunately, you discover that the featured image doesnt look quite as nice as you had hoped it would. If the problem is solved, then it was an error stemming from an outdated plugin. Its used to show the start of a new section or an article. However, Lazy Loading often causes problems with featured images since some Lazy Loading plugins treat featured images as regular images. WordPress offers several ways to list your blog posts elsewhere on a website, yet sometimes you have to configure the right settings to ensure they show up properly. My guess is your Head navigation is not called in header.php check you file page.php and see the lines following <?php get_header (); ?> if the lines below introduce header navigation either move them into header or copy them into same location in your single.php file Share Improve this answer Follow answered Nov 16, 2016 at 16:03 Artem Ankudovich Scroll to the bottom of the page to click on the Next button. After you select an image, click the Set Default Featured Image button. The Multiple Featured Images plugin boasts several features that come in handy when troubleshooting and resolving your featured images problems. We hope this guide helped you troubleshoot the common problems with featured images not showing on WordPress. If not, then WordPress will render the default header file. Hello! Its possible that your current user role doesnt allow you to upload or view featured images. Thats how it should be if you want the functionality of a featured image with no duplication! Three image sizes often get configured on WordPress: Thumbnail, Medium, and Large. An even page header\footer. Hence, many hosts, and WordPress itself, define a maximum upload file size. This is done by using the align feature. It promises to make the featured image upload process a little easier for website owners. However, well recommend a few Open Graph plugins to resolve issues if any of your websites are running on another web host. In some cases, you will have to upgrade to a bigger hosting plan that offers more resources for your site. Fix the Plugins or Themes 3. Then well go deeper into other errors. As a quick reminder, you can turn any WordPress page into the homepage by going to Settings > Reading in the dashboard. Youll see this image get populated in the dashboard. Explore our plans or talk to sales to find your best fit. Yoast SEO is another SEO plugin that includes social sharing features and options to enable/disable the Open Graph functionality. The plugin is lightweight and doesnt offer any other features, making it ideal for those not interested in anything besides fixing the Open Graph issue. Reactivate each plugin one-by-one. Its most likely because youve uploaded a featured image while also including the same image in your content as a cover or regular image. Reinstalled GP plug in. One way to ensure your featured image field is never empty is to set a default featured image for all posts. Several factors can influence your header image not showing in WordPress, such as: An HTTP error due to the WordPress memory limit exhaustion. The new dimensions are also listed on the right side of the pop-up window. Regardless, a WordPress featured image not showing up is both frustrating and concerning. Checks whether a header image is set or not. The default featured image then populates inside the posts Featured Image module. Also, you can typically enable the Open Graph markup directly from an SEO plugins settings. It is working fine for mobile and tablet. After that, every time you drag the crop box, it will always keep to the 2 x 1 ratio, giving you less freedom to crop and ensuring your ratio remains consistent when creating featured images. The longest list of the most common WordPress errors and how to quickly fix/troubleshoot them (continuously updated). If you find yourself in this situation, we recommend returning to the Facebook Sharing Debugger Tool and clicking on the Batch Invalidator option. Your latest posts should appear wherever you placed the block on your homepage. I agree Pedro, I have never liked working Gutenberg editor, It has a way of messing things up. Click on the page specified as the Front Page. Theres a field for choosing where the image should come from when sharing a post or page to social media. For more details, you can see our guide on how to add header and footer code in WordPress. For instance, you could add or remove items like tags, categories, and the author. If you see the same photo under the Featured Image tab and in your content, thats causing the problem! Therefore, it could help with issues you may see with upload size restrictions or even if your permissions arent set properly. I disabled it , proved it worked, then enabled it to test and noticed that when enabling it again, this time it had automatically added in the new websites into the exceptions list and now everything works again!! In the Astra theme, launch the edit screen of your desired page and expand the Astra settings tab from the bottom right corner. The big question is whether or not the featured image for a post gets rendered properly when you share a link on Facebook. Its also prudent to understand what types of photos work well as featured images, seeing how it may be the original photos causing the issues to begin with. You may have a lot of old posts that dont generate featured images when shared on Facebook. Otherwise, you run the risk of someone deciding not to share the post at all, or your brand looking unprofessional when users do share any of your sites links. The Featured Image from URL, or FIFU, plugin allows you to take an external image and use it as a featured image for a post or page. However, only the front-page.php file shows the image. A cover image provides a wide or full-width image section to add anywhere on the site. Here are some common reasons that lead to issues with featured images in the first place: A few errors are more common than others when uploading images to the Media Library in WordPress. Some non-WordPress image editing tools you can use are GIMP, Photoshop Express, and Paint.NET. Now, go to Settings > Open Graph and Twitter Card Tags. For instance, you may want to revamp your homepage completely, and its easier to just make an entirely new page instead of editing the current one. Our last option for turning on the Open Graph protocol to reveal featured images is called the Open Graph and Twitter Card Tags plugin. Now I just need to fix everything else on my website that I had turned off and messed around with while going slowly insane trying to trouble shoot a problem that was nothing to do with WordPress, themes or plugins GRRRRRRRR. Go to Posts > Add New to create a new blog post. By default, this featured should be enabled, but its possible you turned it off at some point. The featured image may not be in the right place inside the page or post template. Whenever you make a change, its good to go back to the Facebook Sharing Debugger Tool to promote Facebook to search for more data on the post. Click the Save & Activate button. The next part is the most important element since it activates the featured images in the Latest Posts block.