Hit the Enter key to activate the crop and see the result in the preview. If youre still having problems, go to SEO > Social in the WordPress dashboard. THANKS This allows you to type in new dimensions, both the width and height, so that the already uploaded featured image shrinks. An alternative is to install and activate a plugin like Export All URLs. We recommend solutions like Optimoleand Imagify. Choose Preferences from the bottom of the menu that appears. Fill in the title, write paragraphs, and upload images to the article. Its also common to see varying degrees of featured image problems. 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. After that, click on the Save Changes button and test to see if Facebook sharing allows the featured image to appear. But what if the featured images arent showing on the blog page? 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. Without automated featured images, youre left with blocks of text and links to webpages. The plugin works with posts and pages, including custom posts and WooCommerce products. If the featured images now work, one of your plugins was the issue. Theres quite a bit of information about how your URL interacts with Facebook, but all you need to look at is the preview. 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. Honestly, I really dont like the Gutnberg editor. As you can see, a different image appears in the Featured Image section. Upon activation, you can go to Code Snippets Header & Footer from your WordPress dashboard. Note: Youre always able to come in here and change the static homepage. Think about using a default featured image plugin to fill in the blanks and list temporary or permanent featured images when you forget to do so. Test a deployment on our modern App Hosting. Considering you should be uploading high-resolution images as featured images, it makes sense to automate optimization. Theyre vital to help your post or page move up the rankings. There are several reasons for images to disappear from WordPress. The Open Graph protocol is automatically activated for all WordPress posts and pages. Allow Featured Image for Viewing 6. For instance, you could type in a 2 x 1 aspect ratio. Unfortunately, we cant walk you through the solutions to these issues as it requires you to either look into the theme settings or contact the theme developer. Also, I believe the classic editor should be a matter of choice instead of another plugin to install. Youre better off editing a photo to meet those suggested dimensions before uploading it to WordPress. Click the Remove Block option at the very end of the list. Its easy to grab a quick image that relates to the article just to save time. Itll avoid causing problems with your own server. This shows that youd like to have a customizable homepage with the ability to add and remove block elements through page builders like Gutenberg. However, you also want to use photos that actually look good, so you should still shoot for high-resolution photos as much as possible. Its used to show the start of a new section or an article. To add the featured images, click on the Latest Posts block. WordPress Featured Image Not Showing Properly (Or Not At All), WordPress featured images not showing properly on your site? You can search for the Cover block or scroll through the library to find it. Fix the Plugins or Themes 3. We covered the Open Graph essentials in the section above. We recommend checking boxes for the Title, URL, and Description. A featured image serves as the primary post or page image representing the entirety of that article when it gets shared or distributed elsewhere on your website or online. This means you can upload several featured images and choose which one of them gets shown on different parts of your website. Open your site in MyKinsta. The advantage of using a method like this is that theres no relying on a default featured image that may not apply to the post. 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. This is done by using the align feature. You should avoid stuffing keywords just because you want to. This is important because the bulk edit is permanent, so you want to be sure of your actions at each step. It results in an image duplication issue like this: Obviously, you dont want this. Finally, you also have the option to visit theDevelopers Debug Tool on Facebook. Kinsta and WordPress are registered trademarks. This could be just above your site's title and menu, for example. This brings you to the settings required to activate the Open Graph protocol and calibrate which content elements youd like to see when your posts and pages get shared to social media sites. Regardless, all of these errors are frustrating and confusing for users. This tells us the plugin is doing its job by adding the default featured image to the right posts and leaving out the ones that already have featured images. Make sure thats checked off to reveal the Featured Image option in your posts and pages. In terms of featured images on Facebook, we often see the following problems: All the concerns listed above stem from similar problems. Its also possible to generate featured images based on post authors, tags, and post types. Many image optimization plugins offer lazy loading functionality as an add-on. After that, feel free to drag it up or down on the homepage so that its located in the proper position. Therefore, we recommend using tools for cropping, compressing, and resizing before opting to increase your PHP memory limit. To move forward and see the featured image in action, click the Publish button. A first page header\footer. The Quick Featured Images plugin handles bulk editing for featured images along with a myriad of other functionalities, like adding a default featured image for all posts or setting presets for default featured images. You also have the option to Save the crop, even though its done for you. The next step is to Add a Filter, which essentially asks you to choose the images you want to replace. Is there a way to do that without using an external plugin? Now that you have the featured images ready, get sharing! This means you must make a page and assign it as the Homepage in the WordPress Reading settings. Or maybe they include colorful animations while still representing whats in the posts. You can still maintain the quality of an image after compression, cropping, or resizing. You can fix it by following these instructions: You never know when a human error may result in a featured image not being uploaded to your website. Note: Sometimes newer websites have trouble with Facebook and other social sites because Facebook hasnt crawled the site already. Make sure the area that says Your homepage displays is set to A Static page. Find and select the triple-dot icon () in the far right corner of the dashboard. Easy setup and management in the MyKinsta dashboard, The best Google Cloud Platform hardware and network, powered by Kubernetes for maximum scalability, An enterprise-level Cloudflare integration for speed and security, Global audience reach with up to 35 data centers and 275 PoPs worldwide. As you can see, the image we inserted into the post content is shown second since the featured image gets prioritized. Thats what we were trying to accomplish. Check to see if you can now upload and see your featured images. These are excellent tools for replacing poorly designed featured images or fixing problems when certain featured images dont show up in the first place. You may have noticed how some popular blogs use images with text wrapped around them. The featured image is too small or too large. We have an excellent guide on optimizing your WordPress images. Although not all featured image correction plugins complete the same tasks, there are a few that we recommend looking into before trying any drastic changes with your website. However, you still may see a vague error, as the following HTTP error. message. Thats a sure-fire way to eliminating legal problems. If allowed, you can also change the PHP memory limit on your own by editing your sites wp-config.php file. Avoid images that are way too large or small. For the AIOSEO plugin, navigate to the All in One SEO menu and click on the Social Networks tab. For instance, you may see the featured image appear on a list of Recent Posts or a blog feed on your homepage. Several factors can influence your header image not showing in WordPress, such as: An HTTP error due to the WordPress memory limit exhaustion. For instance, you might consider including things like the Site Name and Post Title but not having the URL. Configure WordPress Dashboard Settings 5. A big part of making sure featured images look right is to understand the best practices before uploading them to your WordPress site. The reason it shows on that page is because the header image has white areas on the left and right. The true advantage of a plugin like OG is that it doesnt require any configuration after the installation. Usually, duplicate featured images arent two featured images, but one featured image and a separate photo in the articles content area. Visuals can be decisive in your content marketing plan. How to Fix WordPress Featured Image Not Showing: 7 Solutions 1. Your theme layout does not support featured images. Therefore, it serves as a backup to the real featured image field, just in case you forget to upload the featured image but still want something to show up. If you find that its missing, follow the next few steps to activate it. 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. It could be a good thing but it downgrades the development experience. The following screenshot shows a post working well on Facebook since it includes a summary of the post content, with a link, the title, and the featured image. Be sure to Save the settings after youre done. Kinsta Hosting already offers Open Graph support, along with the possibility to control this using Yoast SEO. However, you also want to stick to a consistent theme. Some of WordPress built-in image editing features include: The Crop tool is usually the most important, so click on that to activate the edit module. Your themes coding often structures the featured image location and formatting. The only thing to do next is to review and publish the post. You probably have the Different First Page box checked in the Options section of the Header & Footer Tools>Design tab of the ribbon. 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. The featured image is prone to human error, considering the page or post author must manually upload a featured image whenever creating a new webpage. 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.. To fix the situation, find and click on the Screen Options tab in the dashboards upper right-hand corner. We hope this guide helped you troubleshoot the common problems with featured images not showing on WordPress. Tell us about your website or project. You can click on the Scrape Again button or simply refresh the page and paste your post URL in the field once more. Take a photo with your own camera. 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. This setting controls the sizing of all featured images shown in the Latest Posts block. 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. Also, you can typically enable the Open Graph markup directly from an SEO plugins settings. Insert any content you want for the blog post. The default featured image then populates inside the posts Featured Image module. Problematic WordPress themes or plugins. Another way to use featured images is by listing a feed of your blog posts on your sites homepage (or any other page). Skandha. The Ixion theme page provides details of setting up your Header images and also the size specifications at the bottom of the page. Larger images get compressed and lose quality, while smaller images get stretched out and end up looking terribly blurred. The last page presents the bulk edit results, with details about the posts that now have new featured images. The block is called Latest Posts. Make sure to get this agreement in writing (email works too). The featured image field is missing when youre trying to edit or create a page or post. Get premium content from an award-winning cloud hosting platform. To begin, install and activate the OG plugin on your WordPress site. These are the general Media settings for your entire WordPress website. Go to Posts > Add New to create a new blog post. Therefore, it could help with issues you may see with upload size restrictions or even if your permissions arent set properly. Test out the fields for the Number of Items and Columns to ensure your featured images are both presentable and appealing when they get published on the homepage. All files/pages are in the root folder. Now, go to Settings > Media in your WordPress dashboard. If the goal is to have no featured image, you can remove it altogether. You have two options for grabbing URLs from your site. Do the same for footer.php to get the footer. However, Lazy Loading often causes problems with featured images since some Lazy Loading plugins treat featured images as regular images. This plugin seeks out all empty featured image fields and fills them in with the default option. However, with the Default Featured Image plugin active, all you have to do is click on the posts Update button. Plugin Conflicts. Giving it a new position within the template will also tell WordPress that it should render somewhere else on the frontend. 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. This means that youve turned off a setting on your dashboard to reveal the Featured Images column. Click on the page specified as the Front Page. Click the Edit Image link to proceed with the edit. This is still common for many pages, or you may have rolled back the Gutenberg editor to use the old editor instead. Another way to see your featured image is to create Recent Post galleries or feeds to your blog, usually elsewhere on your website. Replace featured images with the selected image. It allows you to swap out several previously listed uploaded featured images, making all of them the same image. The plugin also has a wonderful native search engine that pulls from places like Google, Pixabay, and Unsplash. it's not working. The first is going about it manually, clicking on each post and page on your site and collecting the URLs into a document. Simple, Clean and Lightweight Responsive WordPress Themes . This section is outputting a style with a .site-header background image with a relative url; and is overwriting whatever it outputed before with the conditional is_page() codes. Therefore, we recommend checking your themes support for featured images. Scroll down the list of settings to locate the Preferences option. The thumbnail images arent showing up as the right sizes. Youll typically see this happens on post lists or at the top of a page or post, resulting in two of the same photos stacked on top of each other. However, only the front-page.php file shows the image. The Featured Image Settings are towards the bottom. Upload multiple photo sizes on a test post and mark down the dimensions of each one. It often presents useful information in the form of a photograph or graphic image, granting the user a sneak peek into the information behind that link. After each reinstallation, you should check to see if the featured images are still functioning and showing up properly. It would be troubling and potentially illegal to simply search for an image online, take its URL, and use the image for your featured image, as you do not know where the image URL is hosted. Editing a featured image in WordPress is often the easiest and quickest way to resolve an issue with a featured image thats too large or needs some cropping done. Its getting placed on a digital medium where the photos resolution doesnt necessarily have to be print-worthy to look good. That means only those images will get replaced by the new image. You have the option to choose one and click the Set Featured Image button. These best practices cover everything from design recommendations to uploading tactics, enabling you to feel confident about all featured images while also cutting down on the amount of time you spend with featured images. Theres no reason to go into troubleshooting mode if your featured images and post content all come up fine on Facebook when the post gets shared. This isnt a rule, but its also common to see issues with featured images when some plugins have access to your media library or alter all images functionality. Featured images dont show up as thumbnails in your lists of posts and pages on the dashboard. All you have to do is paste the post link into the Facebook status field (you can also do this on personal or business pages) and wait to see if the post content gets rendered, along with the featured image. This selects the entire block and reveals settings for that block in the right-side panel. In some cases, you will have to upgrade to a bigger hosting plan that offers more resources for your site. Disable Lazy Loading 4. This tool scrapes any URL you want and tells you whether any errors occur with Facebook accessing the information. Our feature-packed, high-performance cloud platform includes: Get started with a free trial of our Application Hosting or Database Hosting. 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 the_post_thumbnail(); function may lie before the page title or after the contentthat depends on your page and theme configuration. Whenever youre done editing an image, you can click Enter to active the edit, and then Save the image. But what if thats not the case? Essentially, this plugin suits those struggling to decide which featured image to use, or when one featured image makes sense at the beginning of the article, but another one looks better in a sidebar. This way, youre not limiting your sites resources with too many large photos. Now, go to your Facebook page (personal or business) and paste a link with a featured image into the Status field. Each file/page calls the header.php and displays it. If youre still not having success with that, consider going to the Facebook Sharing Debugger to ensure Facebook knows how to crawl your website, as thats usually the problem if you already have the Open Graph protocol activated. This means that as long as you click Save Draft or Publish, the image remains active on that post until you remove it. You have to call the header too. Whats great about Yoast SEO is that simply installing the plugin may do the trick for activating the Open Graph protocol for social sharing. There are many ways to go about it, and well cover them all. Though theres no recommended size for a WordPress featured image, we suggest starting with 1200 x 628 pixels. 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. Again, check to see if the featured images are showing up after all plugins are deactivated. This article shows you how you can fix WordPress featured images not showing properly on your website. Click the Save & Activate button. You may discover that your theme does well with slightly wider or shorter featured images. We recommend only using a media hosting platform, or maybe another website host that you own yourself. Legal information. 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. Problems with featured images stem from various problems. Still, its far easier to know the core approaches to featured images to minimize problems in the first place. The only problem is that it doesnt tell you which of your Media Library images have been previously uploaded as featured images. In general, a cover image is far more customizable directly from the WordPress dashboard than a featured image. Thats because having four columns will require having much more space (and smaller images) than a block with two or three columns. Were most interested in the bulk editing tool for this tutorial. Well only cover how to fix your featured images with built-in WordPress tools for this tutorial. Post thumbnails are what featured images used to be called in WordPress from its early days. The Add Block button looks like a + sign. Creating a website with stunning content to find that featured images dont show is both frustrating and potentially harmful to your brand. Click on the Select Default Featured Image button. 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. Yet, we should all take our time when deciding on a featured image, seeing as how its the book cover of the post thatll get people to pick it up and read. Click the Choose Image button to proceed. Therefore, you may have to use custom code to customize the featured images appearance. Check out our post on the 10 best places to find free images for WordPress, no strings att, Get started, migrations, and feature guides. The most important piece of image metadata is its Alt Text, which can be found by opening your featured image in the Media Library. The .header-img is a common css class in WordPress themes. For instance, the last image in a long article doesnt necessarily have to load until the user scrolls down to the bottom of the page and gets to that image. Click the + Block Inserter icon to add a new block. Youve noticed something wrong with one, or all, of your featured images. Keep in mind that the initial Select page in the Quick Featured Images plugin offers a wide range of actions to take with your featured images. This might be the root of your featured image problems. Another option is to take action with no selected image, like removing a featured image that repeats several times on multiple posts, or if you need to remove all featured images without existing image files. Click on the Preferences menu (the three vertical dots at the top right). It is primarily used for replacing featured images in bulk. This should get you closer to the optimal featured image size for your theme. But didn't notice the header image was missing from the desktop view until today. An easy way to see if the Open Graph code is activated on your site is by utilizing an SEO plugin. Youre better off using a plugin that can override the conflict than swapping out your entire theme and redesigning your website just to fix featured images. For instance, you may want to pull the first image in your content and make it your featured image for a post. You can also set featured images from more unique sources, like a book API or an ISBN, or even from a post title or search engine. In this module, you can select multiple images from your Media Library. We also recommend looking at the Image Dimensions. A featured image does not differ from other photos on your website. Thats a problem, so follow the steps below to ensure your featured image is always ready to go for social sharing. To remove the header, check the top box called disable primary header and update the page. Your theme, or a plugin, has an error or is causing a conflict with your featured images working. Its also a good idea to make adjustments to child themes instead of the core WordPress files. If not, then WordPress will render the default header file. Figuring out the optimal dimensions before uploading the images allows you to minimize instances where the featured image gets stretched out or cropped strangely. If the featured image is showing on Facebook, then theres a good chance it also appears on other social sites. To check, go to the WordPress post or page editor in question. We particularly like its ability to set rules for your past and future featured images. Go to Appearance Editor. The theme doesnt allow for featured images, or you have to turn them on through the theme settings. I installed the plugin: "Options for Twenty Seventeen" and made some changes to my site. The max height shouldnt matter as much since your featured images shouldnt be that tall. If either is the case, open the page or post in question and look for the Featured Image block towards the pages right side. 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. 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. However, you may have to update previously published posts for the default featured image to show up on those. Here, select the Facebook tab. Search for the Cover block and click to add it. Click the Homepage dropdown field to reveal the list of pages you currently have active on your website. As you can see, the two posts shown from before had their featured images swapped out by the one I had wanted. The good news is that WordPress blocking an image because of this reason means that WordPress has done its job! Run your Node.js, Python, Go, PHP, Ruby, Java, and Scala apps, (or almost anything else if you use your own custom Dockerfiles), in three, easy steps! Therefore, Kinsta bans the majority of Open Graph plugins as they can cause conflicts. The first problem arises when you cant see the featured image thumbnails in your list of pages or posts. I don't think I've changed anything in setting to cause this. The featured image also appears in the embeds when a post or page is shared on social media sites. It does this by halting the loading of images on a page until they come into view on the screen. Hence, this issue is exclusive to those using it. Select the image you like, then click on the Choose Image button. Just make sure its the right image and that the plugin is recognizing it. You can include your header image in your posts by placing it in the tag of your WordPress site's root document. Scroll to the bottom of the page to click on the Next button. Reactivate each plugin one-by-one. Select the General tab and locate the Description Settings section. Therefore, I am trying to use the custom field name "header_image with the value using the the correct url. Several tools are available in the Edit Image pop-up, but the most trusty of them is listed on the right side, and its titled New Dimensions. Simply having a header.php in your theme's folder will not output your header to the browser. Note: You can upload WordPress featured images to posts and pages, but that basic rule expands once you start adding things like WooCommerce product pages and custom post types. Youve figured out how to upload a featured image and completed your post content. When I exported post and media and imported on my new site everything was fine eventually. 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. This usually means that theres something wrong with the image itself, or you need to allow larger uploads to your WordPress site. In that case, you should keep the photo under the Featured Image area and delete the one in the articles content editor. One of the last areas to consider for the Featured Image section (in the Latest Posts block) is the number of items you show in the block and how many columns make up the block. Another concern is that a certain page or post in your WordPress files isnt accessible because of user permissions. This helps speed up your featured image creation process while also helping your brand. For instance, you could cut down each featured image to 25% of its original size. Weve outlined both common and uncommon problems with featured images. If you find a photo that you really love, reach out to the photographer or artist and ask if you can use their work on your website.