Search code examples
htmldebuggingfacebook-opengraphtwitter-card

Twitter-Card Meta Tag Issue

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)

enter image description here

Any insight on how I get Twitter to display properly?

Solution

  • 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:

    enter image description here

    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:

    enter image description here

    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)