Tekstbureau TekstBaken
Harrie Baken – tekstschrijver & seo-specialist
Tekstbureau TekstBaken
Harrie Baken – tekstschrijver & seo-specialist
Snel naar…
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! 8^)
De validator van WDG is bruikbaar tot en met XHTML 1.1. (Met HTML5 weet WDG geen raad). De WDG-validator is erg handig voor een routine-check van een hele site. Je kunt aan- of uitzetten:
De XML Schema Validator kan niet overweg met HTML5.
XHTML kun je er wel testen en ook XML 1.0. Bijvoorbeeld Atom feeds, RSS feeds en je sitemap.xml. XML Schema Validator is héél streng. Aanrader dus! 8^)
Voor het controleren van Atom & RSS feeds is FEED Validator het adres.
Hoe goed kan de nieuwste versie van je browser(s) overweg met HTML5?
Test het met The HTML5 test.
Width, viewport, screen size, van Quirksmode.org van Peter-Paul Koch.
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.
Veel van de bovengenoemde tools kun je met add-ons aan Firefox toevoegen.
Zie Firefox met add-ons.
De volgende websites over webontwerp, CSS, tableless design, browsers en bugs zijn inmiddels beroemd. Vol met artikelen, discussies, voorbeelden en templates (sjablonen).
Let op de opties, namelijk: 1. de css-versie, 2. streng of soepel valideren, en 3. een specifiek medium kiezen (screen, print, handheld, etc.)
Net als voor HTML geldt voor CSS: bijna al het hierboven genoemde kun je via add-ons aan Firefox 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. Ze zijn verdwenen of gewijzigd voor je het in de gaten hebt.
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.
Link Valet Online is geweldig. Zie de gebruiksaanwijzing. En zie voor de betekenis van alle mogelijke statuscodes de Status Code Definitions van RFC 2616.
Ook de linkcheckers kun je via add-ons in Firefox integreren. Zie Firefox met add-ons.
"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: 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.
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 22 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 22 punten die daar opgesomd staan, kun je gemakkelijk verbeteren.
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^)
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.
"[…] 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.
Keuze uit diverse browsers en uit steden over de hele wereld. Degelijke test met zeer gedetailleerde overzichten.
Ook met je Google-account, afdeling Webmaster Tools, krijg je al een aardige indruk van de snelheid van je site.
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, van Yahoo! YSlow en van dynaTrace, die alle drie draaien bij gebruikers, op 'localhost' dus.
Je vindt er een pagina (Last measurements) waar voortdurend de resultaten verschijnen van webpagina's die 'doorgemeten' worden.
Aanvankelijk had ik nijdig opgeschreven: dynaTrace valt wat mij betreft af!
Deze plug-in voor Firefox en IE werkt namelijk alleen onder MS-Windows. Maar ik kon het niet laten en ik heb op een virtuele machine dynatrace-AJAX-edition geínstalleerd. Afgezien van het genoemde gebrek is het een geweldige aanwinst. Via dynaTrace start je een browser, dynaTrace slaat de hele sessie op en analyseert werkelijk alles wat maar te maken heeft met snelheid. De resultaten kun je door laten sturen naar ShowSlow.
Dat is de titel van een Google-pagina met pakweg 30 tools en downloads ter verbetering van de prestatie van websites. 'n Goudmijn.
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.
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.
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).
Colorblind Web Page Filter – bekijk webpagina's door de ogen van kleurenblinden. Je kunt testen op diverse vormen van kleurenblindheid.
Wikipedia over kleurenblindheid
Webrichtlijnen Quickscan van de Nederlandse staat.
WAVE 3.0 Web Accessibility Tool, ook beschikbaar als WAVE Toolbar (add-on voor Firefox)
Robots.txt Checker van www.motoricerca.info »» 
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.voorbeeld.invalid # 2011-12-23 User-agent: Bandit Disallow: / User-Agent: * Disallow: /geheim/ Disallow: /opzouten.html Sitemap: http://www.voorbeeld.invalid/sitemap.xml
Hierboven staat: robot Bandit moet onmiddellijk weggaan; alle andere robots mogen overal komen, behalve in de directory 'geheim' en in het bestand 'opzouten.html'. Ten slotte staat vermeld waar 'sitemap.xml' zich bevindt.
De robots.txt moet in de root 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. Na elke wijziging opnieuw, want met éé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.)
Kijk wat de score is van de Web Compatibility Test for Mobile Browsers (v2) van de browser die je nu gebruikt.
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 onderzoeken, zit je goed op Quirksmode.org van Peter-Paul Koch.
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.
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.
In de categorie webontwikkeling zijn er nu (februari 2012) al meer dan 1000 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.
Minpuntje. 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.
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:
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.
Uitschakelen (op onderdelen of compleet, zoals met Opera), opslaan, bewerken, de printversie weergeven.
Gedetailleerde weergave - door omlijnen en benoemen - van alle elementen, attributen, selectors, eigenschappen en waarden.
Uitschakelen, omlijnen (outline), alt-attributen (alt text) weergeven.
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.
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."
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.
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'.
Minpuntje: HTML Validator kan nog niet overweg met HTML5 (december 2011). De validator van W3C uiteraard wel.
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!.
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.'
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.
Tekstbureau TekstBaken specialiseert zich in het optimaliseren van websites voor zoekers, bezoekers én 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.
Pagina bijgewerkt op 2013-03-21 om 15:36:21
Baken
voor tekst!