ItemList-schema

ItemList is het Schema.org-type voor een lijst. Elk item in die lijst is een ListItem met een position (vanaf 1) en een verwijzing naar het item zelf, met een url en eventueel een name en image. De volgorde in de markup is de volgorde van de lijst.

Google gebruikt ItemList op twee manieren. Wereldwijd voor zogeheten host carousels, maar alleen in combinatie met specifieke types zoals Course, Movie, Recipe en Restaurant. En als bèta in de Europese Economische Ruimte voor structured data carousels, waarin ook Product, LocalBusiness en Event zijn toegestaan.

Die tweede toepassing is voor Nederlandse en Belgische webshops interessant. Het is een bèta, dus de regels en de weergave kunnen veranderen, en er is geen garantie dat de carrousel verschijnt.

ItemList bestaat ook los van carrousels. Je kunt er een top 10 in een koopgids mee beschrijven, of de stappen van een vergelijking. Dat levert dan geen apart rich result op, maar maakt de structuur van de pagina expliciet.

Voor de carrousel-bèta vraagt Google een overzichtspagina die naar losse detailpagina's linkt. Een categoriepagina met producten is daar het schoolvoorbeeld van. De lijst moet minstens drie items bevatten. Elk item heeft een image, name en url nodig, en die URL moet een eigen detailpagina zijn op hetzelfde domein. Ankerlinks naar dezelfde pagina tellen niet.

Bij Product-items zijn offers en aggregateRating aanbevolen. Je markeert alle producten die op de pagina staan, in dezelfde volgorde. Bij paginering krijgt elke pagina een eigen ItemList met de producten van die pagina. Bij infinite scroll markeer je de producten die bij het laden direct zichtbaar zijn.

Dit sluit aan op een regel die al langer geldt: zet geen losse Product-blokken met prijzen voor twintig producten op een categoriepagina in de hoop op sterren. Product-markup hoort op de productpagina. ItemList is de juiste manier om een lijst te beschrijven.

In Magento 2 komt de productlijst uit de category product collection. In een Hyvä-template kun je dezelfde collectie gebruiken om een ItemList uit te schrijven, met de producten in de volgorde van de huidige sortering. Let op layered navigation: een gefilterde pagina met een andere productset krijgt dan ook een andere lijst. Dat is correct, zolang die gefilterde URL's al goed zijn afgehandeld met canonical of noindex.

In Shopify heb je in de collectie-template toegang tot de producten van de huidige pagina via de paginate-tag. Een ItemList-blok in Liquid is een paar regels code. De meeste thema's doen dit niet standaard.

In Laravel genereer je de lijst uit dezelfde query als de productgrid. Houd de markup beperkt tot wat zichtbaar is.

Een ItemList met de hele categorie van 300 producten terwijl er 24 op de pagina staan. URL's in de lijst die een redirect geven of op noindex staan. Afbeeldingen die alleen via lazy loading met JavaScript worden ingeladen en dus niet in de markup terechtkomen. En logo's als productafbeelding.

Ook buiten de carrousel is een ItemList nuttig. Het beschrijft voor machines welke producten bij een categorie horen en in welke volgorde, wat aansluit op hoe AI-systemen een overzichtspagina lezen. Verwacht er alleen geen directe rankingwinst van.

Test na implementatie met de Rich Results Test, die de carrousel-markup herkent, en controleer met URL-inspectie of de gerenderde HTML de volledige lijst bevat. Bij grote catalogi is het verstandig om de lijst op dezelfde manier te cachen als de productgrid zelf, zodat ze nooit uit elkaar lopen.