If Facebook, Twitter, or other social media are not fetching your images from website posts when you share them on these platforms, there may be some things you want to check at your end. Some of the reasons can be:
- Conflicts between themes or plugins
- Missing or corrupt image files
- Wrong file paths
- Incorrect file permissions (.htaaccess)
- Protected files or hotlink prevention (.htaaccess)
But before discussing further, first things first. If you haven’t already, make sure that OpenGraph is set properly on your website. This can be done using Yoast SEO RankMath or any other SEO plugin you may have.
You can also use social media tools to verify if the issue has been fixed by using Facebook Debugger and Twitter’s Social Card Validator.
Note: X (Twitter) has discontinued social card validator tool. Now, you can only validate links by just adding them to compose post from your Twitter account. If the image appears, it means it’s working fine.
Once done, one by one check the above-mentioned reasons.
- Make sure your plugins and themes aren’t causing this. Unfortunately, the only way to know is to change the theme and disable plugins to verify.
- Sometimes, files uploaded get corrupted, causing issues with showing OpenGraph images on social platforms. Reuploading files after editing can help in this case.
- Missing wrong file paths in images can also appear them broken. Check if the link of images you’re using are correct or not.
- Incorrect file permissions and protected files issue can also be the reason. Especially if you’ve a security plugin or a cache plugin that’s handling your .htaacess file. In my case, this was the issue. Let’s dive into it and how you can fix it easily.
- For hotlink prevention, you need to either turn off the feature from hosting or from the third party plugin you’re using. Or check your .htaacess file incase there’s a code sitting there that’s causing the block.
Fixing social card appearance issue for WordPress sites:
This can happen if you’ve used any plugin such as “All In One WP Security” aka AIOWP (in my case).
You can look into our guide to edit the .htaaccess file on your website to find and start editing .htaacess file of your particular website.
I’ll wait for you here till you learn from the above mentioned link to find and edit these files from your cPanel account.
Note: Before making any changes to your .htaaccess file, make sure to download it and take a backup before proceeding.
Done already? Let’s discuss further.
Now, you need to find this line of code in the .htaaccess file:
RewriteRule .*.(jpg|jpeg|gif|png|bmp)$ - [F,NC]After looking for this line of code, you can replace this line with the given code:
RewriteCond %{HTTP_USER_AGENT} (googlebot|bingbot|yandexbot) [NC,OR]
RewriteCond %{HTTP_USER_AGENT} (facebookexternalhit|Twitterbot|Pinterest|LinkedInBot) [NC]
RewriteRule .*.(jpg|jpeg|gif|png|bmp)$ - [L]After replacing the line with the new code in green, save changes and wait till its complete.
Do not close the browser, just clear cache of your website and try to share link on Twitter or Facebook after doing this.
Voila, it works!
It took me several hours to find and fix this little issue that was a headace for a week or so. I decided to share with others so that if anyone else is facing the same problem, can take help from this quick guide.
This code in the .htaaccess file will enable crawling to the images for these mentioned social media crawlers and others, but will still block access to irrelevant bots. Previously, the red colored code disabled all crawlers, including social media crawlers from fetching images.
The new code in green whitelists social media crawlers and block other irrelevant ones in this case. This includes hotlink prevention feature which discourages crawlers from fetching images.
I hope it was helpful. Feel free to drop questions in the comments if any.
