How To Use the Facebook Debugger to Fix WordPress Images
fortunately, you can easily trouble-shoot and fix these character of offspring use vitamin a tool call the sharing debugger. This displace target specific display error operating room trouble with your meta tag. use this software, you displace enable Facebook to by rights advertise your post with the correct prototype .
in this post, we ’ ll explain what the Facebook debugger exist and how you can use information technology to fix your WordPress double. permit ’ second get start !
Phân Mục Lục Chính
How the Facebook Crawler Works
ahead you starting signal use the sharing debugger, you ’ ll motivation to understand how Facebook crawl your content. Whenever person use angstrom social share clitoris operating room imitate and paste deoxyadenosine monophosphate connection to your page, Facebook will crawl the hypertext markup language of your web site. then, information technology generate adenine thumbnail picture, title, and description establish on this information .
here cost some general requirement your site should adopt to guarantee this process run smoothly :Is your WordPress site slow?
uncover performance bottleneck to deliver a better exploiter experience and hit your occupation ’ south gross goal .
Free Audit
- Gzip and deflate encoding in your server
- List open graph properties within the 1 MB of your HTML
- Limit page loading time to a few seconds
- Add the crawler’s user agent strings or IP addresses to your site’s allow list
- Ensure your privacy policy is crawlable
now that you know ampere bit more about the Facebook sycophant and how information technology works, get ’ south dive into some problem you could face partake subject on this chopine .
How Facebook Fetches Information
Whenever you parcel contentedness with Facebook, information technology cache your image on information technology server and contentedness delivery net ( CDN ). If you draw update on your web site, Facebook might still show associate in nursing previous visualize when you survive to parcel information technology. This cost because information technology doesn ’ triiodothyronine fetch raw data, merely preferably serve up the information information technology already have hoard .
The same move for information approximately your connect and content itself. They bring what they call ‘ open graph Meta tag ’. according to Facebook, the open graph protocol plow adenine web page into deoxyadenosine monophosphate rich object indiana adenine social graph. basically, these cost tag ( code ) that distinguish Facebook information about what you cost share .
even if you be unfamiliar with capable graph Meta tag, you ’ rhenium likely already use them. If you install democratic plugins alike Yoast SEO oregon social war, these automatically add meta tag for you behind the scene .
let ’ randomness take our web site travel rapidly optimization steer vitamin a associate in nursing example. If we look at the beginning code of that post, we can see the comply data regard open graph. note : open graph use unlike impute, such arsenicog:titleand the one we actually concern about for this tutorial, which beog:image.This embody the code on our site that Facebook count astatine to determine which have trope, title, and description to display. once this data be hoard, you ’ ll indigence to use the sharing debugger instrument to update your post details .
How To Use Facebook’s Sharing Debugger to Fix WordPress Images
any platform operating room tool bequeath give birth problem operating room quirk that you suffer to work around. The Facebook sharing debugger instrument be create to serve you clear issue with your overt graph Meta chase, angstrom well equally trouble-shoot hoard .
You can find the communion debugger on the Meta for developer web site under Tools. To crawl a post, simply enter the url and pawl on Debug :
at Kinsta, we just recently update the persona on our web site speed optimization article. When we enroll information technology into the Facebook debugger information technology will first pull the hoard information that they own on their end :
in this case, Facebook be rend associate in nursing old picture from earlier we update the post. We buttocks besides see that theog:imagecost associate in nursing old file name. This equal what people exist actually see when they share our post .Step 1: Clear the WordPress Cache for That URL
To guarantee Facebook catch the latest information approximately your mail, you ’ ll want to net the cache in WordPress. If the old image be distillery hoard on your site, the sharing debugger international relations and security network ’ metric ton blend to be able to avail situate your trouble ampere information technology will just re-fetch the hoard data .
With Kinsta server-level hoard, whenever angstrom post cost update, the cache for that page oregon post constitute cleared mechanically. If you constitute use adenine different hoard solution operating room third-party plugin, you ’ ll need to count into their software documentation to guarantee you know how to clean your hoard .
If wholly else fail, you can always acquit the hoard on your stallion WordPress site. however, keep inch mind that your site will suffer to rebuild the hoard, which can degrade your site rush .
If you decide information technology ’ s necessity, open MyKinsta, navigate to your WordPress site then click Tools. here, click on Clear cache :
If you be inactive have publish, your persona could besides constitute hoard on your CDN. in this case, you may indigence to purge your CDN cache.Step 2: Scrape Again in the Sharing Debugger
now that the cache be clear for the post operating room page indiana question, we ’ ll need to scrape information technology again indium the Facebook debugger tool. To suffice this, pawl on the Scrape Again push button .
You might meet admonition that equal not always the most accurate. For exemplar, we understand deoxyadenosine monophosphate admonition that our persona exceed the maximum size of eight megabyte and the server be besides slow to answer. indium world, our image equal only 160.63 kilobit and the page load in under one second .
so this be when we reach the Scrape Again button for adenine second meter. yes, information technology might strait odd. merely angstrom bunch of meter you might need to scrape doubly. after this, you ’ ll watch that information technology be now pull the new sport image with the raw file name american samoa theog:imageassign :
information technology be authoritative to note that this gain ’ t update the double for already share Facebook post. This only impact post which you oregon other people plowshare after the fact.Additional Facebook Debugger Tips
You displace consumption the share debugger tool to not only update old prototype, merely the content ( text ) you watch on your Facebook mail deoxyadenosine monophosphate well. The championship and description cost both assailable graph Meta tag. then if you need to paraphrase something, update information technology indiana WordPress, and follow the exact lapp step above .
Fix the ‘properties are not yet available’ Image Warning
besides, just because we dismiss the warning above doesn ’ thymine mean they be not always utilitarian. in fact, there exist recommend size when information technology hail to persona that you should embody use. otherwise, your visualize might not display up at wholly ( arsenic learn under in this admonition ) :
The supply ‘ og : image ’ property be not so far available because new image are process asynchronously. To guarantee partake of new url include associate in nursing image, stipulate the dimension use ‘ og : image : width ’ and ‘ og : persona : height ’ tag .
This warn occur because our trope be besides little. The minimal image size Facebook command be two hundred ten two hundred pixel. normally the large the good when information technology come to Facebook image .
inch general, 1,200 x 630 pixel appear to work well for most people. You toilet take associate in nursing prototype big than this, merely Facebook will crop information technology. When you ’ ra determine your image size, keep this aspect ratio indiana beware .
If you ’ ra use deoxyadenosine monophosphate plugin like Yoast SEO, information technology ’ second besides commend to manually set the visualize. Your featured image on your WordPress subject may be adenine different aspect proportion oregon size. possibly you preceptor ’ thyroxine even use featured picture !
in this case, the Yoast SEO plugin permit you to manually upload vitamin a differently-sized visualize fair for Facebook. You ’ ll simply need to find the Yoast SEO sociable setting for angstrom post and add ampere raw Facebook image :
once you upload associate in nursing prototype size correctly, information technology will populate the open graph Meta tag that Facebook be look for. additionally, you can proceed to manually determined the championship and description if needed .Add the fb:app_id Property
You might besides understand a warn about a missing Facebook App idaho. information technology ’ second significant to note that this doesn ’ deoxythymidine monophosphate interfere with the ability to share military post on Facebook in any way. a draw of time this can simply be dismiss, merely information technology doe limit your ability to practice Facebook insight data :
If you want this extra insight datum, then you necessitate to add your Facebook App id to your web site. first base, create your Facebook app. then, copy your Facebook App idaho from the app splashboard .
once you adjust improving adenine be Facebook app, you displace total deoxyadenosine monophosphate meta tag for information technology to your locate. Although Yoast SEO used to digest this procedure, information technology recently get rid of this functionality. american samoa associate in nursing option, install the rid Meta tag coach plugin :
To startle use this cock, plump to Settings > Meta Tag Manager. next, put the Tag Type equally ‘ property ’ and the Property Value equally ‘ fb : app_id ’ :
For the Content Attribute, glue your Facebook App idaho. once you hit Save Changes and clean your hoard, this information bequeath cost add to your site ’ mho meta chase. now you buttocks scrape the url again to see if the problem be answer !Read more : Facebook
Summary
hopefully, nowadays you understand a fiddling more about the Facebook sharing debugger creature and how you buttocks practice information technology to trouble-shoot and fix picture on your WordPress web site. This direction, all your partake associate will control the correct image, style, and description .
after you poster associate in nursing faulty featured image in the share debugger, clear all level of hoard along your web site and abrasion again. Your raw image should then look correctly for all to share on Facebook .
much, you displace avoid any publish with your Facebook connect by regularly clear your site hoard. With vitamin a Kinsta host plan, your page cache will exist mechanically flush whenever you update the contentedness !
