Semantisch HTML - codering & markup 's - Semantiek

Minstens zo belangrijk als de opbouw en de layout van een website is de manier waarop uw webpagina's \(sem\antisch) gecodeerd zijn.

Indexering van een website door zoekrobots kan alleen kans van slagen hebben indien de zoekrobots uw pagina's begrijpen. Semantisch HTML zorgt ervoor dat je code overzichtelijk blijft voor uw belangrijkste bezoeker, Google.

Wat betekent semantiek

"De semantiek of betekenisleer is de wetenschap die zich bezig houdt met de betekenis van taalkundige constructies zoals woorden (woordsemantiek) en zinnen (zinssemantiek). De studie van de betekenis van tekens en symbolen is een verwante wetenschap: de semiotiek, binnen de semiotiek wordt semantiek ook wel aangeduid als 'semasiologie."
Bron:
semantisch html codering en markup
http://nl.wikipedia.org/wiki/Semantiek
http://nl.wikipedia.org/wiki/Semantisch_Web

Opmaak html coderen & markup 's

Het is om te beginnen aan te raden een website te bouwen op basis van div tags in plaats van old-school html tabellen. Deze tabellen hebben namelijk als nadeel dat er veel meer code voor de opmaak in de broncode nodig is hetgeen het voor zoekmachines onoverzichtelijker maakt.
Bijvoorbeeld:
<table width="800" border="0" align="center" cellpadding="0" cellspacing="0"><tr><td width="800" height="250" align="center" valign="middle" bgcolor="#FF0000">test</td></tr></table>
Zoals je ziet is dit redelijk veel code voor 1 blokje met een rode achtergrond.
Beter is het om een div te gebruiken in combinatie met CSS (Cascading Style Sheets) voor de opmaak:
<div class="red_background">test</div>
In dit simpele voorbeeld blijkt al dat je de hoeveelheid codering significant kan beperken en zodoende de codering "schoner" kan houden voor zoekmachines.

Waar het in de semantiek op het gebied van websites omgaat is het begrijpbaar maken van je codering voor zoekmachines. Belangrijk zijn dan ook de markup's die je plaats om je blokken tekst. Door middel van de markup's h1, h2 en p geef je een importantiegehalte aan de inhoud van uw teksten waarbij h1 belangrijker is dan h2 en die op zijn beurt weer belangrijker dan p. Het is dan ook van groot belang om de zoekargumenten waarop u gevonden wilt worden terug te laten komen in de h1 en h2 markup's.

Voorbeeld semantisch html:
<h1>Koptekst</h1>
<h2>inleiding</h2>
<p>alinea/paragraaf</p>

Layout technisch is de h1 tag visueel niet de aantrekkelijkste, echter kunt u de markup's met behulp van CSS (Cascading Style Sheets) styleren.

Voordelen van semantiek:

  • het maakt uw site toegankelijker voor meerdere browsers en een grotere doelgroep (bijv. mobiele surfers)
  • uw pagina's laden sneller doordat er minder codering nodig is om uw pagina te styleren.
  • door de beperkte aanwezigheid van minder codes zullen zoekmachines uw pagina's beter en sneller begrijpen.

CSS Cascading Style Sheets

In dit artikel is de naam CSS al meerdere keren teruggekomen. Een cascading style sheet wordt gebruikt om de lay-out te bepalen voor een website. CSS code kan op 2 manieren gebruikt worden. In de head sectie van een webpagina of als extern document. Voordeel van dat laatste is dat je niet elke webpagina apart hoeft te wijzigen. In de stylesheet wordt o.a. gedefinieerd het lettertype (bijv. Arial), de grootte van het lettertype, de kleur, alle markup's ( H1, H2, p, etc.), lay-out van andere html tags zoals body, table, td, hr, etc. Door het gebruik van een stylesheet houdt u de code van een webpagina zo schoon mogelijk en derhalve makkelijk leesbaar voor zoekmachine's.http://www.w3schools.com/css/

Uiteraard zijn er naast semantisch html nog meer factoren van belang om hoog te "scoren" in zoekmachines.

seo marketing voor een betere vindbaarheid online adverteren met Google Adwords Studio 16 email marketing Studio 16 webdesign & webdevelopment Joomla CMS open source E-commerce met Virtuemart
SEO Marketing / Website Optimalisatie
  • Semantisch HTML
  • Zoekwoord strategie
  • Concurrentie analyse
  • Implementatie zoekwoorden
Adverteren met Google Adwords
  • Opzetten campagnes
  • Optimalisatie campagnes
  • Adwords consultancy
  • Optimalisatie landingspagina
Email marketing
  • Mailplus software
  • Full service email marketing
  • Email template service
  • Email nieuwsbrief test service
Webdesign
  • Professionele templates
  • Met oog voor SEO
  • CSS stylesheets
  • W3C compliant
Joomla CMS
  • Open source CMS
  • Zelf uw site up to date houden
  • SEO mogelijkheden
  • Joomla templates
Virtuemart Webshops
  • Installatie Virtuemart
  • Custom functionaliteiten
  • Ideal & Paypal
  • XML feed Google shopping