Recently, a client informed me that when he attempts to share the website homepage link to Facebook, incorrect image is displayed on Facebook. And on Twitter, there is no image. Instead the default Twitter Card Image is displayed. I digged around and finally solved the issues for both Facebook and Twitter. If you are also facing similar issues related to incorrect WordPress Homepage Image Displayed on Facebook and Twitter, then hopefully, this post may be helpful to you as well. While I understand that the issue scenario may not be the same as in this case, still I hope you find some tips. Let’s get started.
Incorrect WordPress Homepage Image Displayed on Facebook and Twitter
Firstly, the website was built using WordPress and for SEO, Yoast SEO plugin is installed and configured to some extent. When the homepage link is shared to Facebook, incorrect image is displayed in the Facebook post preview image. The preview image displayed is not the desired image which is the logo of the website in this case. Instead, another image used in the homepage is displayed. And on Twitter, there is no image. Instead the default Twitter Card Image is displayed.
I recalled there were some settings in the Yoast SEO where Image and Title can be set for Social Media – Facebook and Twitter. So I headed to Yoast SEO plugin first to apply the Social Media settings.
Checked Social Media Settings in Yoast SEO WordPress plugin:
In the WordPress dashboard, navigate to SEO in the left side menu.
- SEO > Social – Yoast SEO > Accounts
If you have setup Yoast SEO plugin as an organisation, then you can add the Social Media account links here. If you have setup as an individual, then the fields are not enabled.
- SEO > Social – Yoast SEO > Facebook
Here under Facebook settings > Add Open Graph meta data > Enabled.
Enable this feature if you want Facebook and other social media to display a preview with images and a text excerpt when a link to your site is shared. We want this.
Under Default Image, Upload an image to use by default, which is used if the post/page being shared does not contain any images. Here I uploaded the site’s logo.
- SEO > Social – Yoast SEO > Twitter
Here under Twitter settings> enabled Add Twitter card meta data
Enable this feature if you want Twitter to display a preview with images and a text excerpt when a link to your site is shared. We also want this, so enabled. Here the page also says that Twitter uses Open Graph metadata just like Facebook, so the “Add Open Graph metadata” setting on the Facebook tab be enabled, if you want to optimise your site for Twitter. This is already done in the above steps.
In the same page, under “
The next tab is Pinterest which the website owner did not use, so this was skipped.
Next, I checked the following – Yoast SEO plugin settings for the homepage.
- SEO > Search Appearance – Yoast SEO
Here under the General tab, Homepage and Posts Page > It says, “You can determine the title and description for the homepage by editing the homepage itself”. So, I navigated to Pages, and edited the homepage. There at the bottom there are Yoast SEO settings for the homepage.
Here, we can edit the SEO Title and Meta Description of the home page and nothing else. The image displayed in the preview is still the incorrect image. The image desired is the orange color logo but displayed image is something else.
If you are using Yoast SEO plugin on WordPress, then make sure to edit the SEO Title and Meta Description of the home page instead of using the default text.
After saving the changes and clearing all cache, checked on Facebook and Twitter. The result is the same – incorrect image on Facebook and the default card image on Twitter.
Next, I opened Appearance > Customize > Site Identity and found there is no Site Logo added. The website is using a head background with a site title. Instead of a logo, the site title is displayed. So, because of that, we didn’t realize a logo wasn’t uploaded yet. But looks like we need to upload the logo to test it at least. So the website logo was uploaded.
After saving the changes and clearing all cache, checked on Facebook and Twitter. The result is the same – incorrect image on Facebook and the default card image on Twitter.
Checked the OG properties in the home page:
Opened homepage > right clicked > View Source
- The property=”og:image” content contains the link of the logo.
- The name=”twitter:image” content contains the link of the logo.
Scrapped cache of the link on Facebook.
- Opened https://developers.facebook.com/tools/debug/
- Entered the URL of the website in the space provided and clicked debug.
- The image displayed at “Link Preview” on the page was the same, that is, the incorrect image.
- Clicked “Scrap Again” button and the desired image is now displayed on the “Link Preview”.
To test, I pasted the website link in a new Facebook Post. The correct image is now displayed.
Adding the logo and scrapping the link solved the incorrect preview image on Facebook! Also for Twitter, after a few page refresh, the website logo started to display instead of the default image by Facebook.
Tip: If after doing all the necessary edits from your end, if Facebook still displays incorrect image, go to https://developers.facebook.com/tools/debug/ and scrap the link.
As for the logo on the website, since the logo image and the site title was practically the same in this case, the site title was hidden from Appearance > Customize > Site Identity and the size of the logo image was adjusted using custom CSS in the Appearance > Customize > Additional CSS section.
So, if you are facing a similar issue where the preview image on Facebook and Twitter is not appearing or incorrect image is displayed, then make sure to do the following:
- The site logo is uploaded – if the logo is the image you want to display as the preview image.
- Update the Social Media settings in the Yoast SEO plugin (if used) > Enable Open Graph meta data and also include default image for Facebook and Twitter.
- Scrap Facebook cache on https://developers.facebook.com/tools/debug/
If you were facing similar issue and solved the issue, I would love to hear how you solved it. Let me know in the comments below.
