Productpagina ontwerpen voor webshops: opbouw en voorbeelden
Productpagina ontwerpen voor webshops
Productpagina ontwerpen: opbouw, live voorbeelden, checklist | We.Inc
De opbouw van een productpagina voor een webshop met live, bewerkbare lay-outs, een checklist om zelf te scoren en Product structured data die voldoet aan de huidige eisen van Google.
Een productpagina moet vóór de koopknop drie vragen beantwoorden: wat is het, past het bij mij, en wat gebeurt er nadat ik betaal. Zet op desktop duidelijke foto's, de naam, prijs en opties boven de vouw, daaronder levering, retouren en details, en markeer prijs en beschikbaarheid met Product structured data.
Opbouw van een productpagina, van boven naar beneden
Onderdeel
Taak
Veelgemaakte fout
Galerij
Toont het artikel van alle kanten, in gebruik en op schaal
Slechts één studiofoto
Naam en prijs
Bevestigt dat het het juiste artikel is tegen een bekende prijs
Prijs pas zichtbaar bij het afrekenen
Opties
Maat, kleur, aantal met duidelijke voorraadstatus
Uitverkocht blijkt pas na het kiezen
In winkelwagen
De enige hoofdactie
Concurrerende knoppen die even zwaar wegen
Levering en retouren
Neemt de zorg na de aankoop weg
Beleid alleen in de footer
Details en specificaties
Materialen, afmetingen, onderhoud
Muur van tekst zonder kopjes
Vragen
Antwoorden die de beslissing tegenhouden
Ontbreekt volledig
In plaats van screenshots van andere winkels bouwt deze gids stap voor stap een productpagina voor een verzonnen keramiekatelier in gewone HTML en CSS. Gebruik de checklist om uw eigen pagina te scoren en kopieer de structured data die past bij de huidige regels van Google.
Scoor uw huidige productpagina met de checklist en zie welke onderdelen ontbreken.
Open de live lay-outvoorbeelden en bewerk ze met uw eigen productgegevens.
Kopieer de Product JSON-LD en vul die met dezelfde prijs en voorraad die de pagina toont.
Test de markup in de Rich Results Test van Google voordat u publiceert.
Vermeld de leverdatum of een periode bij de knop, niet alleen de kosten. Mensen plannen rond het moment van levering.
Toon de voorraadstatus bij elke optie voordat die gekozen wordt, zodat niemand een uitverkochte maat kiest.
Gebruik echte afmetingen en een foto met iets herkenbaars voor de schaal, zoals een hand of een mok.
Houd het knoplabel specifiek en overal hetzelfde, zoals In winkelmand.
Structured data moet overeenkomen met de pagina. Een andere prijs in de markup dan op het scherm is voor Google een reden om die te negeren.
Veelgestelde vragen
Wat moet er boven de vouw staan op een productpagina?
Op desktop: de hoofdfoto, productnaam, prijs, de optiekiezers en de knop om in de winkelwagen te leggen. Op telefoons vult de foto meestal het eerste scherm, dus zorg dat naam en prijs er direct op volgen, met de knop vlak daarachter.
Welke structured data heeft een productpagina nodig?
Voor pagina's waar mensen kunnen kopen, vereist de documentatie van Google over merchant listings Product met name, image en offers, en een Offer met een prijs boven nul en een priceCurrency. Beschikbaarheid, verzendgegevens, retourbeleid, merk en GTIN worden aanbevolen.
Wat is het verschil tussen product snippets en merchant listings?
Product snippets zijn voor pagina's waar mensen niet direct kunnen kopen, zoals reviews, en hebben een naam nodig plus één van review, aggregateRating of offers. Merchant listings zijn voor pagina's die het product verkopen en hebben de prijs en valuta nodig.
Moet ik reviews tonen op productpagina's?
Als u echte reviews hebt, ja, bij de prijs of onder de details. Verzin nooit reviews of beoordelingen, en voeg alleen aggregateRating-markup toe als de beoordeling op de pagina staat en van echte klanten komt.
Foto's doen het meeste verkoopwerk
Plan de galerij als een set: voorkant, achterkant of zijkant, een close-up van het materiaal, het artikel in gebruik en één foto met iets voor de schaal. Elke afbeelding heeft alt-tekst nodig die beschrijft wat die weergave laat zien.
Reserveer de ruimte van de galerij met width en height of aspect-ratio, zodat de pagina niet verspringt terwijl afbeeldingen laden.
Het koopblok
Groepeer prijs, opties, aantal en knop, met de samenvatting van levering en retouren er direct onder. Dat ene blok hoort de meeste vragen te beantwoorden zonder te scrollen.
Uitgeschakelde opties hebben meer nodig dan grijze tekst. Zet het woord Uitverkocht in het label, zodat de status voor iedereen duidelijk is, ook voor gebruikers van een schermlezer.
Details die retouren verminderen
Afmetingen, materialen, onderhoudsinstructies en wat er in de doos zit horen in overzichtelijke secties met kopjes. Een korte opmerking over maat of pasvorm voorkomt veel verkeerde bestellingen.
Beantwoord de twee of drie vragen die klanten het vaakst stellen direct op de pagina, en link voor de rest naar de volledige FAQ.
Voorbeelden van productpagina-lay-outs
Productpagina in twee kolommen met galerij en koopblok
Op brede schermen staat de galerij links en het koopblok rechts; op telefoons komen ze onder elkaar. De uitverkochte maat zegt dat in woorden, niet alleen met grijs.
Details in secties met labels
Korte secties met kopjes zijn makkelijker te scannen dan één lange beschrijving. De eerste staat open omdat die de meest gestelde vraag beantwoordt.
Product structured data voor een pagina die verkoopt
name, image en offers met price en priceCurrency zijn de verplichte velden voor merchant listings; availability en de rest worden aanbevolen. Waarden moeten overeenkomen met de pagina.
Minstens vier foto's, waarvan één in gebruik en één die de schaal toont
Elke afbeelding heeft alt-tekst die die weergave beschrijft
Prijs zichtbaar naast de productnaam
Voorraadstatus getoond bij elke optie voordat die gekozen wordt
Eén duidelijk primaire knop om in de winkelwagen te leggen
Leverkosten en levertijd getoond bij de knop
Retourbeleid samengevat bij de knop
Afmetingen, materialen en onderhoud in secties met labels
Meest gestelde vragen beantwoord op de pagina
Werkt op 375 px breed zonder zijwaarts scrollen
Product structured data komt overeen met de zichtbare prijs en voorraad
Alleen echte reviews, als er reviews getoond worden
Checklist voor productpagina's
Vink aan wat uw productpagina al doet. De score laat zien wat er nog te verbeteren valt; er wordt niets opgeslagen of verstuurd.