Hoeveel omzet laat jij liggen?

Doe de gratis kansenscan
Doe de gratis kansenscan

0182 - 712040

HTML tags in WordPress - content in WordPress

Content in WordPress | Semantiek & HTML

Werken aan je vindbaarheid? Vergeet dan niet je content te voorzien van HTML tags. Ontdek hier hoe!

Er zijn veel manieren om content te verwerken in WordPress. Online content creëren is meer dan beetje tekst op de website zetten. Als je dit technisch goed wilt doen en wilt werken aan je vindbaarheid, zul je jouw tekst moeten voorzien van de juiste HTML-tags. Dit noemen we ook wel het semantisch vullen van content.

 Maar wat is semantiek en welke rol heeft het met HTML. Hoe kun je ervoor zorgen dat de content in WordPress semantisch is ingevuld? Welke voordelen zijn er met het semantisch invullen van content. Ontdek de antwoorden op deze vragen in dit artikel!

Wat is de betekenis van semantiek?

Semantiek betekent volgens Dictionary.com; de betekenis, of een interpretatie van de betekenis, van een woord, teken, zin, enzovoorts.

Dit heeft in de taalkunde een grote rol, maar in dit artikel gaan we in op semantiek op je website

Maar wat is semantiek op een website dan? Met semantiek geef je betekenis aan elementen op je website. Dit doe je met een stukje code; een HTML-tag.

Door de juiste HTML-tag bij je (tekst)elementen te voegen, maak je technisch duidelijk om wat voor element het gaat. Bijvoorbeeld een koptekst of afbeelding.

Als je semantiek niet (voldoende) toepast op je website, is het onder andere voor zoekmachines onduidelijk hoe je pagina is opgebouwd. En dat maakt het lastiger voor algoritmes, zoals die van Google, om jouw pagina goed te begrijpen (indexeren).

Een aantal voordelen van semantiek

  • Zoekmachines zullen je pagina beter kunnen begrijpen en interpreteren, wat een positieve invloed kan hebben op je vindbaarheid in zoekresultaten.
  • Toegankelijkheid: Een schermlezer (een softwareprogramma die de tekst van het computerscherm voorleest) kan het gebruiken als wegwijzer om visueel gehandicapte gebruikers te helpen bij het navigeren op een pagina
  • Door gebruik te maken van de juiste semantische elementen, wordt ook styling overal hetzelfde toegepast. Zo voorkom je bijvoorbeeld dat tussenkoppen er op verschillende pagina’s er verschillend uitzien. Denk aan bold of h2.

Semantiek & HTML

Dus hoe werkt semantiek met HTML? Bij HTML zijn er rond de 100 semantische elementen beschikbaar. De semantiek elementen kunnen onderverdeeld worden in 4 categorieën:

Pagina structuur tags:

De tags voor de structuur van een pagina (bijvoorbeeld een nieuwsbericht), maar ook de website zelf. Dit zijn tags als <header>, <footer>, <section> en <main>.

Media type tags

Dit zijn tags die je gebruikt voor het identificeren van het soort media wat wordt gebruikt. Binnen HTML5 zijn dit er 3. Namelijk, <audio>, <video> en <picture>.

Correlatie tags

Correlatie tags gebruik je om een samenhang tussen meerdere elementen aan te geven. De meest voorkomende in content zijn:

  • Unorderd lists, <ul> in code taal
  • Orded lists, <ol> in code taal

<ul> is een stukje code die wordt gebruikt om een lijst te weergeven die niet op een bepaalde volgorde hoeft. Of wel, bullet points.

<ol> (orded lists) wordt daarentegen gebruikt voor een lijst die wel een bepaalde volgorde dient te hebben. Dus een nummering.

Tekstuele tags

Deze tags worden gebruikt voor het invullen van de tekst. Denk hierbij aan dikgedrukt, schuingedrukt en titels en tussenkoppen. Een aantal voorbeelden van tekstuele tags in WordPress zijn:

<h1>

<h2>

<strong>

<blockquote>

SEO in WordPress

Hartstikke leuk allemaal, maar hoe kun jij hier je voordeel uit halen? Door de HTML tags juist te gebruiken, maak je het voor Google makkelijker de structuur van de pagina te begrijpen. En dat zorgt ervoor dat je beter vindbaar kunt worden ?. Google zegt hier zelf over: “Als deze zoekwoorden op de pagina voorkomen of als ze voorkomen in de titel of hoofdtekst, is het waarschijnlijker dat de informatie relevant is”.

Wij zien nog vaak gebeuren dat tussenkoppen in WordPress dikgedrukt worden gemaakt, in plaats van de juiste tag h2, h3, h4, etc. Hierdoor ziet het algoritme dit als normale tekst en zal het algoritme geen extra waarde toekennen aan de tussenkoppen ten opzichte van de rest van de paragraven. Door een h2, h3, h4, etc., voor de tussenkop te gebruiken in de tekst, laat je aan het zoekalgoritme weten; Hé! Dit is belangrijk. In die tussenkoppen wil je dus ook relevante zoekwoorden verwerken. Welke woorden interessant zijn voor jou om op in te zetten, kun je achterhalen met een zoekwoordenonderzoek.

Jouw content semantisch maken

Het leuke is, dit kun je zelf makkelijk doen (zonder te coderen?)! Omdat nog niet iedere WordPress omgeving de nieuwste editor heeft, leggen wij het op twee manieren uit. Via de klassieke tekst-editor en via de Gutenberg Block Editor.

Content vullen in de klassieke visuele tekst-editor

Zoals de naam al zegt, is de klassieke tekst-editor de oudere versie van het invullen van content. Als jouw WordPress nog niet is geüpdatet ziet een nieuw bericht er op de volgende manier uit:

Content vullen in de klassieke visuele tekst-editor
Afbeelding klassieke visuele tekst-editor

Check bij het maken van een nieuw bericht of je wel in de visuele tekst-editor zit. Bij de andere tabblad is het nodig om de code uit te schrijven. Dit kun je bij het rood omcirkelde in de afbeelding zien.

Om de juiste semantische elementen te gebruiken voor de tussenkoppen en paragraven, kijk je bij het dropdown menu. Het dropdown menu kun je vinden bij het oranje omcirkelde. Kies hier niet meer voor Heading 1, dit is namelijk de titel en gebruik verder niet in de tekst. Die heb je – als het goed is – al in het veld bovenaan ingevoerd. Voor het maken van opsommingen en nummering kun je gebruik maken van het groen omcirkelde in de afbeelding.

Content vullen in de Gutenberg Block Editor

Maak je al gebruik van de Gutenberg Block Editor? Dan zorg je zo voor de juiste semantiek met HTML-tags:

Content vullen in de Gutenberg Block Editor
Afbeelding Gutenberg Block Editor

Je kunt semantische elementen toevoegen je via de plustekentjes. Deze vind je bovenin de pagina, maar popt ook op in de tekst zelf. Zie de groene cirkels in de afbeelding.

Bij de blauwe cirkels zie je de elementen die je vaak nodig zult hebben. Hier zie je de paragraaf, heading en lijst (opsomming/nummering). Hier geldt ook: H1 is niet meer nodig. Dit is namelijk de titel en die kun je bovenin al invullen (titel toevoegen).

Leuk om te weten; de Gutenberg Block Editor is nog vol in ontwikkeling. Zo hebben wij wel eerder over nieuwe ontwikkelingen over de editor gerapporteerd.

Bonus tips voor het semantisch maken van jouw webpagina’s

Waar kun je nog meer aan denken bij het semantisch maken van jouw webpagina’s?

  • Gebruik de tag <ul> als je een opsomming wilt maken, gebruik niet alleen -. Dan komt er alleen een streepje te staan en herkent de zoekmachine dit niet.
  • Gebruik dus de tag <h2>, <h3>, <h4>, etc, als je gebruik maakt van tussenkoppen en niet alleen het woord/zin dik gedrukt maken.
  • Voorzie al je afbeeldingen van alt en title tags, de zoekmachine kan namelijk niet de afbeelding lezen als er geen code staat. Zo laat je de zoekmachine weten over welk onderwerp de afbeelding gaat.
  • Als je een quote maakt, is het ook belangrijk om de blockquote van WordPress te gebruiken. Hiermee geef je meer spice aan jouw pagina en valt dit ook op in de zoekmachine.

Meer halen uit je WordPress website?

Vertel dan onze WordPress specialist hoe hij kan helpen! Neem contact op voor vragen of bekijk direct de mogelijkheden:

Bekijk de mogelijkheden

Kijken kan altijd ?

Of neem contact op

Niels Pilon

WordPress Specialist

0182 – 71 20 40
niels@fris.online

Pak je kans om met ons samen te werken met beide handen aan. Dan laten we jouw onderneming groeien met als doel: meer klanten die wat opleveren.

Contact

0182 - 71 20 40

info@fris.online

Tielweg 6e

2803 PK Gouda

Algemene voorwaarden | Privacy verklaring | Cookie statement