Lee Byron

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:

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.

  1. RDF actually does get a fair amount of practical use via RDFa (RDF for attributes) because it can markup existing HTML files as opposed to requiring separate XML files. In fact, this site uses RDFa to embed licensing data in the footer! Check it out in the structured data linter.

  2. Facebook made an interesting deck on the design decisions of Open Graph that details these problems. It’s an interesting read.

  3. Open Graph uses <meta> tags, but annoyingly uses a property= attribute which was borrowed from RDF but is non standard for a <meta> tag. It ideally should have used name= (which Twitter cards does). Someone should have caught that in code review.