Technische optimalisatie van je webshop is cruciaal om te scoren in Google. Gelukkig zijn er heel veel zaken die je eenmalig goed moet instellen en die vervolgens altijd op elke pagina kloppen.

Hieronder een overzicht van al die aspecten.

Vergis je niet. Dit zijn belangrijke details die op alle pagina’s terugkomen. Deze “details” kunnen je webshop maken of breken.

Je vindt hieronder de exacte uitleg over:

• Instellen van H-Tags
• Speciale Google Code
• Hreflang code

H-tags Gebruiken in jouw Webshop

H-tags zijn een veelbesproken onderwerp op het gebied van SEO. H-tags zijn een vast onderdeel van HTML structuur.

Een h-tag staat voor een heading tag in het Nederlands: koptekst code. Een H-tag geeft weer of een stuk tekst een koptekst is.

Er zijn 6 soorten H-tags.

H1 t/m H6. In code: <h1> tot en met <h6>

H-tags worden altijd in een hiërarchie gebruikt. Een pagina heeft maar 1 H1 tag. Die staat altijd bovenaan en geeft weer waar de pagina overgaat.

Daarbinnen vallen de overige H-tags op de volgende manier: Een H2 tag, valt altijd direct onder een H1 tag en onder een H2 tag mag alleen een H3 tag vallen.

Als je het vergelijkt met een boek, dan heeft elk boek 1 titel.

Dat is de H1 tag.

Alle hoofdstukken zijn de H2 tags. Alle sub-hoofdstukken de H3 tags, etc.

Een H-tag invoegen werkt als volgt. Voor de tekst plaats je de tag <h1> en achter de tekst </h1>. De tekst tussen de h-tags is de koptekst geworden.

• <h1>Bovenste en allergrootste koptekst<h1>
  • <h2>Eerste kleine tussenkop</h2>
    • <h3>Eerste h3 tussen kop</h3>
    • H3
    • H3
      • H4
      • H4
  • H2
  • H2
  • H2
    • H3
      • H4
        • H5
          • H6
      • H4
  • H2

Etc.

Voor deze website ziet het er bijvoorbeeld zo uit:

Dit is een H1 koptekst

Dit is een H2 koptekst

Dit is een H3 koptekst

 Dit is een H4 koptekst

Dit is een H5 koptekst

Dit is een H6 koptekst

Waarom H-tags Cruciaal zijn voor Webshop SEO

De reden dat H-tags belangrijk zijn voor SEO, is dat Google teksten binnen de H-tags zwaarder meeweegt in de posities dan normale tekst.

Dus door zoekwoorden in een h-tag te plaatsen kan je een voorsprong krijgen. Hierbij weegt een H1 tekst zwaarder dan een H2 en een H2 weegt zwaarder dan een H3.

Google weegt alleen de H1, H2 en H3 tags mee. H4, H5 en H6 worden niet meegenomen. Wat hierbij belangrijk is, is dat je de H-tags alleen toepast op de content van die specifieke pagina, niet over de gehele website.

Wanneer er teveel elementen een H-tag krijgen, dan begrijpt Google niet meer wat er nu belangrijk is op die pagina. Zeker niet wanneer de H-tags steeds hetzelfde zijn.

Google begrijpt dan niet meer wat de echte kopteksten zijn en welke teksten belangrijker zijn dan andere. Dat zorgt ervoor dat het effect van de H-tags compleet verwijderen. Je kan dus niet alle tekst van een pagina in een H1-tag zetten om zo beter te scoren in Google.

Daarnaast wil je niet dat alles wat maar een beetje op een koptekst lijkt een H-tag meekrijgt.

Bijvoorbeeld dat alle filters, teksten in de footer, header en alle andere content die niet specifiek voor die pagina is een H-tag meekrijgt.

Hier een voorbeeld van een Leen Bakker categoriepagina:

De H1 tag is de grote kop bovenaan de pagina. Perfect voor SEO.

De H2 koppen zijn de volgende helemaal onderaan de pagina:

H3 koppen gebruikt de website niet.

En dat is logisch, want er zijn geen kopteksten onder de H2, dus er is geen plek voor H3 kopteksten.

Wat je eventueel als H3 koppen kan instellen zijn de namen van de producten op de pagina.

Dit is een voorbeeld van hoe het wel moet.

Alleen de teksten specifiek voor die pagina krijgen een H-tag.

Hieronder een voorbeeld van wat je niet wilt.

Bijvoorbeeld een H3 die standaard in elke footer staat, zoals op Home 24 waar de tekst Geen aanbieding missen! een H3 is.

Of verkeerde H2-tags die alle kopteksten in de footer een H2 maken, zoals bij Goossenswonen.nl.

Niet goed.

Het is wel belangrijk op te merken dat het perfect hebben van de H-tags niet het verschil betekent tussen plek 20 of plek 1.

Maar het is wel iets wat 1x goed geprogrammeerd moet worden en dan voor elke pagina goed staat.

Dat betekent dat je op een relatief eenvoudige manier iets kan regelen wat elke pagina op je webshop helpt om te scoren in Google.

Speciale Google Code Opmaak (Structured Data & Rich Snippets & Micro data)

Er zijn speciale (Google) programmeercodes die je kan toepassen op je webshop om jouw zoekresultaat meer op te laten vallen.

Opvallen in de zoekresultaten is de manier om meer klikken naar jouw resultaat te trekken. Zelfs als je niet op nummer 1 staat.

Kijk bijvoorbeeld naar dit zoekresultaat en bedenk in een flits: welke resultaten vallen als eerste op.

En, en, en?

Waarschijnlijk trokken de resultaten van Bol.com (bovenaan) en trendymeubels.nl (onderaan) als eerste je aandacht.

De sterren vallen als eerste op. Maar ook de beoordelingsinformatie die ernaast staat en de prijs.

Wat je misschien nog niet was opgevallen is dat het resultaat ook daadwerkelijk groter is.

Kijk meer eens naar het resultaat vergeleken met het resultaat van beslist.nl wat op nummer 2 staat.

Bol.com heeft een complete regel extra in de zoekresultaten.

Dat wetende, kan je zelf wel bedenken welke resultaten de meeste klikken naar zich trekken. Dat kan ook weer een direct effect hebben op je positie. Dus deze speciale codes zijn belangrijk.

De algemene term voor dit soort code is Schema markup of structured data. Dit is een brede term, waarvan voor SEO eigenlijk alleen de micro data gebruikt wordt om rich snippets (verrijkte zoekresultaten)te maken.

Dat waren een aantal moeilijk woorden in 1 zin.

Ik leg het uit:

Structured data is het toevoegen van een stukje programmeercode aan bepaalde eigenschappen van een product of pagina om ervoor te zorgen dat Google exact snapt wat deze eigenschappen betekenen.

Je voegt deze code meestal toe aan de <body> van de pagina.

Dit ziet er bijvoorbeeld zo uit:

Dit gebruikt Google vervolgens weer om de zoekresultaten meer op te laten vallen.

Voor webshops zijn er de volgende eigenschappen die je kan opmaken via structured data:

Product Algemeen

Met de algemene product markup maak je voor Google duidelijk dat alle producten in je webshop verkoopbare producten zijn.

En dat vormt de basis om andere eigenschappen aan de producten toe te kennen.

De code is als volgt:

<div itemscope itemtype=”http://schema.org/Product”>

</div>

Vervolgens kan je binnen dit product de volgende eigenschappen toekennen:

Merk

Via de code brand kan je een merk toekennen aan een product <span itemprop=”brand”>Merknaam</span>

Productnaam

Via de code name kan je een productnaam toekennen aan een product <span itemprop=”name”>Productnaam</span>

Product Afbeelding

Via de code image kan je een afbeelding toekennen aan een product <img itemprop=”image” src=”productnaam.jpg” alt=”productnaam” />

Product Beschrijving

Via de code description kan je een productbeschrijving toekennen aan een product <span itemprop=”description”>Hier komt je productbeschrijving</span>

Product Reviews

Via de code aggregateRating kan je een totaal aantal reviews toekennen aan een product.

<span itemprop=”aggregateRating” itemscope itemtype=”http://schema.org/AggregateRating”>
<span itemprop=”ratingValue”>4.4</span> stars, based on <span itemprop=”reviewCount”>89</span> reviews
</span>

Wat je dan ziet in Google is dit:

Product prijs

Via de code offers, priceCurrency en pricekan je een prijs toekennen aan een product

<span itemprop=”offers” itemscope itemtype=”http://schema.org/Offer”>Prijs € 20,00 <meta itemprop=”priceCurrency” content=”EUR” />

</span>

Wat je dan ziet in Google is dit:

Naast product structured data, zijn er nog meer vormen van structured data om toe te passen in je webshop.

Breadcrumbs (Kruimelpad)

Je kruimelpad is een belangrijk navigatie middel voor bezoekers en Google crawlbots. Hieronder zie je een voorbeeld van het kruimelpad van bol.com:

Als je jouw kruimelpad voorziet van structured data, ziet dit er een stuk beter uit in de zoekresultaten.

Mediamarkt heeft de code niet, maar bol.com wel.

Geen wereld van verschil, maar het ziet er toch netter uit.

Dit realiseer je door de volgende code toe te passen. In het onderstaande voorbeeld maken we van de URL www.klikproces.nl/linkbuilding/ structured data. Het woord linkbuilden wordt benoemd en er wordt duidelijk gemaakt dat dit 1 niveau diep zit.

<ol itemscope itemtype=”http://schema.org/BreadcrumbList”>

<li itemprop=”itemListElement” itemscope

itemtype=”http://schema.org/ListItem”>

<a itemprop=”item” href=”http://klikproces.nl/linkbuilding/”>

<span itemprop=”name”>linkbuilding</span></a>

<meta itemprop=”position” content=”1″ />

</li>

</ol>

Als je een URL hebt die een niveau dieper gaat, zoals http://klikproces.nl/linkbuilding/casestudy dan verandert de code iets:

<li itemprop=”itemListElement” itemscope

itemtype=”http://schema.org/ListItem”>

<a itemprop=”item” href=”http://klikproces.nl/linkbuilding/casestudy”>

<span itemprop=”name”>Linkbuilding Casestudy</span></a>

<meta itemprop=”position” content=”2″ />

</li>

</ol>

Adres en Contactgegevens

Je kan jouw adres en contactgegevens opmaken met structured data. Dit helpt Google om te begrijpen waar jouw webshop zich fysiek bevindt. Bijvoorbeeld als je een winkel hebt. Daarnaast helpt dit om beter gevonden te worden op lokale zoekresultaten: Lees hier meer over waarom lokale vindbaarheid ook voor webshops cruciaal is.

Dit werkt vrij eenvoudig. Het enige wat je hoeft te doen is een kleine code te plaatsen rondom je adres gegevens. Hieronder staat precies hoe.

De gegevens die ingevoerd worden, zijn:

slagersweg 53, 3522 BX in Eindhoven met als telefoonnummer 012 345 67 89, faxnummer 012 345 67 90 en e-mailadres jouwnaam@voorbeeld.nl.

<div itemprop=”address” itemscope itemtype=”http://schema.org/PostalAddress”>

Adresgegevens:

<span itemprop=”streetAddress”>slagersweg 53</span>

<span itemprop=”postalCode”>3522 BX</span>

<span itemprop=”addressLocality”>Eindhoven, Nederland</span

  </div>

Telefoonummer:<span itemprop=”telephone”>012 345 67 89</span>,

Fax:<span itemprop=”faxNumber”>012 345 67 90</span>,

E-mail adres: <span itemprop=”email”>jouwnaam@voorbeeld.nl</span>

Zoekbalk

Een kleine toevoeging is het direct doorzoekbaar maken van je webshop in Google.

Wanneer iemand zoekt op jouw bedrijf- of merknaam kunnen ze direct via Google zoeken in jouw webshop.

Hieronder een voorbeeld van hoe dat eruit ziet.

Dit krijg je door de volgende code toe te passen op je zoekbalk:

<div itemscope itemtype=”http://schema.org/WebSite”>

<link itemprop=”url” href=”http://klikproces/”/>

<form itemprop=”potentialAction” itemscope itemtype=”http://schema.org/SearchAction”>

<meta itemprop=”target” content=”http://klikrproces.nl/search?q={query}”/>

<input itemprop=”query-input” type=”text” name=”query”/>

<input type=”submit”/>

</form>

</div>

Let op dat je de URL’s moet aanpassen naar jouw URL. In het bovenstaande voorbeeld staat de URL http://klikrproces.nl/search?q={query}. Controleer of dit ook klopt voor jouw webshop.

Dit is vrij eenvoudig. Ga naar je webshop en zoek iets in de zoekbalk.

Als ik bijvoorbeeld op broeken zoek op wehkamp.nl krijg ik de volgende URL:

https://www.wehkamp.nl/Winkelen/SearchOverview.aspx?Ntt=broeken&type=manual

Dus de URL die in de code moet worden toegevoegd krijg je door het woord broeken te vervangen door {query}. De URL wordt dan:

https://www.wehkamp.nl/Winkelen/SearchOverview.aspx?Ntt={query}&type=manual

In 10 Seconden Controleren of Je Structured Data Goed Staat

Google heeft een eigen tool ontwikkeld die een specifieke pagina controleert op de implementatie van structured data op de pagina. Klik hier om naar de tool te gaan: Google structured data test tool.

Je ziet dan het volgende staan, waar je jouw URL kan invoeren.

Voer je URL in en klik op test uitvoeren.

Het scherm split zich dan op in 2 delen. Aan de linkerkant krijg je de exacte code te zien die Google heeft gebruikt. Aan de rechterkant zie je alle structured data die Google gevonden heeft, inclusief eventuele fouten die Google constateert.

Hieronder een voorbeeld wanneer je deze URL invoert https://www.bol.com/nl/p/iron-man-dvd-nl/9200000022220162/

Op deze manier controleer je eenvoudig en snel of jouw structured data goed is ingesteld.

Webshop Instellen Voor Meerdere Landen en Talen Via Hreflang

Wanneer je webshop actief is in meerdere landen of je wilt actief gaan worden in meerdere landen dan gaat taal een belangrijke rol spelen. Want hoe ga je ervoor zorgen dat jouw webshop net zo hoog in België komt te staan als in Nederland?

De hreflang code is daarvoor gemaakt. Hreflang staat voor href language. Ofwel, voor welke taal moet ik de bezoeker naar welk deel van de webshop sturen?

Wat Hreflang Wel en Niet Doet

Om meteen een mythe te ontkrachten:

Het instellen van de juiste taal via een Hreflang tag heeft geen enkele invloed op je zoekwoordposities.

Zoekwoordposities worden niet gekopieerd. Als je 1 staat in Nederland en je implementeert de hreflang code voor België, sta je niet automatisch in België op dezelfde plek.

Maar het zorgt er wel voor dat Google jouw webshop veel beter begrijpt, snapt welke pagina’s voor welke talen bedoeld zijn, waardoor scoren in Google veel makkelijker is.

Daarnaast zorgt de href lang tag ervoor dat je potentiële problemen met duplicate content vermijdt, omdat het voor Google veel duidelijker is welke pagina voor welk land bedoeld is.

Dat betekent dat je nog steeds een unieke pagina moet maken voor Nederland en Nederlands België. Maar het zorgt er in elk geval voor dat Google het verschilt snapt.

Hoe Je de Hreflang Code Implementeert

De hreflang code ziet er als volgt uit:

<link rel=”alternate” href=”http://example.com” hreflang=”nl-nl” />

Je plaatst deze code in de <head> van je shop.

Het eerste stuk van de code is altijd hetzelfde: <link rel=”alternate”

Het tweede stuk van de code bepaalt de pagina waar het om gaat.

href=”http://example.com”

Het derde stuk van de code geeft aan over welk land en om welke taal het gaat: hreflang=”nl-nl” />

De eerste nl staat voor de taal waar het om gaat, de tweede nl over het land.

De meest gebruikte codes in en rondom Nederland zijn:

• nl-nl (Nederlands in Nederland)
• nl-be (Nederlands in België)
• fr-fr (Frans in Frankrijk)
• fr-be (Frans in België)
• de-de (Duits in Duitsland)
• eng-gb (Engels in de het Verenigd Koninkrijk)

Let op dat eu dus geen code is. Want de eu is geen taal en geen land.

De uk als land- en taalcode = Oekraïne. De code voor het verenigd koninkrijk = gb.

Een overzicht van alle land en talen codes kan je hier vinden: href talen codes.

Problemen met Laadsnelheid

Nu kan deze implementatie wel 1 groot probleem geven: laadsnelheid.

Wanneer jouw webshop in veel talen voorkomt, betekent dit dat er heel veel geladen moet worden voor bezoekers. Dat kan de webshop traag maken, terwijl bezoekers al die code helemaal niet gebruiken.

Er is een manier om dit te omzeilen. Dat is veel werk, maar het kan. Namelijk door de hreflang tag toe te voegen aan je XML sitemap. Klik hier om alles te lezen over XML sitemaps.

Het toevoegen van de hreflang tag aan je XML sitemap doe je als volgt:

Een normale URL ziet er zo uit in een XML sitemap:
<url>
<loc>http://www.example.com/uk/</loc>
<lastmod>2017-06-06</lastmod>
<changefreq>daily</changefreq>
<priority>0.5</priority>
</url>

Per URL moet je de volgende code toevoegen per combinatie van taal en land:
<xhtml:link rel=”alternate” hreflang=”nl-nl” ref=”http://klikproces.nl/” />

Dus wanneer 1 pagina in het Nederlands – Nederland en Nederlands – België. beschikbaar is, wordt de code bijvoorbeeld:
<xhtml:link rel=”alternate” hreflang=”nl-nl” ref=”http://klikproces.nl/” />
<xhtml:link rel=”alternate” hreflang=”nl-be” ref=”http://klikproces.nl/be/” />

Dit maakt de totale code:

<url>
<loc>http://klikproces.nl</loc>
<xhtml:link rel=”alternate” hreflang=”nl-nl” ref=”http://klikproces.nl/” />
<xhtml:link rel=”alternate” hreflang=”nl-be” ref=”http://klikproces.nl/be/” />
<lastmod>2017-06-06</lastmod>
<changefreq>daily</changefreq>
<priority>0.5</priority>
</url>

Zoals je ziet is dit echt veel werk en als je veel talen hebt, wordt de code per URL enorm.

Maar het grote voordeel van deze code in je XML sitemap plaatsen is dat het de laadsnelheid niet beïnvloedt en bezoekers er geen last van hebben.

Controleren of de Hreflang Code Goed Staat

Je kan vrij eenvoudig checken of je hreflang goed is ingesteld door op de volgende URL te zoeken:

http://www.google.com/search?hl=nl&gl=be&pws=0&q=container

Waarbij

• www.google.com is de zoekmachine waarin je wilt zoeken.
• hl=nl betekent de taal waarop je zoekt. In dit geval Nederland.
• gl=be betekent het land van waaruit je zoekt. In dit geval België.
• pws=o betekent dat je alle geschiedenis wist van voorgaande zoekopdrachten.
• q= betekent de zoekopdracht waarop je zoekt in Google. In dit geval container.

Je kan als q een zoekwoord intoetsen of bijvoorbeeld de zoekopdracht site:www.jouwdomeinnaam.nl + het zoekwoord om te zien welke URL bovenaan komt te staan.

Gebruik hiervoor als q:

site%3Awww.klikproces.nl+zoekwoord

Als ik wil kijken welke URL ik krijg als ik zoek via google.nl in het Nederlands in Nederland op wwww.klikproces.nl met als zoekopdracht “domeinnaam”, dan voer ik de volgende URL in:

http://www.google.nl/search?hl=nl&gl=nl&pws=0&q=site%3Awww.klikproces.nl+domeinnaam

Hreflang Tools

Er zijn een aantal handige tools om je te helpen met de implementatie van de hreflang tags.

Laat software jouw tags maken: hreflang tag generator

Testen of je tag goed geïmplementeerd is: hreflang test tool

Controleren welke href lang codes worden gevonden op 1 specifieke URL: hreflang URL test software

Heeft dit jou geholpen met je technische SEO optimalisatie? Heb je nog vragen of opmerkingen? Laat een reactie hieronder achter.