Gevreesd door veel webontwerpers, lijkt SEO vaak een hoofdpijn die beter wordt overgelaten aan programmeurs of marketinganalisten, maar er is geen reden om aan de zijlijn te blijven staan. In deze korte handleiding bouwen we een eenvoudige HTML-sjabloon en leggen we enkele praktische tips vast die de SEO van uw site rechtstreeks kunnen beïnvloeden Gaan.

---

Invoering

SEO of Search Engine Optimization is de manier waarop u uw site instelt om hoger gerangschikt te worden door zoekmachines en invloed heeft op hoe informatie wordt weergegeven in zoekresultaten. Voorbij zijn de dagen dat het kopen van Google Adwords de beste manier was om boven aan een zoekopdracht te verschijnen, vooral omdat veel adverteerders niet relevant zijn voor zoekresultaten, wat ertoe heeft geleid dat gebruikers steeds meer gesponsorde koppelingen wantrouwen. Adwords kaatst terug, maar er zijn manieren om uw huidige zoekmachine te beïnvloeden.

Allereerst moeten we begrijpen dat crawlers van zoekmachines, met name de Google-spider, de bron van uw aannamen van pagina's doornemen op basis van de inhoud en de opmaak. Logische HTML-hiërarchie is cruciaal bij het bepalen van het belang van content, maar buzz op het internet vertelt ons dat Google ook begint met het baseren van hun resultaten op uw sociale aanwezigheid, evenals op uw pagina. Dat klopt, je kunt Facebook en Twitter vergeten als eenvoudige hulpmiddelen om te spelen, ze kunnen je helpen bij het maken of breken van je website.

Springende spin door Rundstedt B. Rovillos, op Flickr

---

Stap 1: Eenvoudige HTML-structuur

Laten we beginnen met een paar fundamentele HTML-markeringen te bekijken:

Deze structuur volgt ingestelde normen, zodat browsers weten wat ze van uw pagina moeten maken. Bovenaan onze code leggen we vast wat voor soort document het is en in welke taal het is geschreven. Tussen ons tags laten we de browser weten dat we de standaard utf-8-tekenset gebruiken. We hebben dan de titel van onze site en we hebben een voorwaardelijke verklaring toegevoegd om HTML5 shiv te laden die compatibiliteitsproblemen met IE 9 compenseert. tags bepalen uiteraard waar de inhoud van onze pagina zal verschijnen.

Eenvoudig en ongecompliceerd toch? Maar we hebben eigenlijk al belangrijke informatie weggelaten.

---

Stap 2: Metatags toevoegen

Laten we teruggaan naar het begin van onze code en de volgende regel code meteen na de opening toevoegen label:

Deze regel vertelt zoekmachines wat ze moeten weergeven in de zoekresultaten direct onder je paginatitel. In dit geval kunnen de resultaten op Google als zodanig worden weergegeven:

Notitie: Een punt dat erg belangrijk is en vaak over het hoofd wordt gezien, is dat je beide moet aanpassen titel en Meta-tags van elke pagina binnen uw site, specifiek voor de inhoud van elke pagina. Voor de titel kan het zo simpel zijn als .

De code binnen ons tags ziet er nu als volgt uit:

Notitie: Voor informatie over waarom we hebben verwaarloosd met meta-trefwoorden, bekijk de discussie in de commentaren.

---

Stap 3: Linken naar onze CSS en JS

In bijna alle webpagina's komen vaak links voor naar CSS-bestanden en Javascript-code of bibliotheken. Als we de coderingsuggesties van Google willen volgen, moeten we proberen onze externe query's (HTTP-aanvragen) tot een minimum te beperken, dus probeer CSS- en Javascript-items te beperken tot één bestand, indien mogelijk. Laten we generieke verzoeken voor onze externe bestanden toevoegen aan onze sjabloon.

Eerst linken we naar onze externe stylesheet door de volgende code toe te voegen vlak voor de afsluitende tag:

Vervolgens doen we hetzelfde voor ons Javascript-bestand door de volgende regel toe te voegen:

We voegen het JavaScript aan het einde van onze pagina toe, net voor de sluitingscode, zodat onze code als volgt eindigt:

Waarom hebben we de Javascript-query aan het einde van de pagina toegevoegd? Twee redenen:

• Hierdoor kan de pagina-inhoud direct worden geladen, in plaats van te wachten tot Javascript is verwerkt.
• Het helpt ook zoekmachines bij het lezen van uw pagina-inhoud. Waarom? Als we logisch denken, begint de crawler boven aan de pagina en wordt uw code weergegeven. Als Javascript bovenaan de pagina wordt toegevoegd, doorloopt de zoekmachine het Javascript voordat de inhoud van uw pagina wordt bereikt. Het spreekt vanzelf dat we willen dat de zoekmachine rechtstreeks naar onze inhoud gaat voor een effectievere indexering. Alle verwijzingen naar Javascript, zowel extern als intern, moeten aan het einde van uw pagina worden toegevoegd.

Een andere regel die u in gedachten moet houden, is dat als u meer dan één CSS- of Javascript-bestand hebt, u altijd de hiërarchieregels volgt en het belangrijkste bestand als eerste plaatst en de rest achter elkaar toevoegt. Je kunt immers geen ongelooflijke Javascript-functie gebruiken die de jQuery-bibliotheek gebruikt, als je niet eerst de jQuery-bibliotheek aanroept.

---

Stap 4: onze sjabloon voltooien

We zijn bijna klaar met onze sjabloon, maar we kunnen wel wat inhoud toevoegen. Met de introductie van HTML5 is het gebruiksvriendelijk maken van uw site veel eenvoudiger geworden; goede semantiek geeft zoekmachines zeer specifieke instructies over wat te vinden en waar ze te vinden. Laten we enkele algemene elementen toevoegen die we waarschijnlijk zullen gebruiken op de meeste sites die we ontwerpen.

Direct onder de tag en voor de label, laten we de volgende regels toevoegen:

  
Website naam
   
 
 
Artikelkop
 
Een eenvoudige tekst om ons te helpen
 Lees verder?  
 
  

Onze code zou nu als volgt moeten verschijnen:

            
Website naam
   
 
 
Artikelkop
 
Een eenvoudige tekst om ons te helpen
 Lees verder?  
 
     

Waar we ooit div-containers zouden hebben gebruikt, hebben we nu meer beschrijvende markup geïmplementeerd. De ,