If you’re reading this, chances are you’ve experienced being infuriated trying to debug the Facebook cache and Share button “hell” while incorporating their share functionality into websites you’re developing, and have possibly read some of the help posted online from others…
The Facebook Developers URL Linter tool is key, for starters, to troubleshoot what’s going on with the Open Graph Protocol meta tags being generated (or lack thereof) and to break Facebook’s cache… but what had really been tripping me up was not being aware of the very specific thumbnail image requirements specified in their documentation:
- og:image – An image URL which should represent your object within the graph. The image must be at least 50px by 50px and have a maximum aspect ratio of 3:1. We support PNG, JPEG and GIF formats. You may include multiple og:image tags to associate multiple images with your page.
Open Graph protocol – Facebook Developers
Pay attention to those specs, and your thumbnail image display issues will be solved. Also, if you’re a WordPress user there are a handful of plugins available for generating the OG meta tags… one I especially like is Open Graph Protocol in Posts and Pages by HitReach which allows you to specify exact OG tags per post or page as well as set site-wide defaults.