Shopify gids deel 6 - SEO
Deze gids wordt momenteel vernieuwd met de nieuwste opties en aanpassingen.
Lees je in mijn artikelen over dingen waarover je een persoonlijk advies zou willen m.b.t. jouw webshop of plannen daartoe? Zijn er onderdelen die voor jou specifiek gemaakt zouden moeten worden? Heb je het idee dat mijn input jouw webshop kan helpen? Neem dan gerust contact op met mij, dan bekijken we samen wat Studio Wassink zou kunnen doen om je te helpen.
0630155506
Stuur een mail
Gidsdeel 6 - SEO en organische resultaten met de Shopify Webshop
De kern van dit artikel geldt ook voor websites en webapps, dus ook dan kan ik u met deze info goed van dienst zijn.
We willen de beste SEO-scores voor onze webshop, omdat die meer ‘gratis’ bezoekers betekenen voor relevante zoekopdrachten. Hoewel webshops voor een grotere omzet altijd al marketingcampagnes in tools als Adwords hebben draaien, willen ze ook graag veel bezoekers organisch naar hun shop zien komen. Om deze resultaten z.s.m. te verhogen, moet je vooral letten op dingen die een bezoeker niet ziet, maar die wel in de het ‘onzichtbare’ gedeelte van je systeem ingezet kunnen worden. Ik benoem hieronder een aantal zaken om direct rekening mee te gaan houden en om die, als je het nog niet allemaal al doet, z.s.m. door te voeren.
Formaat van bestanden
Afbeeldingen, scripts, fonts en al het andere dat je op een pagina inlaadt, kosten de browser tijd om het in een beeld te renderen (opmaken van de totale weergave). Hoe meer en hoe omvangrijker/omslachtiger de bestanden, des te langer duurt dat. Google, Bing, Yahoo en andere zoekmachines beoordelen je webshop daarop, want een bezoeker die lang moet wachten heeft niet de beste shopervaring.
Fonts
Het makkelijkst te beïnvloeden zijn fonts (lettertypen). Om je huisstijl te voorzien van een originele impuls, wordt vaak gezocht naar een font dat niet teveel gebruikt wordt en toch goed leesbaar is. Omdat die fonts ‘apart’ zijn, zijn ze niet al in de browser ingebouwd, zoals wel het geval is met de standaard Arial, Helvetica, Roboto, etc. Je moet ze dus zelf inladen met de Webfonts, of ze met Google Fonts via het web ophalen. Beide technieken kosten meer laadtijd en dus is het belangrijk dit zeer beperkt te houden. Kies 2 of maximaal 3 fonts om te voorkomen dat dit je strafpunten oplevert.
Afbeeldingen
Bij afbeeldingen is de grootste boosdoener natuurlijk het formaat ervan. Als je een productfoto wilt tonen en die direct van een digitale camera haalt, is die verre van geoptimaliseerd en al snel enorm groot qua resolutie. De besparing die ik hiermee kan doorvoeren, kan wel 90-95% zijn t.o.v. direct uploaden.
Maar naast de afbeelding zelf is er ook in de code een onderdeel dat je niet over moet slaan, namelijk de ‘ALT’-waarde. Een browser kan je afbeelding (nog) niet daadwerkelijk zien, die weet alleen maar dat hij een ‘image’-bestand moet inladen. Met die ALT-waarde voeg je een beschrijving toe. Bijvoorbeeld bij een foto van een Schoen kun je toevoegen ‘Nike - collectie 2020 - maat 44 - wit’. Nu snapt de browser en ook bijv. Google, dat jouw webshop afbeeldingen kan tonen van deze schoen. En voor mensen met een visuele handicap wordt deze informatie voorgelezen. En de cijfers liegen er niet om als het gaat om het grote aantal mensen met zo’n handicap, ofwel evenzoveel potentiële klanten. Dus accuraat, netjes en winstgevend om dat in te vullen.
Scripts
En dan de scripts. Het is zonder technische kennis wat lastig uit te leggen, maar ik probeer het wel. Een script is een stuk code in bijv. JavaScript, Jquery of PHP. Het is zo opgezet dat het een handeling uit kan voeren die de site kan aanpassen of informatie van buitenaf op kan halen.
Voorbeeld: iemand bekijkt je overzicht van aangeboden schoenen en klikt op het filter ‘blauw’, zodat alle blauwe varianten eruit gelicht worden. Die klik wordt ontvangen door een script binnen de webomgeving en dat script snapt dat alle blauwe varianten moet worden getoond. Deze handeling moet met zo min mogelijk code gemaakt worden om geen onnodige vertragingen op te lopen.
Stel je bijvoorbeeld voor, dat je in je auto ineens 5 extra tandwielen toevoegt tussen je gaspedaal en de motor. Het gevolg is dat de overbrenging 5 overbodige taken moet uitvoeren alvorens het resultaat wordt bereikt en dat er dus een flinke vertraging zit tussen gas geven en beweging. Dat principe geldt hier ook en dus wil je dat de code die je toepast zo efficiënt mogelijk is. De beste programma’s hebben zo min mogelijk code nodig.
De browser moet namelijk door al die code heen graven. Die gaat gas geven en kijken hoe snel er beweging volgt. De zoekmachine gaat in milliseconden van ieder script meten hoe lang het duurt om dat in te laden en zal dan a.d.h.v. de resultaten jouw webshop een score toekennen op dit vlak.
Naast de efficiëntie per functie is het verstandig om óf alleen de scripts in te laden die ook daadwerkelijk op die pagina draaien, óf om alles in zo weinig mogelijk documenten te zetten. Het moeten openen van meerdere document vergt extra tijd, dus 3 functies in 1 document is sneller dan 3 documenten met 1 functie.
Metadata
Metadata is voor de bezoekers van je pagina’s onzichtbare informatie. Het is voor zoekmachines bedoeld, om snel in te kunnen lezen wat je op de pagina’s hebt staan. Een soort van samenvatting. Ze gaan nog steeds het boek lezen, maar kijken eerst even op de achterkant naar de snelle beschrijving.
title
meta name="description" content=""
meta name="keywords" content=""
meta name="author" content="Stefan Wassink"
Wanneer je Content Management Systemen gebruikt wordt dit vaak wat makkelijker gepresenteerd, door de titel van het product of de blog automatisch over te nemen en de content uit de productnaam te pakken. Dan is het van groot belang een goed begrip te hebben van de manier waarop het systeem de invulling aanpakt, zodat je goed weet wat er waar ingevuld moet worden voor een optimale werking.
Vul accurate informatie in en laat je niet verleiden om het te uitgebreid te maken. Je moet niet te weinig zeggen, maar teveel kan makkelijk nadelig worden voor de resultaten. Als je, om meer bezoekers te trekken, ook de naam Adidas bij de Nike schoenen zet, gaan je bezoekers na de eerste klik meteen weg omdat ze een ander merk schoen zoeken. Zo wordt je ‘bounce-rate’ verhoogd. Hiermee gaat je relevantie-score naar beneden en ook al snel je algemene resultaat.
H1, H2, H3, H-etc.
De H staan hier voor Heading, een titel dus. HTML werkt met 6 gradaties, simpelweg van H1 t/m H6. Deze kun je zo ook makkelijker benaderen vanuit je CSS stylesheet, maar partijen als Google lezen ze uit om een bepaald belang aan een woord of zin te koppelen. Een H1 is de meest prominente titel die je kunt toewijzen en dus is alles wat tussen die ‘h1’ tags staat van groter belang dan de rest. De sub-titels worden dus ‘h2’, die daarna H3, etc.
Denk nu niet dat je dus alles in H1 kunt zetten en overmorgen boven Bol en Coolblue staat. Zoals bij alles gaan de zoekmachines ook de mate van gebruik meten en als jij te veel van een bepaalde tag gebruikt bestempelen ze je webshop, website of webapp als SPAM!
SEO optimalisatie is een vak apart
Het bovenstaande omvat maar een deel van ook nog alleen maar de toplaag van de SEO-optimalisatie. Van de eerste tot de laatste regel die een pagina opmaakt, moet er gelet worden op de toepassing hiervan om een zo hoog mogelijke score te halen.
Zelf vind ik dit juist het leuke aan het vak, want het geeft weer een extra uitdagende dimensie aan het geheel. Het maakt een webproduct dat qua user journey goed werkt, qua design er gelikt en doeltreffend uitziet en qua SEO prima in elkaar steekt, bijna een kunstwerk.
Bij interesse om dit te overwegen en toe te passen in uw webshop, website of webapp, sta ik u graag bij. Laat het in ieder geval niet gewoon maar zitten, want ondanks de kosten ervan kost het nalaten u door de jaren heen zomaar het 10-voudige aan extra campagnes...
