Twitter card shows grey box for all posts of Wordpress blog


#1

*Description of issue: I have been struggling with this for a while, but only recently as I start to push for more content when I decided to take it seriously. For as long as I can remember, Twitter posts from my site have never shown cards.

URL affected (must be public): https://playstationcompass.com/dont-starve-together-choose-character/ is just one example. But any post from any time, recent, old… none of them work.

Troubleshooting steps attempted [note that we will not prioritise posts unless there is evidence of following the troubleshooting guides]:

First I ran the card validator, which returns this:

INFO: Page fetched successfully
INFO: 30 metatags were found
INFO: twitter:card = summary_large_image tag found
INFO: Card loaded successfully

I have been using Yoast SEO plugin which includes a section for including metadata for Twitter, so I assumed it was doing its thing. In the past, I did try to install other plugins just for the purpose of getting cards, and none of them worked.

Today I went through the READ ME FIRST troubleshooting steps, one by one, and made sure to follow everything I understood:

  • I viewed source; the tags are there.
  • The twitter:card metatag looks like this: <meta name=twitter:card content=summary_large_image>
  • curl -v -A Twitterbot <url> did have a 200 OK thing, and I saw a valid line in Content-Type, but to be honest this was a little over my head, so I can’t be sure that what I saw was actually correct.
  • Site should be accessible. I’ve fiddled with robots.txt a few times, and the file is quite small.
  • I just installed the Twitter plugin, but I can’t anything about cards in the settings. I see a Tweet button after the post and a spot for my username. In the new post/edit post window I see a section at the bottom for Twitter posts, setting the default text (if you want it different from the title) and something about the card, but nothing that worked. I used the Twitter plugin with Yoast’s Twitter card section enabled and disabled.
  • Robots.txt should be fine. The featured image (that’s what Twitter uses for cards, right?) is 678x381, 44kb, and JPG. The original file is larger than that, 1920x1080 and 3 or 4 MB, but Smush resizes the images before they post.
  • No validator errors, as mentioned above.
  • Fully qualified DNS name is https://playstationcompass.com, right?

#2

I have the exact same issue. I wonder, did you get it resolved? If so how? Everything shows good, but it shows a grey image with a white person icon. on my card


#3

Since posting the question I’ve taken a break from trying to fix things, but it’s not fixed yet. I just checked the validator again (I thought maybe giving it a few days for cache to reset or something might make a change), and nothing.

I noticed that a lot of the older threads here never seem to have gotten resolved. When I check the links posted months ago, they all still show grey cards as well. Those people’s descriptions tend to be a little different, but this problem seems really hard to fix. Maybe Wordpress sucks.


#4

I just figured it out on my site. I got it fixed in 2 different ways.
1- I switched to Yoast and it populated the twitter cards
2- I don’t really like Yoast because it bloats the website with a lot of additional stuff- I like All In One SEO because it does what I need for SEO, but without the extra programming. I also got it to work based on this video https://www.youtube.com/watch?v=JxsOdnn5Pzw

I fount about 4 threads of people who had the same issue as this over the last 3 months. Most of them seemed to think it was a robot.txt issue, but I couldn’t fix it with my robots.txt file. I did get it fixed with both of the above plugins. They are both free.

Good luck!


#5

Hey CountryPests,

I have Yoast on my site, and that’s where my Twitter Card metatags are coming from. I’ve tried other plugins with no success. I’m not sure if I’ve tried All in One SEO but I’ll give it a shot. I like Yoast’s analytics but if I can fix the Twitter cards I might be okay with not using it.

Out of curiosity, what image shows up as your twitter card? Do you need to manually select one, does it use the featured image, or an uploaded image to the article? Since I’ve never had a card show up, I’m not sure what to expect.


#6

Hi again.

I disabled Yoast and installed All In One SEO, followed the video you linked, and my cards are still showing exactly the same.

I’m glad it worked out for you. I’m still searching for my answer.


#7

Hi Jess,
There are few markup errors with that page:

  1. https://playstationcompass.com/wp-content/uploads/2017/07/dst-title.jpg gives 404
  2. meta name=twitter:image is missing double quotes
  3. meta name=twitter:image content is missing double quotes
  4. meta name=twitter:creator content=@PSCompass is missing double quotes

I think if you fix those it will play nicely


#8

Hi Connexinet,

I figured out that W3 Total Cache was removing the double quotes, presumably to reduce file sizes. I’ve disabled it for the time being while troubleshooting.

I tried the card validator with three different plugins. Yoast, All In One SEO, and the official Twitter plugin. Each adds the correct data for twitter:image, image content, and creator, all with the double quotes, but cards still aren’t showing up.

None of the posts on my site work, but I’ve switched to using this one (https://playstationcompass.com/changes-coming-to-playstation-compass-in-2019/) as the test because it shouldn’t have any 401 errors. The post I linked at the top has the 401, as you pointed out, but I’ve actually been using this other post as the benchmark for whether it works now not.

The page source is much cleaner now, so I’ll need to explore other optimization paths that don’t result in the ugly mess that it was before. So there’s been progress! Just… not in the area I need. Haha.


#9

https://playstationcompass.com/wp-content/uploads/2017/07/PSC-Logo-Large-1024x512.jpg still gives 404


#10

Hmm, so weird. On Chrome it loads the image, but on Edge it comes back 404. Okay, I will figure this out. Thanks for checking in.


#11

Hi again Connexinet.

It’s fixed. Even though the images were loading, it was that 404 error that was getting me. I’m going to give more detail here for anyone who comes from search in the future.

As is probably often the case, this problem was caused by a Wordpress plugin. Unfortunately, I don’t know which plugin it was, as it was long deleted but left its damage on the site. When Connexinet alerted me to the 404 issue on my images, I was confused–all my images load just fine in the articles. Even when I clicked their link saying it was a 404, it still loaded the image for me. I opened Edge, a browser I never use, and the image returned the same 404 Connexinet saw. After staying up too late and not having success, I woke up this morning with a clear head and went back to basics. I’d read that I needed to check .htaccess, and I had. The Wordpress code was fine. What I missed last night was a snippet of code added to the bottom of my .htaccess by another plugin from when I switched to SSL/HTTPS on my website. Before I found the “Really Simple SSL” plugin I used a search/replace plugin and a redirect plugin to try and keep people off the http section of the site–this is my first SSL install so I was going in totally blind and trying to learn. I’m sure the problem came up somewhere in here. Even though cards weren’t working before, I can say that’s probably from Connexinet’s other observations: the lack of quote marks due to W3 Total Cache shortening my code. I’d mentioned in my OP that I had given up on trying to fix cards for a while, so without realizing it, the cause of my problem had changed which led to me getting even more confused.

Unfortunately, I cut the code out of .htaccess but lost it when I copied a URL to the Twitter Card Validator, so I can’t show future searchers what it is. But, people in 2020 or 2021. If you’re having this problem, check your .htaccess file for anything that was added by a rogue plugin. Delete EVERYTHING except what’s between START WORDPRESS and END WORDPRESS and then try again.

Thank you so much Connexinet. CountryPests, thanks for getting involved. If not for my 404 error, I’m sure the plugins you recommended would have fixed my problem so much faster.


#12

It is my pleasure! I am glad it worked out in the end.


#13

Shoot, I have seen on some other places that it sometimes has to do with your robots.txt file. Maybe check and make sure that Twitter is allowed for images. Here are a few links I found on it.
https://developer.twitter.com/en/docs/tweets/optimize-with-cards/guides/getting-started

https://developer.twitter.com/en/docs/tweets/optimize-with-cards/guides/troubleshooting-cards

https://developer.twitter.com/en/docs/tweets/optimize-with-cards/guides/troubleshooting-cards#missing_text

That’s what I was playing with when I figured the other piece out. Maybe it will help.