SEO voor je website

Wie een website publiceert, wil natuurlijk dat zijn site goed gevonden wordt door de zoekmachines. Hoe optimaliseer je je website voor zoekmachines en sociale mediasites?

SEO gaat niet over het manipuleren van de zoekresultaten. Het is het structureren en groeperen van informatie op zo’n manier dat het voor de zoekmachines duidelijk is waarover je website gaat. SEO is geen zoekmachine-spam. Het kunstmatig manipuleren van de zoekmachines is niet alleen geen duurzame aanpak, het zal ook niet resulteren in conversies. En dat is uiteindelijk waarover het gaat. (Bron: https://wijs.be/nl/diensten/traffic-en-conversieoptimalisatie/seo)

Het begrip SEO staat voor “Search Engine Optimization” . Het is niet één bepaalde techniek, maar een geheel van manieren om je webpagina's beter toegankelijk te maken voor zoekmachines. De nummer één van de zoekmachines blijft Google. Als je je webpagina's gestructureerd opbouwt, met keurige en semantische HTML, dan zal Google beter begrijpen waarover je pagina gaat. 

Zo is een <article> voor Google duidelijker dan wanneer je voor hetzelfde onderdeel een <div>-element zou gebruiken. Het HTML-element article vertelt immers al dat het gaat om een "artikel" (dat kan natuurijk zowel een nieuwsbericht als een winkelartikel zijn).

1. Voeg metatags toe

Metatags stop je in het <head>-gedeelte van je webpagina. Belangrijk is vooral het geven van een zinvolle "title" aan je webpagina. 

Een foute "title":

<title>Welkom op mijn site</title>

De title vertelt best iets over het onderwerp van je site, over de inhoud van de betrokken pagina, en misschien is het ook zinvol om er de locatie in te vermelden:

<title>Restaurant Belgische Keuken - Parijsstraat Leuven</title>

Een tweede bijzonder belangrijk onderdeel is de "omschrijving/beschrijving". Naast de title komt die "description" in de zoekresultaten van Google terecht. Bekijk het onderstaande voorbeeld. De "blauwe" title is gebaseerde op de <title> van de betrokken webpagina. De "zwarte" tekst die Google toont is (over het algemeen) gebaseerd op de meta-tag "description".


Op https://webcode.tools/meta-tags-generator kan je geautomatiseerd metatags aanmaken voor elk van je webpagina's. 

2. Voeg OG-tags toe

Open Graph is bedacht door Facebook in 2010. Dit werd gedaan om een betere integratie tussen websites en Facebook te bewerkstelligen. In de praktijk kwam het er op neer dat links van websites die gepost werden op Facebook zogenoemde ‘rich graphs’ konden worden. Een andere uitleg is dat je als website hiermee een zekere mate van controle krijgt op hoe je er op Facebook uit ziet.’
Een voorbeeld. Als iemand een link van een website plaatst in zijn of haar status op Facebook dan verschijnt er automatisch een soort kaartje. Vaak zie je hierin een afbeelding, een titel, een omschrijving en een link. Ook bij LinkedInGoogle+ en Twitter gebeurt dit. Deze gegevens kun je zelf beïnvloeden en min of meer ‘dicteren’ aan sociale netwerken. Kortom: je kunt het ‘kaartje’ zelf invullen.
(Bron: http://www.42bis.nl/2015/02/facebooks-open-graph-wat-het-en-wat-kun-je-er-mee/)
Maak geautomatiseerd OG-tags aan voor al je webpagina's op https://webcode.tools/open-graph-generator.

3. Zorg dat je website mobiel toegankelijk is

Google gooit sites die niet of moeilijk mobiel toegankelijk zijn, achteruit in de zoekresultaten. Je hebt er dus alle belang bij je site "responsive" te maken. Om dit proces te vereenvoudigen, kan je gebruik maken van een CSS-framework dat je het grootste deel van dit werk uit handen neemt. 

Tijdens de lessen gebruiken we hiervoor cssbib.css (https://www.schoolvoorbeeld.be/css/cssbib.css), dat deels gebaseerd is op skeleton.css (http://getskeleton.com/), maar met een hele reeks uitbreidingen.

Daarnaast moet je een afzonderlijke regel toevoegen aan je webpagina die je site mobiel-gebruiksvriendelijk maakt. Voeg de volgende regel toe aan de <head>-sectie van je pagina:

<meta name="viewport" content="width=device-width, initial-scale=1.0">      

4. Voeg gestructureerde/semantische gegevens toe met JSON-LD

Met JSON-LD voeg je gestructureerde gegevens toe aan je pagina. Die informatie is niet zichtbaar voor de eindgebruiker, tenzij hij/zij de broncode van de pagina bestudeert. Zoekmachines zoals Google, begrijpen dankzij JSON-LD echter veel beter waarover de inhoud van je pagina gaat. Uiteraard moeten de JSON-LD-gegevens ook effectief overeenkomen met de werkelijke (zichtbare) inhoud van je pagina.

Een voorbeeld:

<script type="application/ld+json"> {
      "@context": "http://schema.org/",
      "@type": "Event",
      "name": "Rock Werchter",
      "description": "Het bekendste Belgische rockfestival.",
      "startDate": "2018/30/06",
      "endDate": "2018/07/04",
      "location": {
         "@type": "Place",
         "name": "Werchter",
         "address": {
             "streetAddress": "Festivalterrein",
             "addressLocality": "Werchter",
             "addressRegion": "Vlaams-Brabant"
        }
      }
} 
</script>

Maak geautomatiseerd JSON-LD-gegevens aan: https://webcode.tools/json-ld-generator/event

5. Voeg gestructureerde gegevens toe met microdata

Microdata of microformats zijn gewoon stukjes standaard HTML-code die op een gestandaardiseerde manier (met extra attributen) zijn opgesteld, zodat zoekmachines ze beter begrijpen. Rond microdata zijn door belangrijke spelers in sector afspraken gemaakt. Er zijn m.a.w. een aantal regels/afspraken rond vastgelegd. Anders dan bij JSON-LD, zijn met microdata geformatteerde gegevens wel zichtbaar in de pagina.
Door bepaalde informatie zoals bijvoorbeeld bedrijfsvermeldingen, beoordelingen, contactgegevens, evenementen, recensies, recepten, reviews, prijsindicaties, productspecificaties enz. met deze standaarden te beschrijven, worden ze gemakkelijker door Google herkend en kunnen deze data als rich snippets verschijnen in de zoekresultaten.
(Bron: https://www.siteoptimo.com/wat-is/microdata/)

Een voorbeeld:

<address itemscope itemtype="http://data-vocabulary.org/Organization">
    <span itemprop="name">Nettuts+</span>
    Postal Address:
    <span itemprop="address" itemscope
      itemtype="http://data-vocabulary.org/Address">
      <span itemprop="street-address">PO Box 21177</span>,
      <span itemprop="locality">Melbourne</span>,
      <span itemprop="region">Victoria</span>,
      <span itemprop="country-name">Australia</span>.
    </span>
     <span itemprop="geo" itemscope itemtype="http://www.data-vocabulary.org/Geo/">
        Latitude: <span itemprop="latitude">37.49 S </span>
        Longitude: <span itemprop="longitude">144.58 E</span>
    </span>
    Phone: <span itemprop="tel">+61 (0) 3 9023 0074</span>
    <a href="http://net.tutsplus.com/" itemprop="url">Nettuts+ | Web development tutorials, from beginner to advanced.</a>.
</address>

Maak geautomatiseerd microdata aan op https://webcode.tools/microdata-generator

6. Bouw je site semantisch op

Een aantal belangrijke tips:

- Vervang je links niet door aanklikbare afbeeldingen.

- Voeg "title" en "alt"-attributen toe aan je afbeeldingen.

- Geef je pagina's of "virtuele" mappen duidelijke namen.

- Gebruik HTML5-elementen.