Metadata-syntaxis: XML, RDFa, Microdata, Microformats en JSON

Een aantal oudere metadata-formaten hebben (of willen graag bij voorkeur)

XML als syntaxis bijvoorbeeld Dublin Core, OpenSearch of RDFa. HTML5 heeft geen optie om XML direct in de code te stoppen (met uitzondering van

<svg> en <mathm1>). Om XML-content conform standaarden en zonder omweg via een script te gebruiken, blijft alleen nog linken over. De waarden voor rel zijn niet vrij te kiezen, maar er zijn naast de veertien waarden uit de HTML5-specificatie nog tientallen andere te gebruiken (zie de link aan het eind). Als je intensief met XML werkt, is het aan te raden om websites naar XHTML om te zetten. Het Resource Description Framework (RDF) was en is een van de pilaren van het semantische web. De grammatica van RDF is onafhankelijk van taal en thema. Gegevens zijn opgebouwd uit de drie elementen: onderwerp, titel en object. Vaak wordt het ingezet in de vorm van XML, maar dat is niet verplicht. Met de door het W3C gespecificeerde RDFa is er een minimalistische versie van het Description Framework in HTML gestopt. RDF in Attributes breidt de HTML-woordenschat uit met een aantal attributen.

typeof bepaalt het relevante deel van de in vocab ingestelde regels. De betreffende eigenschap wordt aangegeven via property. De optionele resource bevat een referentie voor deze info via een URL. Namespaces voor extra vocabulaires zijn met prefix te integreren. <meta>- en <link>-elementen met

property kunnen in de head of body

staan.

Microdata lijkt qua concept op RDFa. Ook hier gaat het om een aantal algemene attributen, die content semantisch opmaken. itemscope definieert een element, itemtype bepaalt de vocabulaire en het type door te verwijzen naar een URL, itemprop bevat de passende eigenschappen: Het Microdata-formaat is bij de WHATWG ontstaan samen met vele andere ideeën waaruit later HTML5 is voortgekomen. Het is echter nooit uitgegroeid tot een officiële standaard.

Microformats was een van de eerste pogingen om metadata vanuit de head naar de body te verplaatsen. In plaats van gegevens centraal in de header te zetten, moeten ze direct in de content semantisch opgemaakt worden. Opmerkelijk is dat hier alleen HTML-standaardattributen voor gebruikt worden, in het bijzonder class. Het h-card microformat speelt leentjebuur bij de visitekaartjesstandaard vCard. In de huidige versie Microformats2 zitten tientallen van dit soort formaten, bijvoorbeeld voor producten, geografische details of datums. Voor recente browsers en zoekmachines zijn add-ons en tools voor Microformats beschikbaar. Bij webfront-ends is in plaats van XML JSON het formaat dat de voorkeur heeft. Maar JSON weet niet wat zijn data betekenen. JSON-LD vult dit gat op. Het is geldige JSON, maar breidt het verder uit met tientallen vastgelegde namen voor eigenschappen. Deze beginnen allemaal met @.

@context leg de terminologie vast, @type het betreffende begrip dat de bijbehorende eigenschappen beschrijft. Met @id zijn objecten via een URL te identificeren. Bij complexere scenario's kun je via @base en @vocab

URL’s afkorten en begrippen toewijzen. JSON moet direct in de HTML opgenomen worden, ingesloten door de tag: Externe bestanden werken niet. Het door de W3C gespecificeerde JSONLD is momenteel naast RDFa het meest relevante metadata-formaat.

Deze code geeft aan dat het gaat om HTML5video en een Flash-alternatief. Open Graph geeft in geval van twijfel de eerste vermelding de voorkeur. Je denkt misschien dat <meta>-tags niet geschikt zijn voor gegroepeerde content, maar Open Graph-parsers vatten deze specificaties aan de hand van de volgorde correct samen in twee groepen, zoals Facebooks testtool ook laat zien.

Voor elke soort content behalve de default "website" is er nog een tweede namespace beschikbaar. Deze is genoemd naar het bijbehorende type (bijvoorbeeld "video" , "article") en maakt het mogelijk om meer details aan te geven.

Twitter Cards

Voor integratie binnen zijn eigen platform heeft Twitter de Twitter Cards-specificatie ontworpen. Deze lijkt erg veel op Open Graph, en wel zo sterk dat og-beschrijvingen als fallback kunnen dienen. Je hoeft niet alles twee keer binnen je site op te nemen, maar het is een optie voor het geval je site in Twitters uitgebreide weergave er anders moet uitzien dan bij Facebook en andere social media.

Het Card-type "summary" refereert naar een normale website; het alternatief is "summary_large_image" met een groot previewplaatje. Ook audio/video-players ("player") en app-links ("app") zijn met Twitter Cards te beschrijven.

De overige belangrijke velden zijn (net als bij Open Graph) title, description en image. Anders dan bij Open Graph gebruikt Twitter normale <meta>-Tags zonder RDFa.

Nog meer mogelijk

Schema.org, Open Graph en Twitter Cards zijn nog lang niet alles als het om metadata gaat. Met Microsoft Pinned Sites kunnen websites in de Windows-interface worden geïntegreerd. Facebook App Links biedt een koppeling tussen websites en apps. En via OpenSearch integreer je makkelijk een goede zoekfunctie voor je website die via de adresbalk van een browser is te gebruiken (zie het kader hierboven).

Je zou het met al die verschillende manieren om website semantics toe te voegen bijna vergeten: gebruik nette HTML dat niet alleen uit <div> en <span> bestaat. De HTML5-specificatie bevat meer dan honderd verschillende elementen: bijschriften, citaten, adressen, definities, code en dergelijke. En daarnaast verduidelijken of corrigeren ARIA-attributen de betekenis van de afzonderlijke elementen. (avs)