Skip to main content

Webteksten opmaken en vormgeven

Aangepast op: 26 jan, 2024

Plaats jij al je teksten als een grote lap tekst op je website? Tijd voor verandering. Hiërarchie in een webpagina is belangrijk. Voor SEO, voor je lezer en voor de toegankelijkheid.

Optimaliseren van je blog gaat over het zo optimaal neerzetten van je tekst. In combinatie met afbeeldingen en kleurvlakken. En onder water door de html. Door het juiste gebruik van je editor (Gutenberg in de meeste gevallen) gaat dit vanzelf goed. Je hoeft geen code te leren.

De Google crawler die pagina’s indexeert kan alleen maar de html zien. Vandaar dat je kopjes niet maakt door de tekst bold te maken maar kies je voor een h2 of h3. De titel die je in WordPress invoert is meestal de h1, als dit tenminste niet door de website bouwer is aangepast. Bekijk de video, die maakt het duidelijker.

Kopjes en paragrafen in een WordPress website

Opbouw / leesbaarheid van een tekst

Zorg voor een optimale opbouw van de tekst. Dat betekend dat er in de kop en eerste alinea te lezen is waar je tekst over gaat. In de hoofdtekst ga je diepte in. Zorg dat alle informatie er in staat en niet nog meer vragen oproept. Je sluit vervolgens af met een samenvatting en of conclusie. En vergeet vooral de call-to-action niet. Een tekstschrijver kan je hier alles over leren bijvoorbeeld Anne >>
Of Rutger Steenbergen >>

Wat is het belangrijkste in je tekst? En ondersteund de opbouw van de tekst dit ook?

Maak een tekst aantrekkelijk door afbeeldingen er bij te plaatsen. Is de afbeelding zuiver decoratief? Dan vul je geen alt tekst in. Deze wordt namelijk opgelezen door screenreaders, wel fijn als deze achterwege kan blijven als deze niks toevoegt.

In je website kan je op meerdere manieren en lagen op de leesbaarheid letten. In je taalgebruik, in je woordkeuze en lengte van zinnen. Maar ook in de opbouw en layout van je pagina.

Het doel van dit blog is om je inzicht te geven op welke manier je een website toegankelijker kan maken. Als je eenmaal door hebt waar je op moet letten is het goed om jezelf aan te leren om dit consequent te doen.

Ik vind mezelf geen expert op dit gebied. Ik ben wel webdesigner en vormgever en ken de tools die je moet gebruiken. Daarom kaart ik kort aan waar je op moet letten. Wil je hier serieus mee bezig dan kan ik je deze twee websites aanraden:

  1. De internet academie – een website vol met tips en trainingen over internetonderwerpen
  2. Accessibility – website van stichting Accessibility, onderdeel van Bartimeus.

Begrijpelijke teksten

Er zijn heel veel mensen in Nederland die moeite hebben met lezen. Vermijd vaktermen of leg ze uit. Gebruik korte zinnen en simpele woorden. Elke lezer is hier bij gebaat.

Bedenk van te voren wat het doel van je pagina is. Dit kan je doen door denkbeeldige vragen van je lezers te beantwoorden. Blijf bij het onderwerp en haal overbodige informatie eruit. Heb je veel te vertellen? Bedenk of je daar een ander blog mee kan vullen.

Structureer je tekst

Zorg je dat het belangrijkste wat je wilt vertellen, bovenin staat. Heb je een call-to-action, zet deze onder de leadtekst, deze legt de titel van je artikel uit.

Daarna diep je jouw onderwerp uit in korte alinea’s die je voorziet van kopteksten. In een paragraaf maak je gebruik van korte alinea’s met genoeg witruimte er tussen. Witruimte zorgt ook weer voor meer rust.

Wees spaarzaam in het vetgedrukt en schuingedrukt maken van woorden. Er zijn lezers voor wie dit juist heel onrustig is.

HTML elementen voor kopteksten

Om een kopje te maken kies je in je Gutenberg editor* voor koptekst. De editor in je WordPress website bied de mogelijkheid om een kopje te maken. Je kan kiezen voor een h1, h2, h3 etc. De h1 is voorbehouden aan de titel van je bericht of pagina. Alle kopjes daaronder maak je aan in een logische hiërarchie. Ga niet je teksten vetgedrukt maken en een paar punten groter om een kopje aan te geven.

Hieronder zie je een voorbeeld van de code die een schermlezer toont. Hij leest dan bijvoorbeeld op kop h2, in 3 stappen je blogfunctie aanpassen.

Je kiest voor een kopje boven de alinea een h2 en als je dat gedeelte van de tekst nog verder wil indelen een h3 als subkop.

Opsommingen en lijstjes

Het gebruik van geordende of genummerde lijstjes zijn aan te raden omdat deze overzichtelijk zijn en makkelijk te lezen. Beperk je in het aantal woorden en items in een lijstje.

Gebruik het opsommings element uit je editor en ga niet zelf een lijstje maken. Deze heet in Gutenberg “Lijst”

Geef in de linktekst aan waar je naartoe navigeert

Je kan op meerdere manieren een link in je website zetten. Op een stuk tekst, op een button, op een titel of een afbeelding.

Er wordt bij een audit gekeken naar linkdoel (wordt er duidelijk omschreven waar je heen gaat) en linktekst (onderstreepte tekst waar de link op staat). Het linkdoel kan ook omschreven worden boven de link tekst. Een linktekst zoals lees verder kan je gebruiken. Mits de omliggende context ook duidelijk maakt waar je naar toe gaat, als je er op klikt.

De link moet er anders uit zien dan de tekst er om heen. Om deze reden zijn linkjes vaak onderstreept. In veel gevallen zie je nog dat ze een andere kleur hebben en vetgedrukt zijn. Dit is niet heel onderscheidend als je dit ook met andere teksten doet waar geen link op zit.

Gebruik een omschrijvende tekst en onderstreep je linkjes. Vaak zie je er alleen een kleur wordt toegepast, waardoor ze te weinig opvallen als link.

In de CSS code van je thema kan je dit aanpassen als dit nog niet het geval is.

In principe is een button een knop waarmee je een actie uitvoert. Bijvoorbeeld ‘verzend het formulier’ , download het stappenplan’ of ‘login’. Een button kun je bij sommige WordPress thema’s ook een tekst-alternatief of aria-label meegeven. Mensen die een schermlezer gebruiken krijg dan meer uitleg.

Wil je iemand naar een ander deel van je website sturen? Dan gebruik je een tekstlink.

Google ranking is er ook bij gebaat. Hoe? De crawlers kijken ook naar de context waarbinnen een link staat.

In onderstaand voorbeeld hebben we er voor gekozen om de afbeeldingen die decoratief zijn geen ALT tekst mee te geven. De titel is ook de link naar het hele blog. Hiermee vermijd je dat je de standaard ‘lees verder’ link die WordPress plaats in het blogoverzicht. Uiteraard moet de titel wel een duidelijk linkdoel hebben. Hier ontbreekt een alinea onder de titel, waarin je uitlegt wat hier te zien is.

*De Gutenberg editor zit standaard in WordPress sinds versie 5.0 / eind 2018. Ik raad je aan om te werken met deze editor en niet meer met de klassieke. Deze is gedateerd en bied niet de nieuwe mogelijkheden voor een mooiere opmaak van je berichten en pagina’s

Visuele tools om je teksten op te maken

Dit kan je doen door in je editor te kiezen om je tekst:

  • vet maken
  • schuin/ italic neer te zetten.
  • opsommingen
  • Buttons / knoppen
  • Een quote tussendoor op een gekleurd vlak of iets groter (maar niet met een h2 want het is geen kopje)

Maaruh niet allemaal tegelijk he.

Je kan spelen met tekstgrootte en kleuren, maar hier geld ook, doe dit met mate. En check het contrast. Tekstkaders en panels met afbeeldingen, tekst en een link zijn ook manieren om een enorme lap tekst op te breken in korte leesbare stukjes.

Toegankelijkheid

Een website moet toegankelijk zijn iedereen. Dat doe je door rekening te houden in het gebruik van kleuren, fontgroottes en gebruik van officiële h1, h2, h3 heading. Je gebruikt geen ellenlange zinnen of moeilijke woorden. Alt teksten op afbeeldingen die ondersteunend zijn aan de tekst. Linkjes met genoeg ruimte er om heen zodat je niet twee linkjes met je vinger aanklikt op mobiel en tablet.

De meeste aanpassingen hiervoor worden gedaan met CSS code. Wat vaak al goed is ingesteld door het WordPress thema. Maar als je customizen, dan heb je wellicht de fontgrootte en kleuren aangepast, dus een check of jouw website genoeg contrast heeft of leesbaar is kan geen kwaad.

Schrijf je een blog bericht of een pagina dan gebruik je de teksteditor dan kan je kiezen of iets een kopje moet zijn of een paragraaf, soms kan je ook een quote kiezen. Deze worden dan voor jou achter de schermen omgezet naar een <H1>, <H2> en <p> etcetera. Je hoeft dus geen code te kunnen schrijven maar je moet wel gebruik maken van de opmaak mogelijkheden. Meer hierover in dit blog: 07 | Digitale Toegankelijkheid

Stuur je lezers naar het belangrijkste doel op de pagina

De opmaak en layout gebruik je om het kijkgedrag van een bezoeker te sturen. Je kan ook met de tekstgrootte een introtekst en platte tekst laten zien wat het belangrijkste is. Een opvallende foto of kleurvlak. De plaatsing van de call-to-action vergeet je uiteraard niet en kan je extra laten opvallen door het op een kleurvlak en “boven de vouw” te plaatsen.

Waarom belangrijk voor SEO

De crawler/robot die pagina’s indexeert en doorloopt, kan alleen maar door de technische kant van de pagina gaan. Deze ziet geen tekstvlakken en kleuren ook kijkt deze niet naar de grote van de tekst. Maar deze kijkt wel naar de opbouw van een pagina. Deze wordt herkend door het gebruik van de juiste html tags zoals opsommingen, kopjes en paragrafen. Ook leest deze de alt en titels van afbeeldingen en niet te vergeten en heel belangrijk interne en extern linkjes. Wil je goed gevonden worden dan moet Google je pagina ook kunnen aanmerken als waardevolle content.

Google wil de beste informatie koppelen aan zoekopdrachten. Heb jij een goed inhoudelijk stuk maar vergeet je deze goed op te bouwen met kopjes en paragrafen. Goede doorlinks en interne linkjes? Dan kan Google een andere website als beter serveren aan de zoeker. Dat zou wel erg jammer zijn van al je werk.

Meer klanten door goede content?

Lees mee over Contentmarketing en vind uit of het een marketingstrategie is die jij wilt gebruiken:

Behoefte om dit samen op te pakken?

Met regelmaat organiseer ik samen-doe-sessies maar een 1-op-1 sessie is ook mogelijk. Neem contact met me om uit te vinden hoe ik jou kan helpen.

studio@sandragortemaker.nl | 06 531 90 681

Lees meer over het onderwerp: ,

Schrijf een online marketingplan

online marketing studio sandra gortemaker

Doe je mee met de online training vol praktische oefeningen en de aansluitende samen doe sessie?

1-op-1 kan ook.


Lees meer blogs over bouwen met WordPress


Geef een reactie

Het e-mailadres wordt niet gepubliceerd. Vereiste velden zijn gemarkeerd met *

Deze site gebruikt Akismet om spam te verminderen. Bekijk hoe je reactie-gegevens worden verwerkt.