tilmeta tags & the semantic web

For better or worse these days a lot of the web is consumed via an aggregator platform. Search engines like Google, or Duck Duck Go, and social media like Facebook, Twitter, Reddit, and Mastodon. When links are displayed on these platforms, they use available metadata to give as rich a preview as possible.

This is the reality of the branch of the multiverse we find ourselves in tracing back to a quote from Sir Tim Berners Lee from 1999:

I have a dream for the Web [in which computers] become capable of analyzing all the data on the Web – the content, links, and transactions between people and computers. A “Semantic Web”, which makes this possible, has yet to emerge, but when it does, the day-to-day mechanisms of trade, bureaucracy and our daily lives will be handled by machines talking to machines.

Some variation of this is is right…

However, for us Webmasters, it’s tough to keep track of the peculiarities of how each platform would like to consume semantic information. Having just added some meta data to this very page, I’ll drop some links and tl;dr of what I learned along the way:

• RDF (Resource Description Language) and OWL (Web Ontology Language) were early standards that live on. They don’t get a lot of direct practical use¹. There is also microformats which still has some use, but is no longer preferred.

• Open Graph is a standard proposed by Facebook which addressed the mess that was the web at the time². It has a surprisingly broad schema and some quirks³. Since then, JSON-LD has become the preferred tool. JSON is way easier for representing data, and there’s a huge set of available schema.

• Facebook (and other Meta apps, like Messenger) use Open Graph with some minor Facebook specific additions.

  • Use the share debugger to see what information was parsed and any warnings. It shows a share preview based on an older version of their desktop site and can’t be relied on.

• Twitter uses Open Graph if it finds them, but adds “Card Tags”. This is most helpful when you want something to appear slightly differently on Twitter vs Facebook.

  • Use their card validator to see what a card will look like. This shows for desktop, I’m not aware of a mobile preview.

• Google will also use Open Graph if it finds it, but prefers JSON-LD.

  • There are multiple validators for both generic JSON-LD and Google specific results. Despite being the most mature of these tools, I’ve found it least helpful in giving error messages. Caveat caelator.

One last resource that I found very helpful was the structured data linter. This tool understands just about all of the above. It’s not all that helpful for understanding how any one service will interpret your page, but is very useful to ensure the meta data you expect is being found, and that there are no inconsistencies or other problems.