Bij het bouwen van websites zijn metadata ontzettend belangrijk. Met behulp van Rich Snippets kun je je site bijvoorbeeld laten opvallen in de zoekresultaten of hem beter op Facebook of Twitter laten overkomen. Maar dan moet je je wel eerst door een jungle aan formaten zien te worstelen.
Metadata is geen rocket science, maar wel ontzettend relevant voor de weergave van een pagina in een zoekmachine, browser en in nog talrijke andere toepassingen. Met een mooie weergave via Googles Rich Snippets of met de nieuwe Rich Cards krijg je meer toeloop naar je website. Maar er valt nog veel meer te beinvloeden met metadata.
Als je er voor het eerst voor gaat zitten, kan het al vrij snel verwarrend worden. Meta-informatie op websites is op zeer veel verschillende manieren te formuleren. Een aantal vult elkaar aan, andere zijn eerder concurrenten: Schema.org, Open Graph, RDFa, JSON-LD, Microdata, Microformats… Zonder een idee waar je het moet zoeken heeft het meer weg van voodoo dan van SEO. Metadata voor websites ontstonden tegelijk met de HTML-standaard. Het <meta>-element is de oudste manier om metadata in een document te stoppen. In de meest gebruikelijke vorm staat het in de HTML-head en bevat een name– en een content-attribuut:
<meta name=”description” content=”Tekst met omschrijving ...”>
“description“, “keywords“, “author” en “generator” zijn gestandaardiseerde namewaardes. Alleen description is van belang voor zoekmachines. Het is niet relevant voor de ranking, maar voor de presentatie van de hits. keywords wordt door de grote zoekmachines genegeerd. Veel websitebouwers schenken daardoor weinig aandacht aan HTML-metadata. Ze vertrouwen erop dat Google de relevante data binnen hun sites opduikelt. Hierdoor blijven er veel mogelijkheden liggen.
<meta>-tags hebben nog veel meer toepassingen. name kan namelijk elke willekeurige waarde aannemen. Nuttig en vrij gangbaar is bijvoorbeeld viewport (zoomwaarde voor mobiele apparaten), robots (regels voor het indexeren door zoekmachines) en diverse ontwikkelaarspecifieke waarden. Op de plek van name kun je ook http-equiv (doorgestuurde http-header), charset (codering), property (RDFa) of itemprop (Microdata) zetten.
De online shop Zalando heeft een Sitelinks Search Box in zijn Google zoektreffers gestopt. De Knowledge Graph rechts wordt door Google zelf geregeld.
Dublin Core
De eerste poging om een site te beschrijven met behulp van description en keywords is meer dan twintig jaar geleden gedaan. De Dublin Core Metadata Initiative (DCMI) is genoemd naar een buitenwijk van Columbus in Ohio, niet naar de Ierse hoofdstad.
De eerste en bekendste incarnatie van deze als RFC 5013 en ISO 15836 beschreven standaard heet Simple DCV en bevat 15 elementen. Dit zijn een ID (identifier, bijvoorbeeld ISBN of URL) technische data (format, type, language), inhoudelijke data (title, subject, coverage, description), personen en rechten (creator, publisher, contributor, rights), koppelingsinformatie (source, relation) en datum (date). De huidige status van Dublin Core heet Terms en voegt aan deze woordenschat nog eens veertig begrippen toe.
In HTML ziet dat er zo uit:
<meta name=”dc.subject” content=”metadata”>
Soms zie je ook een schrijfwijze met hoofdletters (“DC.creator“). De invloed van Dublin Core zie je op veel plekken terug, bijvoorbeeld in RDF of Schema.org, maar in de dagelijkse praktijk op het web heeft het aan gewicht verloren. Voor de zoekmachineoptimalisatie zijn er betere oplossingen. In diverse nichegebieden leeft DC nog wel, zoals in bibliotheken of bedrijfsnetwerken.
Rich Snippets vallen in zoekresultaten extra op, bijvoorbeeld dankzij een foto en een beoordeling.
Schema.org
Schema.org heeft Dublin Core opgevolgd en is vandaag de dag de meest relevante metadata-vocabulaire. Het stamt af van een initiatief van Google, Yahoo, Bing en Yandex. Daardoor ondersteunt het vier van de meest relevante zoekmachines (afgezien van Oost-Azië).
Schema.org kun je in Microdata, RDFa of JSON-LD neerpennen. Een aantal voorbeelden zijn te zien in het kader verderop. Je kunt het in de body of head neerzetten. Google heeft een voorkeur voor JSON-LD, maar de andere notitiewijzes werken ook. Dit is via een testtool van Google te controleren.
De vocabulaire is hiërarchisch opgebouwd. De stam wordt gevormd door Thing, die alle children en grandchildren eigenschappen zoals url, identifier, name en image laat erven. Een laag hoger vertakt de boom in acht branches: Action (bijvoorbeeld Like, Vote of Reply), CreativeWork (tekst, muziek, films et cetera), Event, Intangible (een mengelmoes, onder andere voor vluchten, rekeningen, aanbiedingen) Organization, Person, Place en Product. Zo is een BlogPosting een SocialMediaPosting, in een Article, dat weer afstamt van CreativeWork. Soms komen de erflijnen weer samen: een LocalBusiness (restaurant of bloemist) is zowel een Place als Organization.
Rich Cards vallen al op, maar om een plekje in de carrousel boven Googles zoekresultaten te krijgen moet je een AMP-site hebben (Accelerated Mobile
Pages).
Door deze hiërarchie met tot wel zes lagen heb je voor een aantal items bijna honderd verschillende toegestane attributen. De basisvocabulaire bevat tegen de 600 items, en daar komen er via officiële uitbreidingen nog bijna 200 bij. Wil je bijvoorbeeld je scriptie voorzien van de juiste metadata, dan kun je daar Thesis voor gebruiken. Deze staat op http://bib. schema.org gedefinieerd.
Alle kernbegrippen en de officiële uitbreidingen hebben een canonical URL, die achter de root van schema.org wordt geplakt. Een voorbeeld: http://schema.org/Restaurant. Ondanks deze grote verzameling zitten er nog wel wat gaten in. Een yoga-instructrice of modeltreinenshop zal moeite hebben om hun aanbod te beschrijven.
Google-Schema
De Google zoekfunctie verleidt je om Schema.org te gebruiken. Als je dat toepast, heeft je site meer kans om in de zoekresultaten als Rich Snippet te verschijnen. Normaal gezien bevatten zoekresultaten alleen een titel, URL en korte beschrijvende tekst. Een Rich Snippet verrijkt dit met extra features, bijvoorbeeld breadcrumb-navigatie, een foto of prijzen en datums.
De details hangen voor een deel af van de betreffende categorie content. Bij recepten, events, producten, reviews of cursussen krijg je veel extra. Maar ook bloggers, retailers en bedrijven kunnen rekenen op een speciale behandeling bij artikelen, boekpresentaties, muziek, video’s, podcasts, adresgegevens en nog veel meer.
De hitcounter kan zelfs al een zoekbox bevatten. Voor zo’n Sitelinks Search Box moet je wel een zoekmachine voor je eigen website-content hebben. En als je helemaal grandioos scoort in de zoektreffers kun je in de Knowledge Graph met de juiste opmaak je Knowledge Graph-kaart verrijken met belangrijke gegevens. Dit lijkt op een beknopte Wikipedia-entry en verschijnt op je desktop naast en op je smartphone boven de lijst met zoektreffers.
Google heeft sinds maart er weer een schepje bovenop gedaan: de content van Rich Snippets wordt op mobiele apparaten zeer opvallend weergegeven. Een Rich Card kan de scherminhoud van een smartphone vullen en lijkt meer op een productpresentatie of Pinterestpost dan een saaie kale Google-treffer. Zet je ook nog eens AMP in, dan kan je site in de Top Stories-carrousel belanden.
Overigens is Schema.org niet alleen relevant voor SEO. Via de Knowledge Graph Search API antwoordt Google op zoekqueries van derden met gestructureerde data in het JSON-LD-formaat volgens Schema. org. Deze gegevens zijn weer met wat programmeerwerk verder te bewerken.
Alle kernbegrippen en de officiële uitbreidingen van Schema.org hebben een canonical URL. Ondanks de flinke collectie is er niet voor elk
scenario een passend begrip te vinden.
Open Graph
Wat Schema.org voor zoekmachines regelt, regelt Open Graph voor social media. Dit geldt vooral voor Facebook, maar ook Pinterest, LinkedIn of Google+. De naam Open Graph staat voor het uitbreiden van de Social Graph, het netwerk van relaties binnen sociale netwerken tot willekeurige objecten op het web. Een simpele websitebeschrijving ziet er zo uit:
<meta property=”og:title” content=”Titel”>
<meta property=”og:type” content=”article”>
<meta property=”og:url” content=”…”>
<meta property=”og:image” content=”…”>
Open Graph-tags moeten in de head staan en gebruiken de RDFa-syntaxis. De vier tags hierboven voor de titel, soort content, canonical URL en image URL zijn vereist. Daarnaast moet je in RDFa-stijl de og.namespace definiëren.
<html prefix=”og: http://ogp.me/ns#”>
Voor og:type stelt Open Graph een hele rits met default waarden tot je beschikking: “website“, “article“, “book“, “profile“, “video” en “audio“. Die laatste twee zijn nog verder te specificeren, bijvoorbeeld in “music.song” of “video.movie“.
De optionele eigenschappen zijn onder andere og:description (omschrijvende tekst), og:locale (bijvoorbeeld “nl_NL”), og:video en og:audio voor aanvullende multimedia content. Die laatste twee bieden opties om het nog specifieker aan te geven, zie het voorbeeld van YouTube:
<meta property=”og:type” content=”video”> <meta property=”og:video:url” content=”...”>
<meta property=”og:video:type” content=”text/html”> <meta property=”og:video:url” content=”…”> <meta property=”og:video:type” content= “application/x-shockwave-flash”>
Deze code geeft aan dat het gaat om HTML5- video 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.
<meta name=”twitter:card” content=”summary”> <meta name=”twitter:site” content=”@wortwart”>
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 verderop).
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.
(Herbert Braun, Alieke van Sommeren)
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.
<link rel=”search” type=”...” href=”...”>
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.
<div vocab=”http://schema.org/” resource=”#Zeta” typeof=”Person”>
<p property=”name”>Zeta Zetee</p> <p property=”jobTitle”> webontwikkelaar</p>
<address property=”address” typeof=”PostalAddress”> <p property=”streetAddress”> Meijhorst 6010</p> <p property=”addressLocality”> Nijmegen</p> </address> </div>
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
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:
<section itemscope itemtype=”http://schema.org/Person”>
<p itemprop=”name”>Zeta Zetee</p> <p itemprop=”jobTitle”> webontwikkelaar</p>
<div itemprop=”address” itemscope itemtype= “http://schema.org/PostalAddress”>
<p itemprop=”streetAddress”> Meijhorst 6010</p> <p itemprop=”addressLocality”>
Nijmegen</p> </div> </section>
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
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.
<div class=”h-card”> <p class=”p-name”>Zeta Zetee</p> <p class=”p-job-title”> webontwikkelaar</p> <address class=”p-adr”> <p class=”p-street-address”> Meijhorst 6010</p> <p class=”p-locality”> Nijmegen</p> </address> </div>
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”: “http://schema.org/”, “@type”: “Person”, “name”: “Zeta Zetee”, “jobTitle”: “webontwikkelaar”, “address”: [{ “@type”: “PostalAddress”, “streetAddress”: “Meijhorst 6010”, “addressLocality”: “Nijmegen” }] }@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:
<script type=”application/ld+json”>
Externe bestanden werken niet. Het door de W3C gespecificeerde JSONLD is momenteel naast RDFa het meest relevante metadata-formaat.
Overzicht: OpenSearch, App Links en Pinned Sites
OpenSearch is een techniek waarmee websites hun zoekfunctie kunnen beschrijven. Browsers kunnen dit dan als zoekmachine toevoegen en direct via de adresbalk benaderen. De kern is een in XML geformuleerde beschrijving met informatie als
<Url type=”text/html” method=”get” template=”https://twitter.com/ . search?q={searchTerms}”/>Deze door A9 (Amazon) ontwikkelde standaard wordt bij veel grote sites als Facebook en Twitter gebruikt.
App Links
App Links is een door Facebook ontworpen standaard. Hiermee kunnen websites naar apps verwijzen. Een standaard toepassing: een Facebook-gebruiker deelt content, bijvoorbeeld een YouTube-filmpje. Een andere gebruiker tikt deze video aan in de Facebook-app en dan wordt de YouTube-app geopend.
Als de YouTube-app niet is geïnstalleerd, neemt de in de Facebook-app geïntegreerde WebView de weergave voor zijn rekening. Bij de syntaxis gelden voor App Links dezelfde regels als voor Open Graph – <meta> met RDFa:
<meta property=”al:ios:app_name” content=”Vimeo”> <meta property=”al:ios:app_store_id” content=”425194759”> <meta property=”al:ios:url” content=”vimeo://app.vimeo.com/...”> <meta property=”al:android:app_name” content=”Vimeo”> <meta property=”al:android:package” content=”com.vimeo.android.videoapp”> <meta property=”al:android:url” content=”vimeo://app.vimeo.com/...”> <meta property=”al:web: should_fallback” content=”true”>
Deze metadata van Vimeo verwijzen naar de iOS- en Android-app. app_name en url zijn identiek, maar voor de identificatie pakt iOS er de app_store_ id bij, en Android de Package-naam. al:web:should_fallback staat nadrukkelijk toe dat de video bij gebrek aan een app via de browser of WebView wordt afgespeeld.
Een false op deze plek stuurt de gebruiker door naar de betreffende app-store. De app moet App Link wel ondersteunen. Hier zijn verschillende bibliotheken voor beschikbaar.
Pinned Sites
Met de introductie van Internet Explorer 9 voerde Microsoft Pinned Sites in. Deze worden in de taakbalk of als een tegel binnen het startmenu getoond. De functie is meer dan slechts een bookmark. Er kunnen icoontjes van verschilllende grootte worden ingesteld, maar ook de te openen URL is te kiezen.
Als syntaxis gebruikt Microsoft <meta>-eigenschappen, die allemaal met msapplication- beginnen. In Edge is deze feature gericht op de tegels in Windows 10. Via msapplication- TileImage krijgen ze een icoon mee, en met msapplication-notification kunnen ze controleren op updates.
In Internet Explorer 11 zit een vergelijkbare functie met de naam Live Tiles. Behalve met <meta>-tags kan er ook met een via XML gedefinieerd ‘Browser configuration schema’ worden gewerkt. Een hieraan verwante techniek is Add to Homescreen: een functie van Progressive Web Apps. Deze feature zit op dit moment alleen nog maar in de Chromium-browsers. Hiervoor is een JSON-bestand nodig, dat via <link rel=”manifest”> wordt gekoppeld.
