Content Optimalisatie

Zoekmachine optimalisatie deel 3: Content

We zijn aangekomen bij deel 3 van de zoekmachine optimalisatie reeks en deze keer gaan we uitleggen hoe webpage content maximaal geoptimaliseerd kan worden voor zoekmachines (en mensen). Want zonder een gestroomlijnde, snel ladende en gebruikersvriendelijke webpagina zullen Google en bezoekers wegblijven. Waar wil jij meer informatie over weten om de content op een website te verbeteren?

Paginasnelheid Opbouw van een webpagina
Gebruiksvriendelijkheid Mobiele gebruiksvriendelijkheid
Plaatjes optimaliseren CSS en Javascript
Leverage browser caching


De content optimalisatie

De optimalisatie van content is voor een groot deel vanzelfsprekend maar toch zijn er enkele aandachtspunten die belangrijk zijn om te implementeren. Hiermee verhoog je namelijk de kans op topposities in de SERPs van Google en andere zoekmachines. We zullen de onderwerpen pagespeed, paginaopbouw, plaatjes, usability, inline codes bespreken.

De paginasnelheid van een webpage

De paginasnelheid van een website of specifieke wegpage hangt af van verschillende factoren zoals server snelheid, above-the-fold content, inline css, plaatjes, plugins et cetera, eigenlijk alles wat op de pagina ingeladen moet worden. Niemand wil lang wachten tot een website geladen is en Google dus ook niet. Een lange laadtijd en slome pagina vol codetaal werkt negatief SEO en zal ten kosten gaan van de topposities in SERPs. De oplossing is simpel want veel componenten die een website traag maken kun je zonder codes of al te veel moeite oplossen. Om te beginnen kan je via de Google PageSpeed Insights tool de snelheid van een website meten.

Pagina snelheid meten

Hierboven zijn de resultaten van onze website te weergegeven. De pagespeed score voor desktop view is op dit moment 77/100 van Mooji.nl, dit lijkt weinig maar toch krijgen we een 7,7 met een zeer grote website. Direct onder de score zie een oranje uitroepteken met de tekst “Consider Fixing” staan. Deze aandachtspunten kan je allemaal openklappen (zoals wij hebben gedaan bij “Reduce server response time”) en Google zal proberen een quick fix aan te bieden. Omdat wij een slome (vooral goedkope, als echte Nederlanders) server gebruiken is dat één van onze top fixes die de paginasnelheid moet verhogen. Andere veel voorkomende componenten die een website sloom maken zijn grote plaatjes (Optimize images), widgets of plugins die externe data gebruiken, teveel JavaScript boven de fold (komt ook vaak door plugins), browser caching en inline CSS opmaak. De oplossing? Plaatjes klein maken, widgets en plugins vermijden of iframes gebruiken, browser caching toepassen en alleen CSS in de styles.css gebruiken. Klinkt makkelijk toch? We leggen hieronder een aantal quick pagespeed fixes uit.

De opbouw van een pagina

Tekst, plaatje, plugin, tekst, reclame, plaatje, tekst, lastig, lastig wat is nu de beste opbouw voor een pagina? Google wil graag eerst tekst zien, daarna een plaatje en daarna weer tekst, plaatje et cetera. Daarnaast het liefste een hoofdmenu links of bovenin en widgets aan de rechterkant. Dit is niet altijd het mooiste want zoals je kan zien hebben wij gekozen om te openen met een plaatje, want zoveel invloed heeft deze volgorde niet en de widgets/reclame aan de linkerkant. Wat wel veel invloed heeft is dat er minimaal 500/600 woorden leesbare en leuke content op een webpagina moet staan, in het verleden werd 300 woorden gehanteerd maar dit werkt niet meer effectief. Deze hoeveelheid content zorgt ervoor dat de pagina niet op een keyword spampagina gaat lijken waardoor de kans groot is dat Google hem sneller omhoog plaatst in SERPs.

Gebruiksvriendelijkheid (usability) van de content

Google hecht veel waarde aan de gebruikersvriendelijkheid van website content omdat informatie voor gebruikers gemakkelijk en snel te vinden moet zijn. Er is veel onderzoek naar de positionering en indeling van websites gedaan waaruit bijvoorbeeld voort is gekomen dat een hoofdmenu links of bovenaan de website het meest effectief is. Dit helpt gebruikers snel te navigeren naar de pagina die ze zoeken. Daarnaast lezen Westerse (Nederlanders) gebruikers altijd van links naar rechts en van boven naar beneden. Conclusie, zet de belangrijkste content (zie ook keywords in deel 1: basic SEO) in de eerste alinea en zorg voor een goede interne linkstructuur (zie zoekmachine optimalisatie deel 2: Links). Dit helpt zoekmachines en bezoekers makkelijk te navigeren door de website wat ten goede komt voor de content optimalisatie.

Mobiele gebruiksvriendelijkheid

Mobiele gebruiksvriendelijkheid

Tegenwoordig heeft (bijna) iedereen in Nederland een smartphone, tablet of ander mobiel apparaat om daarmee elk moment het Internet te kunnen raadplegen. In 2014 heeft Google door TNS een onderzoek (Connected Consumer) laten uitvoeren waaruit blijkt dat van de Nederlanders 65% een smartphone, 76% een laptop, 51% een tablet en 17% een E-reader heeft. Daarnaast zijn er gemiddeld 3.6 verschillende apparaten per huishouden verbonden met het internet. Wil je meer resultaten van dit onderzoek bekijken dan kan je hier de hand-out van het Conncted Consumer onderzoek vinden.

Mobiel gebruik Nederland

De resultaten betekenen dat Nederlanders graag op het web surfen met hun mobiel of tablet. Google weet dit en geeft daarom websites die naast hun gewone versie een mobiele versie hebben een positievere waardering in SERPs. Want de mobiele website versie verhoogt de gebruikservaring op tablets en smartphones waardoor de gebruiker “again” snel en effectief informatie kan vinden.

Tip voor mobiele gebruiksvriendelijkheid: Bijna alle nieuwe WordPress thema’s worden standaard geleverd met een functionele mobile website versie!

Pagespeed

Foto’s en plaatjes optimaliseren


Iedereen kent het wel een prachtige website met gigantische foto’s/plaatjes die een half uur moet laden. Dit zorgt vaak voor irritatie bij Google en gebruikers omdat niks zo erg is als wachten. Oplossing? Verklein de plaatjes/foto’s tot het juiste formaat. De gemiddelde resolutie van een beeldscherm is tegenwoordig 1366×768 of 1920×1080 pixels zoals w3school laat zien in zijn browser Display statistics.

Een plaatje/foto hoeft daarom voor een fullscreen weergave niet groter te zijn dan 1920×1080. Een fototoestel met 12 megapixels maakt al snel foto’s met een resolutie van 4256×2848. Gebruik je de volledige foto/plaatje op de website dan kan de gebruiker mooi inzoomen maar kost het wel een eeuwigheid om de webpagina te laden. Conclusie; verkleinen maar!

Tip 1 extra kleine bestandsfile: Met PhotoShop (of gratis online picture tools) kan een foto/plaatje in PNG of JPG/JPEG formaat worden opgeslagen, dit kan veel schelen in de bestandsgrote!

Bestandfile aanpassenTip 2 nog kleinere bestandsfile: Sla de foto/plaatje op als JPEG met de knop “save for web & devices”. Dan krijg je een extra optie om de kwaliteit van een plaatje te verlagen van 100% naar bijvoorbeeld 70/80%. Dit scheelt vaak een hoop KB’s of MB’s maar past wel de scherpheid van de foto negatief aan natuurlijk.

CSS en JavaScript


Voorkom ten alle tijden het gebruik van CSS en/of externe JavaScript inline. Dit wil zeggen dat je tussen de tekst van de pagina geen extra CSS opmaak codes moet toevoegen. Dit hoeft ook niet want daarvoor heeft elke website tegenwoordig een mooie Styles.css file. Daarnaast is het niet handig om externe JavaScript files te laden omdat je dan afhankelijk bent van een andere server of bestandfile. Dit vertraagt het laadproces en zal resulteren in een lagere pagespeed, ook kan deze server offline/down zijn waardoor de zoekmachine meerdere malen gaat proberen om de file op te halen (vertraagd het laadproces nog meer). Bij widgets is er soms de keuze om te kiezen voor Html Code, JavaScript, Ajax of iframe. Kies dan altijd voor iframe aangezien je hiermee geen pagespeed verliest en ook geen linkwaarde naar een externe website. Een goed voorbeeld hiervan zijn de sociale media Like buttons van Facebook.

Leverage browser caching


Google wil graag dat er een verloop datum of maximale leeftijd komt te staan op de cached (opgeslagen) files van de website. Hierdoor gaat de laadtijd van de pagina aanzienlijk vooruit omdat sommige bestanden al bij een eerder website bezoek geladen zijn. Door een maximale opslagtijd aan de data te geven zal er geen probleem ontstaan als er bijvoorbeeld content aangepast of bijgewerkt. Om leverage browser caching toe te passen kan de volgende code rechtstreeks in de .Htacces geplakt worden;

Het tijdstermijn kan je veranderen naar bijvoorbeeld “day”, “month” of “year”. Dit geeft aan hoe lang de bestanden gecached blijven.

Content en usability optimaal

Wanneer de balans tussen de content en usability van een website optimaal is zullen zoekmachines in SERPs de voorkeur geven aan jouw website tegen over een slecht navigeerbare en langzame website. Daarnaast ervaren gebruikers minder hinder van laadtijd en is het mogelijk om sneller te navigeren door wat het vinden van informatie versoepelt. Dit is ook één van de kernwaardes van Google het vinden van de juiste informatie zo snel mogelijk.

Zoekmachine optimalisatie deel 3: Content
4.3 (86.67%) 3 votes