!Bewust sociaal op web
blog

Crawlspider + lezer beide blij, kan dat?

Geplaatst op 16 september, 2018 / 12 min leestijd

Social selling; jezelf presenteren als expert door zoveel mogelijk unieke content op social media en je website te delen. Dat betekent dus dat je website goed vindbaar moet zijn en op een hoge positie staat in de Google zoeklijsten. Maar kan dat ook met een voor de lezer aantrekkelijke website? Aan de hand van mijn eigen website probeer ik daar achter te komen.

Voor social selling is een hoge plek van je website in de Google's zoeklijst handig, als je gevonden wilt worden. Dus een mobielvriendelijke site, die sneller dan 3 sec laadt op 3G, met unieke content. De H1 kop moet “crawlspider” vriendelijk zijn en tegelijkertijd pakkend voor de lezer. Bestaande uit zes of zeven woorden met minimaal een sleutelwoord uit de metadescription, die max. 160 tekens is. Dit alles dus al metend en passend boven de vouw, het eerst zichtbare deel, van een mobiel. Bij deze dan.

Volgens Neil Patel

Het merendeel van bovenstaande beweringen komt van Neil Patel, die door Wall street journal een topbeinvloeder op het web genoemd word en door Forbes een van de top 10 marketeers. Kijk vooral eens op deze website over SEO van Neil Patel. Ik kwam onder andere op hem doordat mijn website www.bewustsociaalopweb.nl op dit moment volgens de website voor het testen van de laadsnelheid van Google een laadtijd heeft van 4s op 3G. Diezelfde website zegt hierover dat ik hierdoor 10% bezoekers verlies.

Dat was dus een reden om er toch eens in te duiken. Ik ben op het internet dus naar allerlei SEO waarheden en tips gaan zoeken om te kijken of ik mijn website überhaupt sneller kan krijgen wat laadtijd betreft. In mijn volgende blog probeer ik dat uit te vinden. Mijn zoektocht naar de ideaal hoog in de zoeklijsten van Google scorende en goed vindbare website leidt verder langs websites als die van Frankwatching en vavry. Neil Patel beweert dat een website zowel optimaal voor Google als voor de bezoeker moet zijn.

Omdat ik social selling belangrijk vind probeer ik dit letterlijk op het volgende blog toe te passen en te kijken op welke punten ik mijn website nog hoger bij Google kan krijgen. Dat betekent meteen dat mijn website ook snel op een 3G netwerk moet laden en mobielvriendelijk moet zijn. Ik ervaar hierbij hoe het is om te puzzelen met woorden en de posities van inhoud. Waar heb ik invloed op en waar niet. Een bewuste afweging van wat je wel en wat je niet op je website plaatst wordt hierdoor noodzakelijk. Mijn blogs veranderen van nu af aan mee.

test my site with google Afbeelding 1: screenshot testrepport van de laadsnelheid.

Neil Patel zegt dus eigenlijk dat als je goed gevonden wilt worden, je iets interessant te bieden moet hebben voor zowel de bezoeker van je website als de Googlebot. Voor de bezoeker omdat je wilt, dat deze zo lang mogelijk op je website blijft, waardoor je bounce rate zo laag mogelijk is. De bouncerate is een maat om aan te geven hoe goed je website bezocht wordt. Dit is een enkele verblijfsduur van een bezoeker op je website gedeeld door alle verblijfsuren (zie hiervoor: de website van Google analytics support). Bovendien wil je dat jouw bezoekers veel naar je andere pagina´s doorklikken.

Voor de Googlebot geldt dit, omdat deze jouw content volgens een ingewikkelde algoritme beoordeeld, waardoor je hoog in Google´s zoeklijsten terecht komt en dus weer eerder door de bezoeker gevonden wordt. Mobielvriendelijkheid en snel laden op een 3G netwerk zijn andere bepalende factoren hiervoor. En zo hangt alles samen.

Mobiel eerste contactpunt bezoeker

Omdat het merendeel van de mensen tegenwoordig eerder op de mobiel naar een website kijkt dan op een desktop, is de vouw van je mobiel dus je eerste contactpunt met je mogelijke bezoeker. Als de daar zichtbare inhoud voldoet aan mobielvriendelijkheid, sneller laad dan 3 seconde en ook nog eens interessant is om te lezen, heb je wellicht een nieuwe fan en is ook de crawlspider happy. Natuurlijk moet de rest van je website wat laadtijd betreft naadloos aansluiten bij de vouw. Je wilt geen schokkende overgangen, waardoor je website minder aantrekkelijk wordt. Het belangrijkste van je blog moet dus hier neergezet worden.

En daarmee kom ik dan meteen bij het volgende. Een webpagina bestaat uit meer dan alleen de content, de tekst, het HTML. Je wilt ook dat je bezoeker de website mooi vindt, om te blijven kijken. Een website is dus opgemaakt om er aantrekkelijk uit te zien. Een website bevat foto´s, pop-ups, formulieren, alertboxen etc. Dat maakt de website spannend of functioneel. De opmaak wordt bepaald door de CCS-files, de toeters, de bellen de popups en de sociaal media buttons etc. door Javascript. Het doorsturen, opslaan en opzoeken van stukjes tekst, dus bijvoorbeeld de formulieren, door PHP. Al deze elementen hebben invloed op de laadtijd.

Website optimalisatie aanbevelingen

Alle webtools zoals pagesights, gtmetrix en pingdom geven aanbevelingen, die met deze laadtijd te maken hebben. Wanneer een browser een webpagina ophaalt, maakt deze contact met de server, dit heet de DNS lookup. Het maken van de verbinding kost tijd, de SSL encryptie voor de veiligheid kost laadtijd. Daarna vindt de download plaats. Grotere content kost meer laadtijd. Vervolgens heeft de browser tijd nodig om de inhoud te verwerken en weer te geven. Het soort weergaven van aantal verzoeken en verbindingen, die gemaakt moeten worden vind je in de zogenaamde watervallen. Hoe meer verzoeken hoe langer de laadtijd. Foto´s moeten geoptimaliseerd worden. Zo verkleind dat de kwaliteit hetzelfde blijft. Zie hier ook voor The Basics of Page Speed .

"screencapture van een waterfall" Afbeeling 2: een zgn. waterfall geeft het processen aan dat betrokken is bij het laden van een website.

Omdat je geen onopgemaakte witte pagina met tekst wilt hebben krijgt het CSS element voorrang. Bij het laden van Javascript stopt het laden van HTML. En grote fotobestanden houden de boel op. Het is dus belangrijk dat de tijd waarin de inhoud het eerst zichtbaar is, het kortst is. Dit heet dan de Critical rendering path. Meer daarover vind je in de eerder vermelde website van Vavry.

En zo komen we weer bij de vouw terecht. Het eerste contactpunt met je mogelijke fan. De plek waar de Googlebot bepaald of hij jouw website hoog in de Google zoeklijst plaatst. In dit blog probeer ik onder ander de tips van Neil Patel en de aanbevelingen van diverse SEO rapporten eens daadwerkelijk toe te passen. Om zo te kijken waar ik nog meer op SEO kan scoren en of het voor mij überhaupt mogelijk is om hieraan te voldoen. Doel een snelle site, die er aantrekkelijk uitziet met formulieren, sociaal emoticons en Google Analytics. Ik ben benieuwd.

Welke invloed heb ik op laadtijd optimalisatie?

Laat ik eens een aantal van zijn beweringen toepassen op dit blog. Neil Patal beweerd in How to create search engine friendly titel tags dat als je de titel van je blog zowel voor de lezer als voor de zoekmachine tegelijk schrijft, je succes kan boeken in je SEO. Dus een hoge plek in de zoekresultaten van Google. Van hem komt de bewering dat je titel tussen de zes of zeven woorden moet bevatten en maximaal 66 karakters om niet te worden afgebroken in de lijst met zoekresultaten van Google. Volgens hem lezen 6 tot 7 woorden gewoon het lekkerst in een keer.

Je metadescription mag volgens hem om dezelfde reden maar 160 karakters bevatten. Google breekt ze anders af met een “…” en dat is niet pakkend en aantrekkelijk om verder te bekijken. De titeltag moet daarnaast minimaal een sleutelwoord bevatten van je artikel. In zijn blog the step-by-step guide to writing powerful headlines gaat hij uitgebreid in op hoe je pakkende titels kunt schrijven.

Mijn blogtitel bestaat uit 6 woorden (inclusief + teken) en 40 karakters. En ik heb geprobeerd de lezers nieuwsgierigheid op te wekken voor een artikel over een hoge zoekpositie in Google`s zoeklijsten en ik wil daarbij natuurlijk een aantrekkelijke website want ik wil ook dat lezers mijn verhaal blijven doorlezen. Daarnaast heb ik mijn Galaxy S4 er eens bij gepakt. Als ik alles boven de vouw wil houden mag ik zonder de 40 karakters H1 opmaak “Crawlspider + lezer beide blij, kan dat?” nog ongeveer 555 karakters hebben. Vanaf “ Een hoge …...deze dan.” tel ik 530 tekens. Wat me nog wat ruimte geeft voor een leuke call to action button.

"de vouw van een Samsung S4" Afbeelding 3: de vouw is het zichtbare gedeelte op het scherm van een smartphone.

Om ruimte te sparen heb ik zo wie zo geen foto´s boven de vouw. Daarnaast moet de rest buiten de vouw natuurlijk naadloos aansluiten, qua laadtijd op die van de vouw om een schokkende vertoning van je website te voorkomen. Wil je snel 3G laden dan mag je volgens de regels maar een klein inline CSS stijlblok hebben en moet alle Javascript onder de vouw. Eventueel kun je het laden van de eerste foto voorrang geven ten opzichte van de rest van de foto´s verderop in je blog. Het zogenaamde defering van images (zie How to defer images).

Vaak zie je in de rapporten van websites die je laadsnelheid testen de mededing “Eliminate render-blocking JavaScript and CSS in above-the-fold content.” Mijn website heb ik opgebouwd met Bootstrap 4. Zie hiervoor mijn eerdere blog Bootsrap or not to Bootstrap ”, Bootstrap is responsive en mobile first. Wat voor een hoge positie in de Google zoeklijst natuurlijk weer een pre is. Nadeel is dat deze frameworks voor iedere toepassing geschikt moeten zijn. Hierdoor bevat de CSS en Javascript alles wat voor een mogelijke website nodig is. Het bevat dus veel ballast.

Bootstrap CSS is dus vrij groot. Gelukkig heb je bij de keuze voor CDN (content delivery network) Zie ook Wikipedia hierover wel wat vrijheid. Je kunt kiezen voor een CDN Bootstrap CSS min. Ik heb ook al artikelen gelezen waarin ze de hele Bootstrap CSS zo strippen dat alleen het voor de website nodige overblijft en deze dan inline bovenin de website zetten. Dat scheelt ook laadtijd. Bij mij gaat een klein inline CSS in de crital Rendering path dus niet op

Voor Bootstrap Javascript(Bootstrap js) geldt hetzelfde verhaal. Ik heb een Bootstrap js, een Jquery, een bibliotheek voor Javascript, voor de drop down menu's en een Popper js, ook javascript, voor de poppers, tooltips en popovers, in de website. Maar die kunnen helemaal onderaan de webpagina geplaatst worden. Verder heb ik Google Analytics, want je wilt natuurlijk je aantal bezoekers en dergelijke meten. Ik heb bij mijn informatieformulier een validatie js file nodig. Want je wilt een soepel en foutloze afhandeling van het versturen ervan. Tenslotte heb ik social media buttons. Ook Javascript. Handig omdat Google ook veel social media verkeer aanmoedigt en natuurlijk is er geen social selling zonder social media.

Het meeste andere Javascript van mij is dus third party en daar is weinig aan te optimaliseren qua laadtijd dan. Waar mogelijk plaats je het onderaan de website of pas je het async of defer toe. Bij async laadt het Javascript parallel aan HTML, bij defer pas als het HTML geladen is. Gelukkig is al mijn third party Javascript async. Een aandachtspuntje waar ik de mist in ging. Als je zoals bij mijn website de social media buttons die van mij van Add to Any van twee of drie keer op je website wilt, moet je het Javascript uit de code halen en deze eenmalig ergens onderaan plaatsen. Anders laadt de browser de code onnodig twee of drie keer in en dat kost laadtijd. Dat kan door het toevoegen van een extra stukje Javascript code of het staat op de betreffende site uitgelegd hoe het anders kan.

"de addtoany buttons op mijn website" Afbeelding 4: Add to any emicons.

Foto´s zijn groot. Meer content laadt langzamer. Mijn foto´s heb ik zoveel mogelijk geoptimaliseerd met Kraken en verkleind tot de grootst mogelijke weergave, die nodig is. Je kunt ook denken ik optimaliseer de foto´s gewoon in originele vorm. Dat is niet zo een goed idee. Het kost laadtijd omdat de responsive browser werk heeft om ze te verkleinen. Verder volg ik Neil Patal aanbeveling de "alt" attributen zoveel mogelijk te benoemen voor de sitevriendelijkheid, lees aantrekkelijkheid voor bezoeker om te blijven. Why Meta Tags Are So Important for Your Online Marketing Efforts, Ik heb overal de foto´s onder de vouw gehouden. Behalve bij de indexpagina en de webpagina over mij, staat een foto van mij.

AMP wel of niet

Vaak zie je bij webtest sites als testmysite.withgoogle.com een aanbeveling tot AMP (accelerated Mobile pages). Deze hebben als twee belangrijke kenmerken dat de pagina´s uitgeklede versie van blogs en artikelen zijn en Google deze op eigen servers cached, lees tijdelijk opslaat. Hierdoor laden deze pagina´s super snel. In De 10 principes van Accelerated Mobile Pages (AMP) kun je hierover meer lezen. AMP pages bestaan uit AMP HTML, AMP js en AMP CDN.

"Het symbool van AMP pages" Afbeelding 5: het symbool voor Accelerated Mobile Pages.

Neil Patel zegt hierover in The Definitive Guide to Accelerated Mobile Pages (AMP) Dat onderzoek van KISSmetrics uitwijst dat 40% van de mensen afhaakt als een webpagina op mobiel trager laadt dan 3 sec. En dat als je een webshop hebt je dit dus omzet kost. AMP pages worden beter gepositioneerd in Google' s zoeklijsten en laden sneller op mobiel. Hij is een groot voorstander omdat AMP pagina´s super snel laden, beter scoren in mobiele websites en betere tracking mogelijkheden hebben.

Volgens De voordelen en nadelen van AMP + casestudy, heb je door de uitgeklede versies een zeer beperkte of geen merkidentiteit. Jouw AMP pagina ziet er praktisch hetzelfde uit als de concurrenten. Ook converteren en trechteren van je bezoekers wordt moeilijker doordat je geen formulieren hebt en veel Javascript afwezig is. Op een op Frankwatching.com verschenen verkorte versie van dit blog, zegt Ties Morskate van Merkelijkheid zegt hierover “Het onderscheid is nu nog marginaal, maar stel jezelf eens de vraag: is het wel jouw bezoeker, als hij jouw echte website nooit ziet? Komt het er niet op neer dat jij jouw content simpelweg (voor niets) aan Google geeft?” Dat lijkt mij voor social selling niet echt handig. Dus ik laat AMP voorlopig even links liggen.

More better then less

In tegenstelling tot elk gemiddeld boekje over bloggen, waarin staat dat een blog juist kort en bondig en niet meer dan 600 woorden mag bevatten, zegt Neil Patel dat een blog juist meer woorden 2000 tot 2250 moet bevatten om body te hebben en dan vooral met meer unieke content. In zijn blog How Long Should Your Blog Articles Be? (With Word Counts for Every Industry) legt hij uit waarom.

Hij beweerd dat blogs over onderwerpen, waarbij meer in de diepte gegaan wordt, simpelweg niet kort kunnen zijn. Als tweede argument noemt hij dat langere blogs zich meer lenen voor scannen. De meest mensen lezen niet alles maar scannen koppen, onderkoppen en bullets. En tenslotte beweert hij dat het lezen van langere blogs tot meer voldoening leidt bij de lezer. Een korte blog kan die voldoening niet geven.

Ik zelf sluit me daarbij dus grotendeels aan. Ik zelf denk dat je een blog als volgt moet opbouwen. Een kort inleidende alinea je om de lezer te pakken. Veel onderkoppen die te samen het blog samen vatten en per onderkop een korte toelichting op het onderkop met daarin voor de echte doorgewinterde lezer links naar andere artikelen met meer achtergrond informatie. Waarmee je meteen voldoet aan een andere spelregel van Google namelijk veel links leiden tot een hogere waardenering in de Google zoeklijst. Meer hierover ook in het blog van Neil Patel Neil Patel´s Guide to Internal Linking

Uiteindelijk moet je dus een goede balans vinden tussen heel veel nuttige content en de juiste functionaliteit om een aantrekkelijke gebruiksvriendelijke website te krijgen Het blijft gewoon schaven. Je beoordeeld elke functionaliteit op verlies aan laadtijd en nut voor je website. Wees dus kritisch met wat je extra wilt plaatsen. Heb je bijvoorbeeld dat extra stukje Hubspot code of de Google tag manager wel nodig.

Of zoals geconcludeerd wordt in Technische SEO in 2018: waar begin jij met optimaliseren? Maak je website zoveel mogelijk werkend met HTML en voeg Javascript alleen toe als de website gebruiksvriendelijker wordt of er een complexe functionaliteit nodig is. Dit wordt progressive enhancement genoemd.

Verdere zoektocht naar optimalisatie

Je kunt tenslotte ook altijd nog je HTML minimaliseren, als de grootte hiervan de grootste boosdoener qua laadtijd is. Afgezien natuurlijk van fouten in de tekst, niet vriendelijk voor de bezoeker, kun je letten op nutteloze "div" atributen, commentaar regels, wit regels etc. Ook handig om te checken dat je kolommen, niet per ongeluk zo zijn opgemaakt dat de breedte ervan buiten de viewport van een mobiel valt. GZIP compressie, chache rendering noem maar op. Het blijft gewoon schaven.

Alles wat niet derde partij is valt natuurlijk te verbeteren. Mits wat je doet is om spidy te believen, gepaard gaat met een website die de bezoeker verleid met veel nuttige content. Je kunt natuurlijk ook een duurder abonnement nemen, waarbij je met minder mensen tegelijk op de server zit of waarbij extra server snelheid wordt aangeboden. Je kunt er altijd extra geld tegen aan gooien. En je hebt altijd nog je adworks advertenties en de Facebook campagnes. Een eindtest met testmysite.withgoogle.com laat zien dat ik in ieder geval de 3 sec. laadtijd haal. Nu nog afwachten en kijken of mijn schaven leidt tot een hogere postie in de Google zoeklijst. Reden om toch even mijn andere pagina´s te gaan optimaliseren. Ik heb mijn best gedaan met mijn blog van meer dan 2500 woorden.

"screencapture test my site with google" Afbeelding 6: screenshot van het testrapport met de resultaten van de laadsnelheid.

Wil je meer weten over dit onderwerp of ondersteuning, neem dan contact met me op.

Whatsapp:

telefoon:

email:

Geplaatst op: 16 september, 2018 / auteur: Iwan Koenderman;
Aangepast op: 17 maart, 2020 | Geplaatst door: !Bewust sociaal op web;

Definitie blog

Het begrip blog heeft volgens het Algemeen Nederlands Woordenboek 4 verschillende betekenissen:

1) bericht op een weblog; post op een blog

2) weblog over je eigen persoonlijke leven; blog over jezelf

3) weblog over een bedrijf; blog over een bedrijf

4) logboekachtige website of logboekachtig deel van een website waarop persoonlijke en/of zakelijke informatie over de activiteiten van een persoon of bedrijf te vinden is die regelmatig wordt ververst en aangevuld en die in omgekeerd chronologische volgorde gepresenteerd wordt, dus met het laatste nieuws bovenaan

Op deze pagina zal ik iedere maand een blog proberen te posten over een onderwerp dat een relatie heeft met het onderwerp social selling.

Website gebouwd door Iwan Koenderman © 2020