Tekstbureau TekstBaken

Harrie Baken – tekstschrijver & seo-specialist

HTML – XHTML – HTML5 – XML

Foutloze html…

  • Leidt niet direct tot hogere posities in zoekmachines
  • Maakt het robots wel gemakkelijker je site te indexeren
  • Vergroot de kans dat je webpagina's in alle webbrowsers eruitzien zoals je het bedoeld had
  • Is niet heilig of verplicht, soms is een error onvermijdelijk
  • Laat zien dat je een professionele website wilt afleveren

[2017-06-22] Ik loop verschrikkelijk achter met het onderhouden van deze pagina. Sorry.

Recente, uitgebreide lijst validators

Paul Turnbull van Art of Blog vroeg me onlangs of ik een link wilde plaatsen naar hun pas verschenen lijst van html-validators. Nou, graag! Het vermindert mijn schuldgevoel over het niet tijdig bijwerken van mijn eigen lijst. Hier komt ie:

Big List of HTML Validators

De lijst is – net als Art of Blog zelf – sterk gericht op WordPress. De tools voor webdevelopment die de diverse webbrowsers bieden komen aan bod, evenals enkele validators.

XML- en HTML-validators

1. W3C Markup Validation Service

De W3C-validator heeft 3 mogelijkheden van invoer:

Bij More Options is het slim om minstens Show Outline aan te vinken. Dan weet je meteen of de volgorde van de headings correct is. Een html-bestand zonder Doctype laten valideren, kan ook. Wie weet blijkt je html onverwacht te voldoen aan 'strict'. Dat is dan mooi meegenomen!  ;-)

2. WDG html-validator

De html-validator van de Web Design Group is bruikbaar tot en met XHTML 1.1. Met html5 weet hij geen raad. De WDG-validator is bijzonder handig voor een check van een hele of halve site wanneer je flink hebt zitten rotzooien. Je kunt aan- of uitzetten:

  • Show input
  • Validate entire site (maximaal 100 pagina's)
  • Hide valid results

3. Validator.nu – voor html5

  • Valideren met keuze uit address, file upload en text field
  • About Validator.nu biedt een overzicht van de vele (en geavanceerde) mogelijkheden
  • Perfect voor html5: HTML5 Validator, met keuze uit address, file upload en text field

4. Validator.pro – voor html5

'Validate Your Website In One Shot'

Validator.pro gebruikt de engine van Validator.nu (net zoals overigens Opera/Dragonfly en de html5-afdeling van de W3C-validator).

Het gave van Validator.pro is dat hij een hele website (tot 50 pagina's) in één keer controleert.

5. XML Schema Validator

De XML Schema Validator kan niet overweg met HTML5.

XHTML kun je er wel mee testen en ook XML 1.0., zoals Atom feeds, RSS feeds en natuurlijk je sitemap.xml. XML Schema Validator is héél streng. Aanrader dus!  ;-p

6. FEED Validator

FEED Validator is een goed adres voor het valideren van Atom & RSS feeds.


HTML5

Tests

Hoe goed kunnen de nieuwste versies van je browsers overweg met html5?

Test het met The HTML5 test.

Voor uitgebreide technische info: Width, viewport, screen size, van Quirksmode.org van Peter-Paul Koch.

Opera met Dragonfly

Valideer een webpagina in Opera met de W3C-validator. (Rechtsklikmenu of Ctrl+Alt+Shift+U)

Heb je Opera Dragonfly geïnstalleerd, dan is ook het valideren van html5 een fluitje van een cent. Opera gebruikt de html5-validator van Validator.nu. Het resultaat is een keurig overzicht van zowel de code als de afbeeldingen en hun alt text.


Firefox + + +

Veel van de bovengenoemde tools kun je met add-ons aan Firefox toevoegen.

Zie: Firefox met add-ons.

CSS – cascading style sheets – stijlbladen – opmaak/lay-out

De lay-out scheiden van de html-structuur: met css

Bronnen en naslag

Websites over css

De volgende websites over webontwerp, css, tableless design, browsers en bugs zijn inmiddels beroemd. Vol met artikelen, discussies, voorbeelden en templates (sjablonen dus).

CSS-validator

W3C CSS Validation Service

Let op de opties, namelijk: 1. de css-versie, 2. streng of soepel valideren, en 3. een specifiek medium kiezen (screen, print, handheld, aural, etc.)


Firefox + + +

Net als voor html geldt voor css: bijna al het hierboven genoemde kun je via add-ons aan Fx toevoegen. Zie Firefox met add-ons.

Gebroken links, 404's, 'De gezochte pagina bestaat niet meer' enzovoort. Zowel bezoekers als zoekmachines hebben een gloeiende hekel aan Not Found.

Webpagina's vergen onderhoud. Alleen al vanwege de outbound links. De adressen zijn ongeldig of gewijzigd voor je het in de gaten hebt.

Linkrot

Linkcheckers

W3C Link Checker

Controleert links en ankers in een enkele webpagina of een complete website. De server stuurt overigens zelf nogal eens de vrolijke boodschap 503 Service Temporarily Unavailable.

De links waar volgens de linkchecker iets mis mee is, moet je overigens ook nog met de hand controleren. Want de diagnose is vaak fout.

Link Valet Online

Link Valet Online is geweldig. Zie de gebruiksaanwijzing. En zie voor de betekenis van alle mogelijke statuscodes de Status Code Definitions van RFC 2616.

  • Neem bij Link Valet de knalrode melding 500 Internal Server Error niet al te serieus, want die slaat vaak nergens op.
  • Ga nooit alléén af op de resultaten van linkcheckers. Controleer foute links altijd ook met de hand, vooral timeout.
  • Het is raadzaam om op gezette tijden álle externe links na te gaan. Stuk voor stuk, met de hand. Want al geeft de server géén 404, de betreffende link kan inmiddels leiden naar de nutteloze mededeling 'Dit domein is te koop'. En wanneer de server meldt 301 Moved Permanently, is het verstandig om na te gaan of deze redirect naar het juiste adres verwijst.

Firefox + + +

Ook de linkcheckers kun je via add-ons in Fx integreren. Zie Firefox met add-ons.

Snelheid, laadtijd

"Hoe korter de laadtijd van je webpagina's, hoe beter. Maak ze niet zwaarder dan 100 Kb. Probeer je homepage onder de 50 kilo te houden. (Handhelds: 10 Kb) Alles wat door de browser geladen moet worden, telt mee. HTML en tekst, JavaScript, afbeeldingen, CSS, Flash."

Voorgaande alinea schreef ik hier in 2007. Bij seo-klussen kreeg ik het regelmatig aan de stok met webmasters die vonden dat Harrie Baken niet moest zeuren over de laadtijd. Of over die paar afbeeldingen van samen 100 Kb op de homepage. "Iedereen heeft toch breedband?!"

Inmiddels zitten diezelfde webmasters te ploeteren om de schade te herstellen. En wel omdat Google en Yahoo in het voorjaar van 2009 de oorlog hebben verklaard aan trage websites.

Maar mijn alinea uit 2007 is niet écht to the point. Nogal simplistisch, eigenlijk. De grootste boosdoeners zijn niet de zware afbeeldingen of andere bestanden, maar het te grote aantal bestanden, hoe klein ze ook zijn.

En ook dát is weer te simpel voorgesteld. Uit luiheid citeer ik Google:

Page Speed evaluates performance from the client point of view, typically measured as the page load time. This is the lapsed time between the moment a user requests a new page and the moment the page is fully rendered by the browser. The best practices cover many of the steps involved in page load time, including resolving DNS names, setting up TCP connections, transmitting HTTP requests, downloading resources, fetching resources from cache, parsing and executing scripts, and rendering objects on the page. (Bron: https://developers.google.com/speed/docs/best-practices/rules_intro?hl=nl Google, Web Performance Best Practices)

Die bron, die is er niet meer. De pagina is vervangen door PageSpeed Insights-regels.

Snelheid als seo-factor

PageSpeed

Tot voor kort (2013? begin 2014?) kon je Firebug voor Firefox aanvullen met Google Page Speed als plug-in. Maar ik kon hem vandaag (6 september 2014) nergens meer vinden. Alle vroegere vindplaatsen verwijzen door naar PageSpeed Insights for Google Chrome. 'Eigen spul eerst', kennelijk. Dat Google tot een monsterlijke monopolist is uitgegroeid, was me duidelijk. Maar dat het nu zelfs de kleinzielige, bekrompen trekjes van Apple en Microsoft krijgt, had ik niet verwacht. Naïef!

Google: Web Performance Best Practices

Op Google's pagina over Web Performance Best Practices staat een toelichting op Page Speed, een project van Google om de laadtijd van een webpagina en alle onderdelen ervan te meten, en vervolgens te kunnen verkorten.

Google's Page Speed als online tool

Yahoo!'s YSlow

Ook de voormalige zoekmachine Yahoo! is van de partij in de strijd tegen lange laadtijden. Yahoo! aan het woord:

Yahoo!'s Exceptional Performance team has identified 34 rules that affect web page performance. YSlow's web page analysis is based on the 23 of these 34 rules that are testable. […] Studies have shown that web page response time can be improved by 25% to 50% by following these rules.

Dit citaat komt van de YSlow User Guide. Veel van de 23 punten die daar opgesomd staan, kun je gemakkelijk verbeteren.

Yahoo's YSlow als tool

Page Speed & YSlow: doen!

Analyseer, optimaliseer. Als je geen doorgewinterde webdeveloper bent, of nooit rekening hebt gehouden met de laadtijd, dan voorspel ik je een schokkende maar leerzame ervaring. 8^)


HAR-bestanden

Voor het opslaan en weergeven van de testresultaten hanteren veel test-sites HAR-bestanden (Http ARchive). Zulke "hars" kun je ook zelf produceren, namelijk na toevoeging van netexport aan Firebug. Zie de site van Jan Odvarko voor meer uitleg en een online har-viewer en een aan HAR gewijde blog.

Doei!
Har ;-)

Andere snelheidstests

Web Page Speed Analysis van WebSiteOptimization.com.

"[…] page size, composition, and download time. The script calculates the size of individual elements and sums up each type of web page component. Based on these page characteristics the script then offers advice on how to improve page load time."

De analyse bevat dus een gedetailleerde uitsplitsing (HTML, afbeeldingen, 'CSS-afbeeldingen', JavaScript, CSS, audio, video), een melding of de server compressie (gzip) toepast, en je krijgt er adviezen bij.


WebPagetest

Keuze uit diverse browsers en uit steden over de hele wereld. Degelijke test met zeer gedetailleerde overzichten.


Google Webmaster Tools

Ook met je Google-account, afdeling Webmaster Tools, krijg je al een aardige indruk van de snelheid van je site.


logo ShowSlow.com

ShowSlow

Op ShowSlow.com kun je van 10 pagina's de snelheid laten meten en dat elke 24 uur laten herhalen. De gegevens die ze daarvoor gebruiken, komen van Google Page Speed en van YSlow (Yahoo), die allebei draaien bij gebruikers, op 'localhost' dus.

Je vindt er een pagina (Last measurements) waar voortdurend de resultaten verschijnen van webpagina's die 'doorgemeten' worden.


Let's make the web faster

Dat is de titel van een Google-pagina met pakweg 30 tools en downloads ter verbetering van de prestatie van websites. 'n Goudmijn.


Firefox + + +

Ook hier geldt weer: het meeste kun je aan Firefox toevoegen. Zie Firefox met add-ons. Maar vergeet niet je site te testen met de andere webbrowsers, want de browser zelf is een belangrijke factor bij de snelheid die de gebruiker ervaart. Zie bijvoorbeeld Browser Speed Tests: Firefox 3.6, Chrome 4, Opera 10.5, and Extensions. De prestatie van uitsluitend je browser kun je testen op peacekeeper.futuremark.com. De test duurt 5 minuten.

Toegankelijkheid, accessibility

Bronnen & naslag

Validators & toetsen

Eerst even een wijs woord van W3C.org over wat checkers van de toegankelijkheid van een webpagina kunnen en niet kunnen. De kern: tools kunnen de toegankelijkheid van een website niet echt vaststellen, maar ze komen er wel bij van pas. (Web accessibility evaluation tools can not determine the accessibility of Web sites, they can only assist in doing so.) Zie: Selecting Web Accessibility Evaluation Tools.

Een enorme verzameling gereedschap om toegankelijkheid te testen staat op Complete List of Web Accessibility Evaluation Tools.


FAE – Functional Accessibility Evaluator

logo Functional Accessibility Evaluator

De Functional Accessibility Evaluator 1.1 is geweldig. Voer een adres in en verbaas je erover hoe ontoegankelijk websites kunnen zijn. Als je je registreert bij FAE kun je in één keer een hele website valideren.

Met een link naar FAE kun je eventueel aan anderen laten zien hoe het er met de toegankelijkheid van een pagina bijstaat: Check with FAE.

Een FEA-extensie voor Firefox staat op Firefox Accessibility Extension (FEA-site) en Accessibility Evaluation Toolbar (addons.mozilla.org).


Kleurenblindheid

Colorblind Web Page Filter – bekijk webpagina's door de ogen van kleurenblinden. Je kunt testen op diverse vormen van kleurenblindheid.

Wikipedia over kleurenblindheid


Overheid.nl

Webrichtlijnen Quickscan van de Nederlandse staat.


WAVE 3.0

WAVE 3.0 Web Accessibility Tool, ook beschikbaar als WAVE Toolbar (add-on voor Firefox)

robots.txt

Met de robots.txt kun je robots (of spiders, crawlers) de toegang tot (delen van) je site ontzeggen, of juist expliciet toestaan. De robots.txt moet strikt aan de regels voldoen. Zie het onderdeel What to put into the robots.txt file op Web Server Administrator's Guide to the Robots Exclusion Protocol.

Het is toegestaan om onderaan in de robots.txt een regel op te nemen waarin staat waar je sitemap.xml zich bevindt. Een robots.txt kan er dus als volgt uitzien:

# robots.txt voor www.example.com
# 2013-11-28, door harricot
User-agent: Bandit
Disallow: /

User-Agent: *
Disallow: /geheim/
Disallow: /opzouten.html
Sitemap: https://www.example.com/sitemap.xml

Hierboven staat: voor robot 'Bandit' is de toegang verboden; alle andere robots mogen overal komen, behalve in de directory 'geheim' en op de pagina 'opzouten.html'. Ten slotte staat vermeld waar 'sitemap.xml' zich bevindt, een wegwijzer bestemd voor zoekmachines als Bing, Google, etc.

De robots.txt moet in de root van een website staan. Dus áls een site er een heeft, kun je hem altijd in je webbrowser opvragen. Kijk maar:

Laat je robots.txt controleren direct nadat je hem hebt geüpload. En na elke wijziging opnieuw, want met slechts één teken op de verkeerde plaats kun je een site ontoegankelijk maken voor zoekmachines.

(Het laatste geldt natuurlijk niet voor robots die de robots.txt botweg negeren. Zulke crawlers kun je blokkeren in je .htaccess, maar dat is een tijdrovende bezigheid.)

De Robots.txt Checker van motoricerca.info waar ik je 4 zinnen geleden naartoe stuurde, werkt niet met https en is daarom verouderd. Beveiligde verbindingen met https zijn/worden immers de standaard.

Mobieltjes, pda's, handhelds, tablets, etc.

Tests voor browsers

Kijk wat de score is van de Web Compatibility Test for Mobile Browsers (v2) van de browser die je nu gebruikt.


Akamai Mobitest

De snelheid van je website op handhelds e.d. zal de komende jaren alleen maar belangrijker worden. Test je site met Akamai Mobitest. Diverse mobiele apparaten 'beschikbaar'.


Voor zeer gedetailleerde en gedocumenteerde info over viewports, screens & pixels, compleet met onderzoeksresultaten, zit je goed op Quirksmode.org van Peter-Paul Koch.


Firefox met add-ons – een Zwitsers zakmes bij webontwikkeling

logo Opera-browser

De tofste browser om snel, slim en safe mee rond te sjezen blijft voor mij Opera (Opera is weliswaar al jaren gratis, maar helaas niet vrij en open).

Eind jaren '90 werd ik smoorverliefd op Opera. Ik draaide toen nog MS-Windows (hihi). The Bat! (mail) en Opera waren de enige programma's waarvoor ik betaalde. (Met plezier! Ik had ze net zo goed kunnen, eh, lenen.) De liefde voor Opera is nooit overgegaan.

logo Firefox

Voor m'n werk als seo'er maak ik de laatste jaren toch meer gebruik van Firefox dan van Opera (al is Opera Dragonfly ook niet mis). Als hulpmiddel bij alles wat met webdevelopment, validatie en seo te maken heeft, is Firefox, aangevuld met enkele extensies (of extensions, plug-ins, add-ons), fantastisch en eigenlijk onmisbaar. Firefox is openbronsoftware en draait onder Linux, Mac OS X en MS-Windows.

Firefox-extensies voor webontwikkeling

In de categorie webontwikkeling zijn er nu (maart 2014) al meer dan 1550 extensies. Ik beperk me tot een aantal extensies die zó nuttig zijn, dat je wel gek bent als je ze niet gebruikt. Natuurlijk kun je de informatie die deze extensies opleveren ook op andere manieren vergaren. Maar het grote voordeel van Firefox met een uitgekiende verzameling add-ons is, dat je alles bij de hand hebt. Je browser als een Zwitsers zakmes voor het web.

Minpunt. Het uitbreiden van Firefox met al die add-ons heeft een keerzijde. Een add-on is soms (nog) niet compatibel met een nieuwe versie van Firefox. In dat geval wordt hij uitgeschakeld als je Firefox laat bijwerken.


Firefox met Web Developer

Web Developer is op zichzelf al een Zwitsers zakmes! Deze plug-in voorziet Firefox van een veelzijdige werkbalk. Onmisbaar bij seo-werk. Een kleine greep uit de mogelijkheden:

HTML

De headings weergeven (of álle block level elements), meta-elementen tonen (vaak ten onrechte 'metatags' genoemd, zelfs door de schrijvers van dit Wikipedia-artikel), alle details geven van de links, title-attributen tonen… alles, eigenlijk.

CSS

Uitschakelen (op onderdelen of compleet, zoals met Opera), opslaan, bewerken, de printversie weergeven.

HTML en CSS gecombineerd

Gedetailleerde weergave - door omlijnen en benoemen - van alle elementen, attributen, selectors, eigenschappen en waarden.

Afbeeldingen

Uitschakelen, omlijnen (outline), alt-attributen (alt text) weergeven.

Pagina-eigenschappen

Snel een compleet overzicht van meta-elementen, formulieren, koppelingen en media.

Ga bijvoorbeeld via het rechtsklikmenu naar 'pagina-info bekijken' en je hebt voor het oprapen: de meta-elementen, alle afbeeldingen (ook achtergrondafbeeldingen), eventuele rss- of atom-feeds en alle cookies.


Firefox met HTML Validator (Tidy)

HTML Validator

Ook een must is HTML Validator. Met HTML-Validator kun je op alle webpagina's meteen zien welke fouten erin zitten of welke 'waarschuwingen' er gegeven worden. Erg doeltreffend om snel je eigen werk te controleren, of dat van je sitebouwer of webbureau.

"HTML Validator is a Mozilla extension that adds HTML validation inside Firefox and Mozilla. The number of errors of a HTML page is seen on the form of an icon in the status bar when browsing. […] The details of the errors are seen when looking the HTML source of the page."

Tux

Op bovengenoemde pagina staat vermeld dat er geen versie is voor Linux 64-bits. Dat is niet altijd correct. Op de website van Marc Gueury staan alle beschikbare versies. Ook een uitgebreide handleiding.
NB Ben je geen übernerd, kies dan tijdens de installatie de Tidy-variant en niet de SGML-parser.

Errors & warnings

Tidy-icoon

Bij het icoontje van de HTML-validator (gebaseerd op Tidy van Dave Raggett) zie je direct hoeveel fouten een pagina bevat. Alle details verschijnen wanneer je in je werkbalk gaat naar 'Broncode tonen'/'View Source', of wanneer je dubbelklikt op het icoon. (Rechtsklikken biedt nog meer mogelijkheden.) Tidy vermeldt voor zover mogelijk de oorzaken van fouten en waarschuwingen, en doet suggesties voor oplossingen.

De tweede manier om fouten te achterhalen is via de Validator van W3C. Je gaat dan in je werkbalk naar 'Tools' » 'Validate HTML'.

Minpunt: HTML Validator kan nog steeds niet overweg met html5 (september 2014). De validator van W3C uiteraard wel.


Firefox met Firebug

HTML, CSS en JavaScript doorlichten en debuggen – na wat pielen en prutsen (het is allemaal nogal veel) heb je er met Firebug weer een goed stuk gereedschap bij. Documentatie vind je op Firebug, Web Development Evolved.

Installatie van Firebug is overigens vereist om met Firefox gebruik te kunnen maken van de hierboven besproken Page Speed van Google, evenals van YSlow van Yahoo!.

SEO-tools

SearchStatus

De Firefox-plug-in SearchStatus hoort eigenlijk op de pagina over seo-tools die ik 1000 jaar geleden al had moeten maken, maar ik noem hem hier alvast. Een geweldig hulpmiddel voor de seo-maniak!

'Display the Google PageRank and Alexa popularity score anywhere in your browser, along with fast keyword density analyser, keyword/nofollow highlighting, backward/related links, Alexa info and other seo tools.'


SeoQuake  SeoQuake Fx add-on

Vergelijkbaar met SearchStatus is SeoQuake. 'n Paar onderdelen: PageRank, whois, inbound links, keywords density. Vergeet niet de preferences in te stellen en ook niet dat je af en toe een ram op F5 moet geven. Gelukkig kun je dat ding met 1 klik aan- en uitzetten, want bij gewoon browsen word je er knettergek van.

Optimalisatie-advies van TekstBaken

Tekstbureau TekstBaken specialiseert zich in het optimaliseren van websites voor zoekers, bezoekers en zoekmachines. Uiteraard kun je bij TekstBaken terecht voor zoekmachinevriendelijke webteksten, maar ook voor alle andere aspecten van seo.

Voor het optimaliseren van je website maak ik graag een offerte. Daaraan vooraf gaat meestal een grondig optimalisatie-advies.

Meer over websiteontwikkeling op tekstbaken.nl

Tekstbureau
TekstBaken
voor…

  • herschrijven
  • redigeren
  • copywriting
  • taaladvies
  • nieuwsbrief
  • webredactie
  • webschrijven
  • webtekst
  • website
  • &
  • optimalisatie voor
    zoekmachines (seo)

Baken
voor tekst!

W3CCSS3

Pagina bijgewerkt op 2017-06-23 om 01:08:32

Harrie Baken
harriebaken@tekstbaken.nl
contactformulier
tel +31 13 468 46 15
gsm +31 6 23 36 93 80
Academielaan 152
NL-5037 EW Tilburg
KvK 18035796
btw-id NL078875560B01