Are you facing the challenge that no preview image is displayed when you share a blog post on your Facebook page? There's a very simple solution to this problem. Facebook offers a very useful tool for this: the Facebook Debugger.
What do I need the Facebook Debugger for?
You can use this tool to test links you want to share on Facebook. Simply enter the URL you want to test. The debugger will then show you when the crawler last visited the page, what information it sees (based on the Open Graph settings), and how the entered URL is displayed on Facebook.
If the URL has not yet been shared on Facebook, Facebook will display the message "This URL hasn't been shared on Facebook before" and you can retrieve the information for the first time via "Fetch new information" .
Metadata for Facebook
It makes sense to use so-called meta tags to tell Facebook which images should be used, for example, when sharing specific URLs. You can again use the very useful SEO tool Yoast for this . With it, you can tell Facebook not only which image should be used when sharing, but also which title and meta description should be passed to Facebook.
What image resolution does Facebook recommend for thumbnails?
Facebook recommends a resolution of 1200 x 628 pixels for preview images (of link posts) in jpg or png format.
Fix outdated Facebook thumbnails
If you've replaced an image in a blog post, you can use the Facebook Debugger to refresh the cache. This will allow Facebook to recognize your newly uploaded image. Simply click on "Get new scraping info" to do this.
What does Facebook need Open Graph tags for anyway?
In order for Facebook to be able to display a preview when certain URLs are shared, Facebook needs information on the URL, the image, the meta description and the content type (e.g. an article, an image, a video, etc.). This meta information is passed in the form of so-called Open Graph tags and is part of Facebook's Open Graph protocol, which is also used by other social media platforms (e.g. LinkedIn or Twitter).
For this reason, it's very important that you maintain the meta information of your blog articles using tools like Yoast. I've attached an example from my article " 11 Ways to Build More Trust" :
To ensure that your posts on Facebook & Co. are always displayed correctly, you should always maintain the most important Open Graph tags. I have listed the most important meta information (such as URL, title and image) in the following table:
| Open Graph | Declaration | Example |
|---|---|---|
| above:url | This tag specifies the URL that is fetched from Facebook (the time when Facebook last did this is shown under "Time Scraped") | https://www.petitchapeau.de/11-wege-fuer-mehr-vertrauen-im-alltag/ |
| above:type | The content type: Image, Video, Music, Website. Depending on the content type, other properties can also be queried. | Website |
| above:title | This tag determines what title will appear below the image when you share your link | 11 ways to increase your confidence in everyday life Petit Chapeau: Your travel blog for the soul |
| and: image | The URL of the image to display when sharing | https://www.petitchapeau.de/wp-content/uploads/2019/02/Trust-Life-11-Wege-zum-Vertrauen.jpg |
| above: description | The meta description of the shared link | How can I trust life? Many people ask themselves this question. In my blog article, I present 11 ways for more trust in life and everyday life. |
I hope this article has helped you. Feel free to share your experience with Facebook Debugger or other useful tools below this post. I would be glad!
Thank you for this post, I've always wondered where Facebook gets the pictures from. Very useful tool!!