Een productpagina moet veel informatie dragen zonder een muur van tekst te worden. Tabbladen beantwoorden die behoefte, op voorwaarde dat u er niet begraaft wat over de aankoop beslist en dat ze leesbaar blijven voor de zoekmachines.
Wat PrestaShop native biedt
Het standaardthema toont vooraf gedefinieerde tabbladen: beschrijving, productdetails, en bijlagen in voorkomend geval. De geïnstalleerde modules kunnen er toevoegen, elk op dezelfde plek geënt.
Twee beperkingen. De inhoud van elk tabblad komt overeen met een vast veld van het product, zonder mogelijkheid er andere te creëren. En de volgorde wordt bepaald door de positie van de modules, niet door een redactionele intentie.
Een courant resultaat: een tabblad “Reviews” vóór een tabblad “Kenmerken”, terwijl de klant eerst de specificaties wil controleren.
Tabbladen of accordeon
De vraag wordt beslecht door het schermformaat.
Op desktop werken horizontale tabbladen goed: de titels zijn allemaal zichtbaar, de bezoeker ziet wat er bestaat en kiest.
Op mobiel worden horizontale tabbladen problematisch. Vier of vijf titels passen niet op de breedte, en het horizontale scrollen verbergt de laatste. De verticale accordeon, waarbij elke sectie ter plekke uitvouwt, is duidelijk bruikbaarder.
De oplossing die werkt: van het ene formaat naar het andere schakelen volgens de breedte, met behoud van dezelfde content en dezelfde HTML-structuur.
De indexeerbaarheid, kritiek punt
Het aspect dat de meeste implementaties slecht behandelen.
Ingevouwen content in een tabblad blijft indexeerbaar op voorwaarde dat ze in de HTML-code van de pagina staat, enkel verborgen door stijl. Het standaardgedrag, en het stelt geen enkel probleem.
Content die daarentegen bij een klik wordt geladen, via een asynchrone aanroep, bestaat niet op het moment van de initiële analyse. Ze kan bij een latere rendering worden gezien, maar niets garandeert het, en haar gewicht in de evaluatie van de pagina is onzeker.
De regel is dus eenvoudig: alle tabbladcontent moet aanwezig zijn in de geserveerde HTML. Uitgesteld laden rechtvaardigt zich alleen voor zware elementen zoals een video of een gepagineerde reviewlijst.
Een vaak genegeerd aanvullend punt: Google geeft aan content verborgen achter een interactie als minder belangrijk te behandelen op de mobiele versie. Dat diskwalificeert ze niet, maar het pleit ervoor uitgevouwen te laten wat het meest telt.
Tabbladen Productpagina PrestaShop: Drag & Drop BeheerTabbladen op maat voor de productpagina, herschikt met slepen en neerzetten.€79,00
Welke tabbladen per producttype
Drie configuraties, naargelang de aard van de catalogus.
Technisch product. Kenmerken, compatibiliteiten, documentatie, garantie en after-sales. De commerciële beschrijving blijft kort en uitgevouwen erboven.
Textiel- of modeproduct. Beschrijving, samenstelling en onderhoud, maatgids, levering en retouren. De maatgids zou niet in een tabblad moeten staan maar naast de selector, met het tabblad voor de gedetailleerde versie.
Voedings- of cosmeticaproduct. Beschrijving, samenstelling en allergenen, voedingswaarden of ingrediëntenlijst, bewaring, herkomst. Let op: de verplichte vermeldingen moeten vóór de aankoop bereikbaar blijven, wat een tabblad toelaat, maar ze mogen niet moeilijk te vinden zijn.
De volgorde
Drie principes.
Het eerste tabblad staat standaard open en wordt door vrijwel alle bezoekers gezien. De volgende worden door een afnemende fractie gezien. Plaats dus eerst wat het meest voorkomende bezwaar in die categorie wegneemt.
De volgorde volgt het beslissingstraject, niet de administratieve volgorde van uw velden. Beschrijving, dan technische verificatie, dan geruststelling, dan logistiek.
De volgorde kan per categorie variëren. Bij technische producten gaan de kenmerken voor de beschrijving. Bij decoratie omgekeerd.
De lege tabbladen
Een systematisch probleem zodra de configuratie op de hele catalogus wordt toegepast: een tabblad “Documentatie” getoond op producten die er geen hebben.
Het verwachte gedrag is het automatisch verbergen van elk tabblad zonder inhoud. Evident en toch zelden geïmplementeerd, omdat de configuratie in de eenvoudige gevallen product per product gebeurt en globaal in de andere.
Voorzie ook het omgekeerde geval: ingevoerde content maar geen tabblad geconfigureerd om ze op te vangen, wat de informatie onzichtbaar maakt.
Hoeveel tabbladen
Maximaal vier tot vijf. Daarboven stapelen twee effecten zich op: de titels passen niet meer op één regel, en de bezoeker leest ze niet meer.
Heeft u meer content, dan is de vraag niet hoe een tabblad toe te voegen, maar of die content op de productpagina thuishoort. Een volledige handleiding hoort eerder bij de downloads dan in een zesde tabblad.
De directe link naar een tabblad
Een nuttig en goedkoop detail: kunnen wijzen naar een precies tabblad vanuit een link.
Dat dient in drie gevallen: een link “bekijk de reviews” bij de score bovenaan de pagina, een verwijzing vanuit een klantenservicemail, en een link vanuit een blogartikel naar de technische sectie van een product.
Technisch veronderstelt dat dat elk tabblad een identifier heeft en dat het script het juiste tabblad opent bij aankomst op de pagina.
De Productpagina Tabbladen module voor PrestaShop beheert deze configuratie op PrestaShop 8 en 9: aanmaak van aangepaste tabbladen met drag-and-dropvolgorde, configuratie per productcategorie, content aanwezig in de HTML om indexeerbaar te blijven, automatisch verbergen van lege tabbladen en omschakeling naar accordeon op mobiel.