Fix Broken Twitter Cards and Facebook Images from your WordPress Posts

It took me 10 long days to figure this out! You can do it in just 1 day.

Overnight, I found myself with broken Twitter Cards and Facebook images that had nothing to do with the WordPress post I had just published. None of my featured images were loading to those social platforms. And I had no idea what had happened; but, was determined to figure it out on my own.

Ten days later, I was no closer to the truth and found myself with a terribly case of writer’s block. My level of frustration was through the roof and I felt completely helpless.

I Googled the issue day and night for ten very long days to no avail. I was beginning to piece together certain tech lingo; but, still had no earthly idea what had happened to my site or how to fix it. Why weren’t my featured images loading?!

There was so much information out there. Top searches for fixing broken Twitter cards and Facebook images yielded quite a bit of common themes. Here are the top four fixes and my recommendation.

Step 1: Broken Twitter Cards

Start by checking the Twitter Card Validator to ensure your website is white listed. Mine was. That was not the problem.

And yet the log displayed below the post taunted me with “card loaded successfully” language when clearly you can see that the image isn’t there. ARGGGGG!!!

I logged onto the Twitter Developers Site and I’ll be honest here: it offered me little help. All the logic and language was circular. I literally screamed at the screen a couple of times…. YES, I HAVE A FEATURED IMAGE SELECTED!

This went on and on until I finally received an email from a Twitter Developer telling me, that I had an “HTTP 403 Forbidden error for the image that is directly associated with that post”.

I appreciated the developer’s help; however, the steps he provided were a dead end. All of my images were still coming up blank!

Step 2: Fix Facebook Images

Similarly, when posting to Facebook, the featured image wasn’t loading. I was having to add the image separately. But, there was nothing I could do to fix the “page not found” message Facebook was attaching to my post.

So, I headed over to the Facebook developers help site and checked out their tools for debugging and scraping URLs. This was to supposed to make Facebook show my correct post thumbnail.

And, thankfully it was pretty simple and straight-forward to use. You enter the url address, select “debug” and hope for the best.

Unfortunately, the results were disappointing. Every time I hit the scrape button, either a random Instagram picture would populate or nothing at all. The featured image corresponding to the post was MIA.

Step 3: Check your Social Settings

Once I was done with the debugging and whatnot it was time to make sure that all my social settings were set up correctly. I mean, why wouldn’t they be – I hadn’t changed anything between postings.

But, at this point, I was willing to double check everything and cover all bases.

First, I went to my WordPress Dashboard and paged down to the Yoast SEO WordPress Plug-in. And under the social settings, I made sure I had enabled “Add Twitter card meta data”. I also doubled checked my Facebook settings since I was having an issue there too for some reason.

Then I right-clicked on the featured image on my post and selected “view page source” to double check the meta tags, “little content descriptors that help tell search engines what a web page is about” (thanks wordstream!).

And voilà – nothing wrong there either! ARGGGGG!!!! Still NO images!

Step 4: Robots.txt Mahem

I was determined to find the answer on the Twitter Developers help site and when I stumbled on “Cards Troubleshooting Guide” I thought I had hit the jackpot! There was so much information!

It was a little daunting; however, I felt like I was making progress. I found a great step by step guide for “fixing robots.tx” on WP Beginner. Maybe it had something to do with the way the URL is crawled and cached (stored data)?

A Web crawler, sometimes called a spider or spiderbot and often shortened to crawler, is an Internet bot that systematically browses the World Wide Web, typically for the purpose of Web indexing. . 

Wikipedia

Apparently, there is thing called a “robots.txt” file that blocks crawlers from indexing information from your website. Don’t ask me how this happens; it’s a very common issue.

So, I headed back to my Yoast Plug-in and selected “tools” then “file editor”.

I added the recommended “language” above and drum roll please…. NOTHING CHANGED.

Recommendation: Hire Professional Help

I had debugged, card validated, Facebook scraped, unlinked relinked, contacted WordPress, Bluehost and Googled the subject of broken Twitter cards and Facebook images until I was blue in the face. I had even come across this cool tech guy in YouTube who tried to help me. (Thanks Tech Urdu!)

It was insanity! I was becoming totally obsessed with solving this issue! Honestly, was the longest ten days of my life.

Ultimately it was my blogging community that came to the rescue. And, I wasn’t a bit surprised. I had called it many months ago when I wrote about “Blogging Secret Sauce” and how finding your virtual tribe was incredibly important to blogging success.

I got some great advice from  ❤Elissa 🎨Renee ❤ , Ell // BossGirlBloggers, heidi hourani and Christine | The Uncorked Librarian. In the end, it was Heidi that introduced me to iMark Interactive Customer Support.

The Problem & Solution

The host was blocking images and a 403 error was popping up. At first, it seemed as though it had something to do with the htaccess file or maybe modsecurity on Bluehost was blocking it.

Nonetheless, what it all boiled down to was that I was running http version and the SSL certificate wasn’t being used! No idea how this happened; but, holy smokes my connection wasn’t encrypted!

Thanks to the iMark team, in less than 24 hours and $70 later, I was up and running again! All featured images sharing properly on Twitter and Facebook! My writer’s block turned into inspiration.

---

My editor still wasn’t working; but, that’s on Bluehost. I’ve since them moved my hosting over to Siteground and will tell you all about that in a follow-up post. Was also cautioned about editing files in the editor as that should be done on the hosting control panel.

---

Has this happened to you? How did you get your images squared away? Do tell! I love hearing from you!

xoxo