Returning back to the original page, the image suddenly shows up. Another Screen Options dilemma comes into play when you do not see the actual field to upload and insert a Featured Image. For the AIOSEO plugin, navigate to the All in One SEO menu and click on the Social Networks tab. The Ixion theme page provides details of setting up your Header images and also the size specifications at the bottom of the page. The Preview button also does the trick for testing a featured image, but the public cant see it until you hit Publish. We recommend taking a look at his guide to walk you through those steps in detail. Youre better off editing a photo to meet those suggested dimensions before uploading it to WordPress. Select the first two checkboxes to grab the Open Graph image, while the other is for using the page or post featured image. An easy way to see if the Open Graph code is activated on your site is by utilizing an SEO plugin. 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? Figuring out the optimal dimensions before uploading the images allows you to minimize instances where the featured image gets stretched out or cropped strangely. For instance, you may want to pull the first image in your content and make it your featured image for a post. For instance, you could cut down each featured image to 25% of its original size. Scroll down on that panel and open the Featured Image dropdown item. To add content to your homepage, and to adjust the settings for the blog feed on that page, go to Pages > All Pages in the dashboard. In that case, you should keep the photo under the Featured Image area and delete the one in the articles content editor. 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. Some WordPress users complete all the right steps to upload a featured image but realize that a duplicate of the featured image appears. One way to complete this task is by opening up your Facebook account and pretending youre about to share a status update. Sometimes other settings override this, but its not a bad idea to mark down the dimensions to ensure you at least know the optimal width for a featured image. You can also do this with pages or click on the All Posts option if you're interested in adding a featured image to a previously generated post. The following block of code is what you can insert (or look for) in the functions.php file: Lazy Loading serves as one of the many methods used for optimizing images to improve site performance. Besides, the featured images for each post should be shown above the post title and link. Plugins, although rather useful for building a WordPress website, occasionally have questionable coding. Click the Choose Image button to proceed. @chrissel: Hello there, I am afraid the option to display Header Images on all pages is only available in the pro version of the theme. This could be just above your site's title and menu, for example. It results in an image duplication issue like this: Obviously, you dont want this. The first is OG, which comes in handy for adding the Open Graph protocol to turn any webpage into rich objects for social media. You never know when a human error may result in a featured image not being uploaded to your website. This is important because the bulk edit is permanent, so you want to be sure of your actions at each step. After that, click on the Save Changes button and test to see if Facebook sharing allows the featured image to appear. Click the Edit Image link to proceed with the edit. has_header_image (): bool. For instance, you could type in a 2 x 1 aspect ratio. So after a serious research, I realized that, I need to export both post and media as well. Did we miss anything important? Because of this, pasting and Debugging the URL in the Sharing Debugger Tool from Facebook could actually solve your problems altogether. A column called Featured Image is supposed to appear after the Post Date. An alternative is to install and activate a plugin like Export All URLs. Find the Add Open Graph Meta Data switch and make sure its set to Enabled. However, if you right click this rectangle and choose 'View image', the correct image is shown. One way to ensure your featured image field is never empty is to set a default featured image for all posts. You have to call the header too. You can still maintain the quality of an image after compression, cropping, or resizing. It does this by halting the loading of images on a page until they come into view on the screen. Make sure the Featured image toggle is switched on. 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. Fix the HTTP Error When Uploading a Featured Image 2. Several factors can influence your header image not showing in WordPress, such as: An HTTP error due to the WordPress memory limit exhaustion. Talk with our experts by launching a chat in the MyKinsta dashboard. Youll see a message that tells you the Image Saved. After all, its difficult to shrink, resize, and crop every image manually you plan to upload. 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. We dont recommend trying to enlarge an image as itll only make it blurry. This might be the root of your featured image problems. Scroll down in the Block settings tab to view the options available. Check out our guide here to learn more about the Facebook Debug Tool. In the Preferences overlay, click on Panels on the left. Overall, photos on your website take up a significant amount of server space, potentially slowing down your site loading times. Our feature-packed, high-performance cloud platform includes: Get started with a free trial of our Application Hosting or Database Hosting. Lets start with the simplest of solutions, making sure youre uploading your featured images properly. Click on the Cover block to insert it into your post or page. 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. Three image sizes often get configured on WordPress: Thumbnail, Medium, and Large. Overall, the best way to activate the Open Graph protocol for properly sharing content and featured images on social media is by installing a plugin like Yoast SEO or OG. I don't think I've changed anything in setting to cause this. Twitter Cards are a little different than Facebook sharing modules, so you can go through these settings to make sure everything looks good. An image optimization plugin does much of the work for you, ensuring that your featured images actually show up and dont slow down your website. I agree Pedro, I have never liked working Gutenberg editor, It has a way of messing things up. Where do you go from here? For example, you might complete an action with multiple pages. WordPress makes it easier to align images to the left, right, or center. 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. Click the Preview Filtering button to see which bulk replacements will occur. Thats because theres no need to activate an Open Graph plugin with Kinsta. Make sure thats checked off to reveal the Featured Image option in your posts and pages. Note the exact issue, like if the image isnt uploading. 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. Added a featured image and it was finally appearing. 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. Insert any content you want for the blog post. A featured image does not differ from other photos on your website. However, if you use any other hosting provider, it may prove useful. As you can see, the two posts shown from before had their featured images swapped out by the one I had wanted. All of these come into play when highlighting your recent posts and ensuring they look presentable while also displaying your featured images. 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. A first page header\footer. This allows you to paste in up to 50 URLs and run the tool so that Facebook scraps their metadata properly again. Click the featured image thumbnail to access its various settings. You also have the option to Save the crop, even though its done for you. Upload multiple photo sizes on a test post and mark down the dimensions of each one. The longest list of the most common WordPress errors and how to quickly fix/troubleshoot them (continuously updated). We'll get back to you in one business day. This way, youre able to present somewhat of a media portfolio for your posts instead of a bunch of links with only text. The featured images for all blog posts in that feed appear as smaller thumbnails, providing a more visual experience for those looking for content. I don't understand why the image only works in . Select the image you like, then click on the Choose Image button. Theres a long list of settings to mess around with, so its entirely up to you. Click on the Featured Image panel to open its settings. You are not familiar with PHP so you can use this plugin for the header image. One way to get in serious trouble with your images is by using photos and graphics you randomly find online. At some point, you may realize that several old posts could use new featured images. Choose Preferences from the bottom of the menu that appears. To begin, go to your WordPress dashboard. We covered the Quick Featured Images plugin above in this article. Here, enable the Display featured image option. Deleted all plugins. This tool scrapes any URL you want and tells you whether any errors occur with Facebook accessing the information. You have to be on the Posts or Pages panel for the right Screen Options panel to appear. WordPress added the Cover block to its Gutenberg editor only recently. The big question is whether or not the featured image for a post gets rendered properly when you share a link on Facebook. Thats a sure-fire way to eliminating legal problems. What if the featured image isnt the right one, or you do not see an image at all? For more details, you can see our guide on how to add header and footer code in WordPress. I have created several files/pages, such as; index.php, front-page.php, page-about.php and single.php for example. Many blind people are using the internet through screen readers. If youre still having problems, go to SEO > Social in the WordPress dashboard. All files/pages are in the root folder. Whats great about Yoast SEO is that simply installing the plugin may do the trick for activating the Open Graph protocol for social sharing. Depending on your theme settings and various other factors, like certain plugins that change image settings, the featured image should appear first in your published blog post. It seems there is a conflict with your theme because I have tried to add an image header but it doesn't show at all. It also helps when your older posts dont have appropriate featured images. Another specific Open Graph module from this plugin is for Twitter. Next, enter the custom code in the 'Header' section. Here, youll see a button to Set Featured Image. You can upload an image to be your cover by clicking on the Select Media or Upload buttons. The Default Featured Image plugin offers a simple way to override all instances where a featured image is not set for a page or post. The preview image should look a bit smaller than before unless the change is so minuscule that you dont notice it. To begin, go to your WordPress dashboard. Yoast SEO is another SEO plugin that includes social sharing features and options to enable/disable the Open Graph functionality. The Featured Image column should now appear in your list of posts or pages. The default featured image then populates inside the posts Featured Image module. 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. Besides, any image you use on your site, including featured images, shouldnt be that large, to begin with. Scroll down to the section called Document Settings. The most important piece of image metadata is its Alt Text, which can be found by opening your featured image in the Media Library. THANKS You would usually find the featured image right below the title and above the first line. One of the more frustrating problems with WordPress featured images not showing involves the dashboard settings. Also, you may have to configure a specific theme setting so that featured images are populating for all posts. Take a photo with your own camera. Featured images look much better when the width is longer than the heightoften around a 2:1 ratio. 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. The only problem is that it doesnt tell you which of your Media Library images have been previously uploaded as 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.