When you or someone else shares a link to your website on the largest social media platform on the planet, Facebook will automatically attempt to associate an image with the page address.
If it’s a blog post (e.g. https://gracefulresources.com/errors-in-email-sign-up-incentives/) or specific page (e.g. https://gracefulresources.com/about) , Facebook will typically recognize the featured image associated with the content. It will also display the Meta Description – a fancy tech term for the text (up to 156 characters) that display under the link title in search engine results and on social media platforms like Facebook.
But when it’s your overall website address (e.g. https://GracefulResources.com) that is being shared, Facebook can get confused on what image and text to display and if it can’t find an image, it will display a big empty box (which doesn’t exactly inspire people to click on the link).
This happened to a client site I just launched and it was my error.
Here is how it looked on Facebook:
The good news is that I humbly share my missteps here so you can put to practice the corrections I learn.
How to Correct Your Website Facebook Share Image
There are three steps to test and (if necessary) fix your own website Facebook share image when your URL is shared.
STEP ONE: Preview Your Website Content with the Facebook Debugger
Facebook has a free publicly-available page that lets you preview what your website content looks like when it is shared and it lets you reset (or scrape) what Facebook is seeing.
Here is the web address: https://developers.facebook.com/tools/debug/.
Simply enter your website address and then click “Debug” to preview your site:
Technically speaking, Facebook looks for Open Graph (og) tags on your website to know what title, description, and image to display. If they are not explicitly set on your website, Facebook will guess at this information.
STEP TWO: Correct Your Website Image, Title, and/or Description (If Required)
If you discover your intended image, title, or description is incorrect or missing, you’ll need to fix it within your website dashboard. If you are using WordPress, I use and recommend the free Yoast SEO plugin to fix this problem.
Once the plugin is installed and activated, click on Social in the new SEO menu and then the Facebook tab to specify the Frontpage Settings:
At the end of the same Yoast settings page, you may also need to enter a Facebook app ID. For more information and instruction for the app ID, please reference this article.
If you are running your WordPress website on the Rainmaker Platform, you can simply email their helpful customer support team with your front page image and description, and they will set it up for you free of charge. That’s what I did for this website and here is how it looks on Facebook:
If you using another platform service, I recommend reviewing your social media metadata settings within your account or contacting the corresponding customer service for assistance.
STEP THREE: Reset (or Scrape) What Facebook is Seeing
Once you make an adjustment on your website back-end, you can accelerate the time it takes Facebook to take another look at your website content by asking Facebook to scrape your address again.
If everything looks good, your website is now ready to be shared on Facebook!
In the case of my client’s new website SoftballPitchingTools.com, the correct results are now confirmed:
Hope this helps,
Brent
Other Resources for Your Online Success
- Lead Magnet Project (an interactive online project for professionals building relevant email lists)
- Lead Magnet Survey (share your own opinion about email sign up incentives and discover what other entrepreneurs recommend)
- Lead Magnet Guide (5 essential characteristics for email sign up incentives)
- Lead Magnet Examples (Graceful Resources email subscribers can add their own web address for free)
- Recommended Website and Email Software Resources (you’ll also discover why these resources are recommended)
Cheering for your online success – one project step at a time!
Brent