Shopify SEO en 3D-modellen met AR in de praktijk

XXLplant is de webshop van ZAZU zelf. Er staan meer dan driehonderd grote planten in, verkocht in dertien landen. Voor ons is het ook een proeftuin. Een nieuwe aanpak voor SEO, een 3D-viewer of een tool die klanten helpt, bouwen we eerst hier, met ons eigen geld en onze eigen omzet, voordat we hem bij een klant voorstellen.

Dit artikel laat drie onderdelen uit die proeftuin zien, op het niveau waarop een developer of PPC-specialist ze zou willen nabouwen: hoe we SEO doen en meten, hoe we van een studiofoto een 3D-model met AR maken, en wat de plantendokter technisch doet.

Hoe we Shopify SEO doen in negen talen

De basis is één pagina per plantsoort die echt iets uitlegt. Voor elke soort die XXLplant in groot formaat verkoopt, staat er een collectie met de soortnaam als titel, zoals de Ficus lyrata of de olijfboom. De keuze voor de soorten komt uit zoekdata. "Olivenbaum" wordt in Duitsland 32.000 keer per maand gezocht, en de moeilijkheidsgraad in Ahrefs is 2 op 100.

Zo'n soortpagina is een collectie met een eigen sjabloon. De inhoud staat in metafields op de collectie (een korte en een lange intro, de groeivormen, verzorgingsstappen, veelgestelde vragen) en in 48 metaobjecten per soort: snelle feiten, een woordenlijst, bronnen en een vergelijkingstabel. Het sjabloon rendert de vragen ook als FAQPage-schema. Rond de collecties staan verzorgingsartikelen over problemen die mensen echt hebben, zoals bruine bladeren aan een Strelitzia of een Monstera in de winter. Elk artikel heeft een link naar de collectie van die soort.

Alles staat in negen talen. De vertalingen schrijven we met translationsRegister rechtstreeks in de winkel, ook voor de metafields en metaobjecten, die elk een eigen vertaalbare resource zijn. Hoe dat werkt en waar het misgaat, staat in Shopify Markets: één webshop in dertien landen.

Hoe je SEO meet met de Search Console-API

We lezen Search Console uit via de API, met de dimensies zoekopdracht en pagina, in blokken van 25.000 rijen. Daarna delen we elke zoekopdracht in met een reguliere expressie op koopwoorden in alle negen talen: kopen, kaufen, buy, acheter, köpa, comprar, en woorden als groot, XXL en kunstplant. Elke pagina krijgt een type: collectie, product, blog of homepage. Zo zie je per type pagina hoeveel vertoningen en klikken er op kooptermen binnenkomen, en op welke gemiddelde positie.

Die analyse liet op 5 oktober drie dingen zien. Collectiepagina's kregen veel vertoningen op kooptermen, maar stonden gemiddeld op positie 38. Voor "grote kamerplanten" concurreerden zes eigen pagina's met elkaar, waaronder blogpagina's met een tag-filter. En 28 Nederlandse collecties hadden geen eigen SEO-titel, zodat Google "Alocasia – XXLplant" toonde zonder het woord kopen, terwijl de vertaalde versies dat wel hadden.

Dezelfde dag is dat aangepakt. De 28 titels hebben nu de vorm soortnaam, kopen, een onderscheidend kenmerk en het merk. De tagpagina's van de blog staan op noindex,follow, met een regel in theme.liquid die kijkt naar template.name == 'blog' en current_tags. En per koopterm is één doelpagina gekozen. Wat dat oplevert, meten we in de weken erna. Dat is ook het punt van een proeftuin: de meting staat klaar voordat de wijziging live gaat.

De cijfers tot nu toe: in de week van 1 juni kreeg XXLplant 208 klikken uit Google, in de week van 28 september 561. De Italiaanse versie ging op 18 september live en stond de volgende dag in de index. In de twee weken daarna kwamen er 130 klikken uit Italië, tegen 9 in de twee weken ervoor. Bijna al dat verkeer kwam binnen op vertaalde verzorgingsartikelen.

Hoe je 3D-modellen voor Shopify maakt van een productfoto

Een plant van twee meter koop je makkelijker als je ziet hoe hij in je kamer staat. Op 91 productpagina's van XXLplant draai je de plant daarom als 3D-model, en zet je hem met je telefoon op ware grootte in je eigen ruimte. Op de computer verschijnt een QR-code die je met je telefoon scant.

Een 3D-artiest komt er niet aan te pas. De pijplijn heeft vijf stappen:

1. De vrijstaande studiofoto gaat naar de image-to-3D-API van Meshy, met een doel van 50.000 driehoeken en kleur plus PBR-materiaal. Een model kost 30 credits.
2. Een Node-script ruimt het model op. Het haalt losse fragmenten weg, schaalt het model naar de hoogte uit de producttitel en legt het nulpunt onder de pot. De kleurtextuur gaat naar 2K en de normal- en metallic-roughness-map naar 1K, in jpeg. Een model komt zo uit op vijf à zes megabyte.
3. De bladkleur wordt gelijkgetrokken met de bronfoto in de Lab-kleurruimte, door de helderheid te verschuiven en de kleur evenredig te schalen. Het materiaal krijgt een ruwheid van 0,9 en geen metaal, omdat het model van Meshy te veel glom.
4. Als proef op de Ficus lyrata kreeg het model een skelet van zes botten vanaf de potrand, met een wieglus van vijf seconden. Het script vindt de potrand via het breedteprofiel van het model. In de three.js-viewer laat een vertex-shader de bladeren licht trillen, en veert de kroon na als je het model draait.
5. Het model gaat via een staged upload als MODEL_3D naar Shopify, en productUpdate hangt het als media aan het product. Shopify maakt er zelf een USDZ-bestand van voor de AR-weergave op iPhone.

Bij stap 5 kwamen we twee dingen tegen. De AR-weergave van Apple opent het wiegende model met skelet niet. Heeft een product een wiegend model, dan staat er daarom een stilstaand model naast voor AR, en de sectie kiest op basis van de alt-tekst welk model waar komt. Heeft een product één model, dan gebruikt de sectie dat voor allebei. Daarnaast gaf productUpdate soms een foutmelding terwijl de mutatie wel was uitgevoerd. Wie dan blind opnieuw uploadt, krijgt een dubbel model. Het uploadscript controleert daarom eerst wat er al aan het product hangt.

Voor publicatie is elk model headless gerenderd en naast de studiofoto gelegd, en is de hoogte gemeten. Alle 93 modellen kwamen binnen drie centimeter van de opgegeven hoogte uit. Drie hielden we achter: een citrusboom zonder pot die boven de grond zweefde, een Kentia met een pampaspluim uit de fotostyling en een Sansevieria met de meetlat nog in beeld.

Hoe de plantendokter werkt en wat hij meet in GA4

De plantendokter is een interactieve tool voor klanten met een plant die niet lekker gaat. Je kiest je plant uit dertien soorten en daarna het symptoom, uit negen mogelijkheden zoals gele bladeren of bruine punten. Je krijgt een diagnose, een behandeling en advies om het te voorkomen, met notities die alleen voor die soort gelden.

De inhoud staat per taal in een JSON-bestand in het thema, en een sectie met wat JavaScript bouwt de keuzes en de uitkomst op. Elke soort heeft een eigen anker, zoals /pages/plantdokter#monstera, dat direct naar de symptoomkeuze voor die plant springt. De verzorgingsartikelen per soort linken met dat anker naar de dokter, en op de zoekpagina verschijnt de dokter alleen bij zoekwoorden die op een zieke plant wijzen, zoals geel of spint.

Voor PPC is vooral het meten interessant. De dokter stuurt bij elke diagnose een event plantdokter_diagnose naar de dataLayer, met de soort en het symptoom. De plantkeuzehulp doet hetzelfde met plantkeuzehulp_resultaat. In GA4 zijn dat bruikbare doelgroepen: iemand die net een diagnose voor zijn Monstera kreeg, is een ander publiek dan iemand die alleen een productpagina bekeek. Na de diagnose kan de klant de klantenservice om hulp vragen.

Wat dit betekent voor jouw webshop

Alles wat hier staat, draait eerst bij ons en daarna pas bij een klant. Dat scheelt een klant de proefperiode, en ons de beloftes die we niet kunnen waarmaken. Hoe we het thema technisch bijhouden met al deze onderdelen erin, lees je in Shopify GitHub-integratie in de praktijk.

Wil je een van deze onderdelen in je eigen webshop? Vertel ons welke, dan laten we zien hoe het bij XXLplant werkt.