Card Validator Not Recognizing My Site's Cards

[startupsco]

We’ve just implemented Twitter Cards on our site including Summary Card with Large Image, Summary Cards, and Player Cards. However, our site is not whitelisted. Upon trying to get whitelisted, the Card Validator tool is suggesting that our cards are not valid which isn’t the case if you look at the code. I’ve read the community guideline around using Javascript and our site does use Prerendering and React, so this may be the issue, but I’m wondering if there is a way to get whitelisted anyway?

https://www.startups.co (summary card large image)
https://www.startups.co/articles/value-time-business-owner (summary card large image)
https://www.startups.co/answers/experts/7/danmartell (summary card)
https://www.startups.co/education/lessons/data-driven-decisions (player card)

[andypiper]

Have you been through the troubleshooting post? I can see that your tags are invalid via a quick check using curl.

[startupsco]

Hi Andy,

Thanks for the response. In looking through our output versus the example provided by Twitter, here’s what we have:

Sumary Large Image Twitter Example:

Startups.co Output Example (https://www.startups.co/articles/value-time-business-owner):

The big differences are:
(1) We do not include the recommended in the Troubleshooting guide.
(2) We are missing the / at the end of the meta tags (although Twitter’s example for Large Image Summary Cards doesn’t include it either).
(3) Our tags include data-react-helmet=“true” due to our site’s use of React.js.

In reading the other troubleshooting doc, I’m thinking the following could be an issue:

• List item

if you execute curl -v -A Twitterbot at the command prompt, does your page still show the twitter:card tags in the section of the page? Does your server return a 200 response code and a valid Content-Type header?

• List item

is your page adding the tags after it is loaded, for instance using Javascript (e.g. Angular, Meteor, Google Tags Manager)? The crawler and validator cannot execute Javascript and the tags must be static.

Apologies as I’m not familiar with cURL so I couldn’t do what you did, but I know our site is using prerendering, so I’m wondering if the issue is that the tags (which seem fairly close to Twitter’s examples) are simply getting rendered late due to the JS on our site. If that’s the case, is there another solution for whitelisting? Many site’s use JS rendering and tech like React, so I’d hate to think that all sites using this are unable to be whitelisted.

Speaking with our dev team this morning to get that tag implemented.

Any advice would be helpful.

Thanks,
Jake

[startupsco]

Sumary Large Image Twitter Example:

<meta name="twitter:card" content="summary_large_image">
<meta name="twitter:site" content="@nytimes">
<meta name="twitter:creator" content="@SarahMaslinNir">
<meta name="twitter:title" content="Parade of Fans for Houston’s Funeral">
<meta name="twitter:description" content="NEWARK - The guest list and parade of limousines with celebrities emerging from them seemed more suited to a red carpet event in Hollywood or New York than than a gritty stretch of Sussex Avenue near the former site of the James M. Baxter Terrace public housing project here.">
<meta name="twitter:image" content="http://graphics8.nytimes.com/images/2012/02/19/us/19whitney-span/19whitney-span-articleLarge.jpg">

Startups.co Output Example:

<meta name="twitter:card" content="summary_large_image" data-react-helmet="true">
<meta name="twitter:site" content="@startupsco" data-react-helmet="true">
<meta name="twitter:title" content="How to Value Your Time as a Business Owner | Startups.co" data-react-helmet="true">
<meta name="twitter:description" content="Valuing your time as a business owner isn’t complicated. In fact, it’s easier than ever thanks to tools and systems that can help scale your business." data-react-helmet="true">
<meta name="twitter:image" content="https://d3o1wlpkmt4nt9.cloudfront.net/wp-content/uploads/2017/07/06131845/valuing-your-time.jpg" data-react-helmet="true">

Sorry, it didn’t include my code above.

[startupsco]

Also, apologies as we’re working to include this Meta tag. Also stripped out of the text above.

<meta content="text/html; charset=UTF-8" name="Content-Type" />

[startupsco]

Also sorry for multiple responses, but got this from our engineering team, “Testing with curl may not work, because the JS won’t run, unless the prerender middleware recognizes it as a bot.”

[andypiper]

That’s exactly correct - testing with curl will not work since you’re using Javascript for rendering the tags.

• is your page adding the tags after it is loaded, for instance using Javascript (e.g. Angular, Meteor, Google Tags Manager)? The crawler and validator cannot execute Javascript and the tags must be static.

[startupsco]

So basically, we will not be able to get white-listed until we can render the twitter:card tags on the client side using something like this or this - correct?

OR

Is this issue just that the validator won’t be able to pick them up and technically, but that the tags will still be able to generate the cards when links shared on Twitter (except for “player” cards of course)? Believe I saw something on Twitter’s help guides that said something to that effect.

Thanks for all of your help.

[andypiper]

The cards cannot be generated unless the tags are rendered statically on the server side. Until the validator is able to process your URL, no card will be seen in Tweets with the URL shared.

[startupsco]

Thank you

[system]

This topic was automatically closed 14 days after the last reply. New replies are no longer allowed.