Technische SEO analyse - deel 2

Technische SEO analyse - deel 2

Al eerder behandelden we het cruciale belang van de techniek achter een website. Het is de basis van een website wat eerst optimaal moet functioneren voordat verdere zaken als contentoptimalisatie aan bod zouden moeten komen.

In deel 1 van deze reeks over technische SEO hebben we het gehad over het opbouwen van een goede URL, multiregionale- en meertalige websites, gepagineerde inhoud en de meest voorkomende statuscodes. In het tweede artikel gaan we dieper in op de indexatie door Google, het gebruik van structured data en het optimaliseren van de snelheid van je website.

Indexatie

Voordat een pagina zichtbaar wordt in de zoekresultaten van Google moet hij eerst worden opgenomen in hun database. Dit proces heet indexatie. De duur hiervan kan variëren van dagen tot maanden, afhankelijk van de grootte van de website, kwaliteit van de (nieuwe) content en eventuele commando’s die je aan de crawlers door geeft. Als het goed is lukt het Google uiteindelijk zelf om jouw webpagina’s te vinden, maar het kan geen kwaad om Google voor de zekerheid een handje te helpen.

XML-sitemap

Dit kan door gebruik te maken van XML-sitemaps. Door deze sitemap geef je als het ware aan Google door welke pagina’s je allemaal hebt. In de XML-sitemap zet je dus alle mogelijke URL’s van je website. De zoekmachines kunnen deze sitemaps crawlen en zodoende alle pagina’s van je site terugvinden.

XML sitemaps zijn met name erg praktisch voor websites met veel pagina’s, bij de lancering van een nieuwe website, indien er gebruik gemaakt wordt van dynamische pagina’s of wanneer er problemen zijn met de interne linking. Vaak is een automatische toevoeging van nieuwe webpagina’s aan de XML-sitemap

Controleer voor het indienen van de sitemap of deze geen fouten bevat, zoals kapotte URL’s of URL’s waar redirects op staan. Op deze pagina wordt overzichtelijk uitgelegd hoe je XML-sitemaps technisch opbouwt.

Vervolgens moeten de zoekmachines de XML-sitemap ook nog kunnen terugvinden. Door in het robots.txt bestand een verwijzing toe te voegen naar de sitemap leidt je Google in goede banen. Op de eerste regel van het robots.txt bestand plaats je bijvoorbeeld volgende regel:

Sitemap: https://www.website.nl/sitemap.xml

Wat Google betreft, kunnen XML-sitemaps ook toegevoegd worden aan het Google Search Console. Hierdoor zullen de URL’s niet alleen vlugger worden opgenomen, maar zelf heb je ook een beter zicht op wat wel en niet geïndexeerd is.

Door middel van een XML-sitemap maak je zoekmachines dus duidelijk hoe de website is opgebouwd. Als je echt een grote website hebt, is het praktisch voor elke categorie een eigen sitemap aan te maken. Zo kan je makkelijker en gerichter gaan optimaliseren. Naast een sitemap voor webpagina’s kun je ook sitemaps voor afbeeldingen en video’s aanmaken. Dit laatste is vooral handig als je wilt dat je afbeeldingen in Google Image Search worden getoond.

Robots.txt

Het zojuist genoemde robots.txt (robots exclusioin protocol) is een bestand op de website wat gebruikt wordt om bepaalde secties of pagina’s af te schermen voor zoekrobots en gebruikers. Denk hierbij aan admin- of dev-pagina’s. Bezoeker en zoekmachines zouden niet op deze pagina’s moeten kunnen komen en daarom moeten deze pagina’s ook niet geïndexeerd worden.

Standaard ziet de inhoud van een robots.txt bestand er als volgt uit:

User-agent: *

Disallow:

De user-agent verwijst naar de robots van zoekmachines. * geeft aan dat hierbij alle robots worden aangesproken. Disallow geeft aan wat er niet gecrawled mag   worden. Indien dit leeg is, is alles toegankelijk. Stel nu dus dat je het admin deel van uw CMS wil uitsluiten voor alle bots, dan kan dit er zo uitzien:

User-agent: *

Disallow: /admin/

Het uitsluiten van een pagina of een deel van de website via het robots.txt bestand is echter geen garantie dat deze niet gespidered kan worden. Wanneer iemand binnen de site (of van een externe site) een link legt naar een pagina die zogezegd is uitgesloten, dan kan deze pagina alsnog gespidered worden en opgenomen worden in de index. Dit kan je enkel voorkomen door op de uitgesloten pagina’s ook een Metatag ‘NOINDEX’ te plaatsen.

Let op bij het uitsluiten dat de mappen waarin de CSS- en JavaScript bestanden staan niet worden uitgesloten. Hetzelfde geldt voor de mappen waarin afbeeldingen staan opgeslagen.

Nofollow

Met een nofollow verwijzing vertel je aan de crawlers een bepaalde link niet verder te volgen. Vroeger gebruikte men nofollow verwijzingen om de linkwaarde van hun website optimaal te verdelen over de pagina’s. Pagina’s zoals een cookiepolicy of algemene voorwaarden, welke men doorgaans niet wil laten ranken en dus ook linkwaarde wil geven, een nofollow verwijzing. Op deze manier kregen de pagina’s die men wel wilde laten ranking, in meer linkwaarde.

Inmiddels wordt de linkwaarde niet meer op deze manier verdeeld en zorgt een nofollow niet meer voor een betere verdeling van je linkwaarde, maar voor een verlies van linkwaarde. Behalve als je een forum bezit waar men op kan reageren, zouden we dan ook niet aanraden nofollow links te gebruiken.

Structured data

Rich snippets

Rich Snippets zijn extra toevoegingen aan de organische zoekresultaten die de bezoeker meer informatie geven. In deze rich snippets wordt informatie die op de achterliggende pagina aanwezig is, verder uitgelicht. Er zijn vele rich snippets mogelijk, zoals reviews, bread crumbs, recepten en data. Onderstaande voorbeeld van “Leuke Recepten” geeft de eerste drie varianten weer en het voorbeeld van Ziggo Dome geeft als rich snippet de concertdata weer. Een uitgebreidere vorm van de rich snippets zijn de rich cards waarbij de zoekresultaten nog opvallender worden weergegevjpg bijvoorbeeld een carrousel met blogberichten over een bepaald onderwerp.

Het toevoegen van rich snippets niet om een hogere ranking te krijgen: ze worden toegevoegd aan het zoekresultaat met dezelfde ranking. Waarom zou je deze dan graag willen? Met de extra toevoegingen valt je advertentie extra op tussen de standaard zoekresultaten. Dit is zeker gewenst, omdat dit ook CTR verhogend werkt. Er leiden dus meerdere wegen naar Rome als het gaat om meer naar je website trekken met organische zoekresultaten.

Rich snippets moeten niet verward worden met featured snippets. Featured snippets (zie onderstaande afbeelding) zijn echt uitgelichte resultaten boven de rest van de organische resultaten waarbij rich snippets enkel toevoegingen aan de normale zoekresultaten zijn. Om als featured snippet te verschijnen dient de pagina als eerste in de organische zoekresultaten te ranken. Voor rich snippets is dit niet nodig.

Rich snippets kunnen verkregen worden door het toevoegen van structured data aan de content op de website. Dit is waar het technische aspect komt kijken. Al lijkt de uitdrukking van rich snippets vooral met extra content gemoeid te zijn, voor de implementatie ervan moet men zich voornamelijk bezig houden met de code erachter. Alle extra informatie moet namelijk in de code moeten worden toegevoegd. Google heeft zelf een duidelijk overzicht hoe de code per snippet zou moeten worden toegevoegd. Per onderdeel is ook een tool toegevoegd waarin je je eigen gemaakte code kan checken op werkzaamheid. 

Knowledge Graph

De knowledge graph (zie onderstaande afbeelding) is een andere verrijking van de zoekresultaten. Dit blok met informatie over de zoekterm is opgebouwd met informatie vanuit verschillende databases, onder andere: Wikipedia, voorheen Google+ en andere websites die over de term schrijven. Het doel van de knowledge graph is om bezoekers snel van relevante informatie te kunnen voorzien. De informatie die in het blok gegeven wordt, kan erg verschillen per zoekterm. Voor bedrijven kunnen er onder andere openingstijden, klantenservicenummers, een logo en social profielen getoond worden.

Het is wenselijk om zelf zo veel mogelijk invloed uit te oefenen op de content in dit blok. Als je een fysieke winkel of bedrijf hebt, kan dit door een Google My Business account aan te maken en de gewenste gegevens daar in te vullen.

Daarnaast is het mogelijk om net als met de rich snippets de informatie als structured data toe te voegen aan de website. De uitleg en testing tool van deze content vind je in het zelfde overzicht van google als de rich snippets. Mocht dit lastig zijn dan kan je ook Google Search console hiervoor gebruiken.

Ten slotte kan je de contactinformatie op je website toevoegen als corporate contact met behulp van structured data. Google legt wederom uit hoe je corporate contact informatie implementeert.

Snelheid

Voor onze bezoekers willen we de laadtijd van de website zoveel mogelijk beperken. Allereerst zodat ze zo snel mogelijk alles kunnen vinden en ten tweede om irritatie te voorkomen. Door een slechte gebruikerservaring zullen bezoekers een website sneller verlaten wat op zijn beurt voor zorgt voor een verhoging van de bounce rate wat invloed uitoefent op de posities.

Daarnaast is de snelheid waarmee webpagina’s worden geladen een van de meer recente factoren in het ranking algoritme van Google. Het doel van Google is namelijk om mensen snel te voorzien van relevante pagina’s. Een pagina die snel laadt heeft bij Google een streepje voor op de websites die traag laden.

Een van de tools om de snelheid van je website eenvoudig te meten is de Pagespeed Insight tool van Google. Deze tool geeft eenvoudig de snelheid van je website aan en waar er nog verbetering mogelijk is. Zie hieronder ook het  voorbeeld uit de tool. Let er op dat je bij het testen van de snelheid verschillende soorten pagina’s van je website test, omdat deze performance verschilt per template. Pagina’s (indien van toepassing) die je zeker zou moeten testen zijn:

• Home pagina
• Categorie pagina
• Productpagina
• Cart pagina
• Contact pagina

Hieronder staan diverse punten beschreven die je als standaard kan gebruiken om je website snelheid te optimaliseren.

Comprimeren inschakelen

Indien je grote bestanden, zoals afbeeldingen, op je website hebt is het verstandig om deze te comprimeren. Ten eerste zijn afbeeldingen, als ze direct van een camera komen, doorgaans veel groter dan nodig is op een website. Ten tweede vergroot het openen van grote bestanden de laadtijd, waardoor het wenselijk is bestandgroottes te verkleinen.

Bij het comprimeren van bestanden worden de bestanden als het ware ingepakt als kleinere pakketjes. Dit kan tot op een bepaalde hoogte zonder kwaliteitsverlies. Tools om bestanden te comprimeren zijn TinyPNG of Photoshop.

Gebruik maken van caching

Om de snelheid van de website voor terugkerende bezoekers te verkleinen is het praktisch om gebruik te maken van caching. Indien browsercaching is ingeschakeld worden bestanden die bij een website horen, zoals de afbeelding, onthouden in de browser van de bezoeker. Wanneer de bezoeker de website dan opnieuw bezoekt, hoeven de bestanden niet opnieuw gedownload te worden. Wanneer er gebruik wordt gemaakt van browsercaching kan er een tijdsduur aan de caching gehangen worden (hoe lang moet de browser de bestanden opslaan) en is het noodzaak om de cache te legen bij wijzigingen in het design van de website. Browsercaching kan ingeschakeld worden door inhoudelijke regels te laten toevoegen in de .htacces.

Een geavanceerdere vorm van caching is varnish caching. Hierbij wordt de data niet opgeslagen in de browser, maar op de proxy server. In het blog van Combell wordt varnish caching uitgebreid besproken.

Afbeeldingen combineren in CSS-sprites

Als je echt sprongen wil maken in de laadtijd met behulp van het optimaliseren van je afbeeldingen, kun je kleine afbeeldingen samenvoegen in een CSS-sprite. Een CSS-sprite is als het ware een collage van de benodigde afbeeldingen, waar de pixels van de afbeeldingen naadloos op elkaar aansluiten. Waar anders de afbeeldingen een voor een opgehaald moesten worden, kan dit nu in één keer, wat veel tijd bespaart.

Om te zorgen dat de juiste afbeelding op de juiste plaats terecht komt, moet de hoogte en breedte van de benodigde afbeelding in pixels middels CSS aangegeven worden. Dit is een flinke klus voor developers, maar er kan wel veel tijdswinst mee behaald worden.

Broncode opschonen

Om de laadtijd kort te houden kijkt men naar het bestand wat men ook wel de broncode noemt. Een schoon en zo klein mogelijk bestand is het uitgangspunt. Een ander voordeel wat dit met zich meebrengt is dat het voor crawlers eenvoudiger gemaakt wordt om de content te lezen.

Hoe groter de verhouding code/content in het nadeel van de content uit valt, des te lastiger het de crawlers wordt gemaakt om de content te indexeren. Er zijn simpele werkwijzen, om de broncode te verkorten:

• Plaats JavaScript en CSS in aparte bestanden
• Vermijd overbodige code
• Plaats de belangrijkste inhoud zo hoog mogelijk

CSS

De opmaak van een website dient te geschieden in CSS (Cascading Style Sheets). Vaak staat de styling code binnen de broncode van de webpagina zelf (ook wel inline genoemd). Hierdoor wordt de broncode onnodig lang. Door het gebruik van stylesheets is de content gescheiden van de opmaak van de website. Hierdoor ontstaat een schonere broncode en  is de website meer flexibel (printversie, responsive design).

Het voordeel hiervan is dat je niet elk element binnen de broncode moet stylen, maar dat je dit in afzonderlijke bestanden kan doen: een zogenaamde stylesheet. Hierdoor blijft de broncode van de effectieve pagina beperkt.

JavaScript

In tegenstelling tot vroeger kan JavaScript al beter geïndexeerd worden door de zoekmachines. Echter zijn er nog steeds veel problemen met de indexering van links. Hierbij wordt linkwaarde niet doorgegeven naar de verwijzende pagina indien de links in JavaScript zijn geplaatst. Links in JavaScript kunnen dus nog problemen geven.

Waar het gebruik van JavaScript ook nog een invloed kan hebben, is op de hoeveelheid broncode. Net zoals bij CSS kan JavaScript zowel binnen de pagina als via een extern bestand worden opgeroepen. Wanneer dit binnen de pagina zelf gebeurt, verhoogt de hoeveelheid code. Dit is uiteraard niet de bedoeling.

Het laden van Javascript kost veel tijd. Om kostbare tijd te winnen is het mogelijk alleen de hoeveelheid Javascript die noodzakelijk is om de pagina weer te kunnen geven direct te laden en het laden van niet-essentiële onderdelen pas te laten laden als de pagina al geladen is. Een kanttekening die gemaakt moet worden is dat dit zeer intensief is voor de developers waarbij misschien maar enkele milliseconden tijdswinst wordt gemaakt.

Enkele vuistregels voor CSS en JavasScript:

• Plaats CSS en JavaScript in aparte bestanden en niet in de broncode
• Sluit  de mappen waarin de CSS of JavaScript documenten staan niet uit in de robots.txt file
• Zorg dat CSS en JavaScript zijn verkleind (‘minified’), dit verkort de laadtijd van de pagina
• Verwijder CSS en JavaScript code welke niet door de website wordt gebruikt

Het meeste resultaat wordt uiteraard behaald door bovenstaande mogelijkheden te combineren: bijvoorbeeld afbeeldingen in CSS-sprites te combineren met browsercaching, waarbij maar een keer een pakket afbeeldingen opgehaald hoeft te worden.

Hopelijk hebben we je met bovenstaande uitleg een stukje verder kunnen helpen met het optimaliseren van de technische SEO van jouw website. Heb je nog vragen of loop je tegen een ander probleem aan? Kijk dan eens hoe wij jou kunnen helpen met je technische zoekmachine optimalisatie.