Twitter-Card Meta Tag Issue

Question

URL in question: https://www.halleonard.com/viewpressreleasedetail.action?releaseid=10261

When you view the source in a browser and in Developer Tools, you can see all of the meta tags for Open Graph and Twitter. I have checked the Facebook Debugger and, aside from a few canonical issues, I'm fairly happy with the results.

I also plugged the above URL into a third-party Open Graph Debugger: http://debug.iframely.com/ and all of the tags for Open Graph, Twitter and even other all come back positive.

Why is is that Twitter's Card Validator is coming back with a

INFO:  Page fetched successfully
INFO:  9 metatags were found
ERROR: No card found (Card error)

Any insight on how I get Twitter to display properly?

Telegenic

Answer 1

I think you may either be blocking or redirecting the Twitterbot agent.

I faked a Twitterbot agent with curl:

curl -A 'Twitterbot' https://www.halleonard.com/viewpressreleasedetail.action?releaseid=10261 -o ~/Desktop/what-twitterbot-sees.html

And this is what your server returns:

As you can see there are 10 meta tags (if you exclude the <meta charset> one) which is what the card validator indicates and there are no <meta name="twitter:*"> tags at all.

You can reproduce with your browser if you can set a custom user agent string. This is possible with Google Chrome:

I'm pretty sure there's some sort of redirection rule going on either at your web server level or in your application code.

---

According to developer.twitter.com, the user agent string I have used is correct:

Twitter uses the User-Agent of Twitterbot (with version, such as Twitterbot/1.0)

Kappenne

We have already modified our robots.txt and Twitterbot has access to every page on the site. We added this to the file: "User-agent: Twitterbot Disallow: " – Telegenic

Hi checked your robots.txt file before posting; it looks fine to me too. What I am suggesting is that perhaps the issue lives on another layer of your stack. Nginx maybe? The point being, when I visit your site with my browser I do see your twitter card, when I visit using curl and a fake agent, I get a different response. I'd definitely check that. – Kappenne

We made some changes, and I can see the 9 (10) that appear before the Google Tag Manager script. Are you saying that ALL of these OG/Twitter tags need to be before the Google Tag Manager is initialized? – Telegenic

I doubt that GTM is the culprit here (although I can't rule it out 100% to be honest). If I were you I'd check your web server configuration or your application code. Perhaps you're actively redirecting traffic based on some conditions. Your issue is quite difficult to solve as is without additional context. At this stage I can only give you some hints. – Kappenne

@Telegenic I can reproduce the same error by setting a custom user agent string in Chrome. See updated answer – Kappenne

I can verify what you are seeing. I just don't know how to resolve it myself. – Telegenic

@Telegenic like customcommander suggested. I think the problem lies in your web server. So validate your configuration in the Apache server that hosts your web page. And also check if there any useragent whitelisting configured. May be all you have to do is just remove it from the list. – Icterus

We found the true culprit, but your research led the way, so you get the bounty. We had a Bot filter in our web.xml file that should have been blocking bots from crawling al pages behind the account login portions of our site, but instead, it was blocking bots from ALL pages. – Telegenic

In case it's not clear to others, this works perfectly with a locally run app. This was way helpful, thanks! curl -A 'Twitterbot' 127.0.0.1:3000 -o ~/Desktop/what-twitterbot-sees.html – Prichard

Answer 2

The error is coming because of the twitter:card type you have selected. You forgot to add the twitter:image content. These both should be added.

<meta name="twitter:card" content="summary_large_image">
<meta name="twitter:image" content="ADD IMAGE URL">

Reference Link

Selfrealization

On the documentation page that you have linked, it says that twitter:image is not required. Also Twitter looks for Open Graph tags which exists on that page. – Kappenne

I said should not must, so try to add the twitter:image tag and check if that works for you. The same page also says, Below are the suggested minimum properties for the Summary Card with Large Image including title, description, and image. – Selfrealization

Well from OP the issue doesn’t seem to be about the tags themselves. As they mentioned this works fine in all validation tools except the one from Twitter. So there’s must be an issue in how Twitter sees the site. Also note that the error isn’t about the image not being found. It is the card itself that isn’t. Surely Twitter would be more specific about the error if only the image was missing. – Kappenne

Answer 3

I checked your source code with w3c validator.

https://validator.w3.org/

it seems that google tag manager is not installed properly: you have to move the google tag manager (noscript) (line 10:13) on top of the body section and absolutely remove it from head section.

You can find here some information https://support.google.com/tagmanager/answer/6103696?hl=en

and also (more specific) in your tag manager page (like this attached)

Brotherinlaw

I moved the noscript google tag manager to just inside the <body> tag and Twitter's Card Validator is still coming up with "ERROR: No card found (Card error)" – Telegenic