]> XHTML with Twitter cards: No metatags found 🌐:aligrant.com

XHTML with Twitter cards: No metatags found

Alastair Grant | Saturday 18 November 2017

I'm not a big user of twitter personally - lots of people (largely companies) shouting adverts at each other, or people complaining to said companies about bad service.  But I do appreciate that many people do use it and they want web-site links to show up in one of those pretty little boxes instead of just a URL.

I started to have a look at the mass of meta-data needed to generate what Twitter refer to as a "card".  It seems that they are generally RDFa compliant and will take data from there, but you do have to add a few things - see Twitter's Card documentation.  To check you can copy and paste with the finest, they also have a testing tool - which seemed to highlight to me, that I can't copy and paste.  I was recieving and "Unable to render Card preview":

INFO:  Page fetched successfully
WARN:  No metatags found

After much mucking about and using other testing tools I slowly narrowed it down to the Twitterbot - the piece of code that fetches your website to generate the card.  It seems that it does not support XHTML (5 or otherwise).  XHTML is a stricter than HTML and will use an XML parser instead of a DOM parser, it enforces computer-readable code.  I'm not sure if it is stumbling over the content-type being "application/xhtml+xml" instead of "text/html", or extra definitions in the DOCTYPE to handle entities.

As an XHTML document will be happily parsed by the looser HTML DOM parser of a browser, you can downgrade your response for Twitter.  Just search out "Twitterbot" in the user agent string and serve-up sub-standard code.

Breaking from the voyeuristic norms of the Internet, any comments can be made in private by contacting me.