HTML5 wordt de nieuwe standaard voor het bouwen van webpagina’s. Voor webbouwers biedt HTML5 weer nieuwe kansen. Maar ook op het gebied van SEO is HTML5 een grote stap voorwaarts.

Zoekmachines weten door gebruik van de nieuwe tags precies waar ze de belangrijke teksten kunnen vinden. De voornaamste verandering zijn dan ook de nieuwe tags die gebruikt kunnen worden. Zoals <header>, <footer>, <nav>, <article> en nog een aantal andere. Een van de, naar mijn mening, mooiste aanpassing is de <video> tag. Deze nieuwe tag maakt het mogelijk om interactieve content te gebruiken zonder tussenkomst van een Flash Player plugin. Ook het embedden van bijvoorbeeld een YouTube filmpje is niet meer nodig. Het videofilmpje staat daadwerkelijk op de webserver en is niet afhankelijk van een flashplayer.

Over deze HTML5 Video tag wil ik toch even wat meer informatie geven.

De inspiratie daarvan is een Engelstalige website die bijzonder veel en duidelijke informatie geeft over HTML5. Dive into html5. Met deze en andere info ben ik gekomen tot onderstaand blogartikel.

De Video tag

Wat voorheen mogelijk was met Flashplayers, Youtube embedding en andere video players is nu direct mogelijk met de <video> tag.  Het afspelen van beelden en geluid op een webpagina.

Met de beloofde standaard WebM zou dat dus allemaal een eenvoudige code moeten worden.

Met de code

<video src=”filmpje.webm”></video>

zouden we ons “filmpje” kunnen afspelen.

Maar niets is minder waar. Dat dit gaat werken klopt, maar zeker niet in alle browser en ook niet op alle computers. “Maar er was ons toch één standaard beloofd”? Ja, dat klopt! Maar zoals met zoveel ander standaarden probeert ook hier weer iedereen zelf het wiel uit te vinden. Allereerst zitten we met het probleem van de verschillende browsers. Onderstaand een overzicht van de browser die kunnen omgaan met de HTML5 <video> tag.

• Internet Explorer vanaf 9.0
• Firefox vanaf 3.5
• Safari vanaf 3.0
• Chrome vanaf 3.0
• Opera vanaf 10.5
• iPhone van 1.0
• Android vanaf 2.0

Alle oudere versie kunnen dus niet omgaan met deze nieuwe  tag. Daarnaast is het probleem dat niet alle browser het webM formaat ondersteunen. Daarom heb ik onderstaand een overzicht gemaakt welke formaten worden ondersteund door bovenstaande browsers.

• Internet Explorer vanaf 9.0        WebM en MP4
• Firefox vanaf 3.5                             Ogv
• Firefox vanaf 4.0                             WebM
• Safari vanaf 3.0                                MP4
• Chrome vanaf 3.0                           Ogv en WebM
• Opera vanaf 10.5                            Ogv en WebM
• iPhone van 1.0                                 MP4
• Android vanaf 2.0                           MP4
• Android vanaf 2.3                           WebM

Dat is mooi dan. Dat betekent dus dat voor zowat elke  browser een andere versie zal moeten worden geplaatst. Klopt! En om dat werkend te krijgen zal je toch wat meer code moeten gaan schrijven dan:

<video src=”filmpje.webm”></video>

Hoe gaan we dit doen?

Allereerst zal je moeten zorgen dat jouw filmpje geconverteerd wordt naar de diverse formaten. We gaan uit van drie formaten, WebM, ogv en mp4.

Dat converteren doe je het eenvoudigste met Miro converter. Miro werkt erg eenvoudig. Je kiest de file die je wil gaan omzetten (Hij slikt bijna elke extensie) en in de dropdown kies je de uitvoermethode. Je kiest daar achtereenvolgens, Theora (maakt de ogv file), WebM en MP4.  Natuurlijk zijn er diverse andere programma’s die dit trucje kunnen klaren, maar dit vond ik toch wel de  eenvoudigste. Als je daarmee klaar bent heb je de volgende bestanden gecreëerd.

• filmpje.theora.ogv
• filmpje.webmvp8.webm
• filmpje.mp4video.mp4

De naam mag je wijzigen als je de extensie maar laat zoals hij is.

Wat nu nog rest is de code:

We beginnen met de video tag

<video>

En sluiten hem direct even zodat we dit later niet vergeten.

<video></video>

Tevens geven we hem een id en een naam, zodat we hem ook in de css kunnen opmaken. De afmeting van de video geef ik hier ook direct op.

<video id=”film” width=”266″ height=”192″> </video>

Om de video ook de nodig “handvaten” te geven zetten we in de tag “controls”. Dit zorgt voor de nodige “knoppen”. De preload zegt wat het doet. Het laad het filmpje bij het openen van de webpagina.

<video id=”film” width=”266″ height=”192″ preload controls></video>

Dan volgt de src code:

<video id=”movie” width=”266″ height=”192″ preload controls>
<source src=”filmpje.webm”  />
<source src=” filmpje.ogv”  />
<source src=” filmpje.mp4″ />
</video>

Om er voor te zorgen dat de webm file en de ogv juist geïnterpreteerd wordt door de browsers zijn er nog een “type” nodig en moeten de “codecs” worden opgegeven. Ik ga je niet vermoeien met het waarom, maar het is gewoon noodzaak. Je kunt daarover meer lezen op de site van dive into html5.

<video  id=”movie” width=”266″ height=”192″ preload controls>
<source src=”filmpje.webm” type=’video/webm; codecs=”vp8, vorbis”‘ />
<source src=” filmpje.ogv” type=’video/ogg; codecs=”theora, vorbis”‘ />
<source src=” filmpje.mp4″ />
</video>

Nu zullen we de oudere browsers nog moeten bedienen. Dat doen we door middel van het plaatsen van een flashplayer. Het MP4 bestand gaan we af laten spelen met flowplayer. Flowplayer kan je hier downloaden. De flowplayer plaats je op je server. De code die je toevoegt zorgt dan voor een zichtbare player. Even de url aanpassen en hij zal zijn werk doen.

<video id=”movie” width=”266″ height=”192″ preload controls>
<source src=”filmpje.webm” type=’video/webm; codecs=”vp8, vorbis”‘ />
<source src=” filmpje.ogv” type=’video/ogg; codecs=”theora, vorbis”‘ />
<source src=” filmpje.mp4″ />
<object width=”266″ height=”192″ type=”application/x-shockwave-flash” data=”flowplayer-3.2.1.swf”>
<param name=”movie” value=”flowplayer-3.2.1.swf” />
<param name=”allowfullscreen” value=”true” />
<param name=”flashvars” value=’config={“clip”: {“url”: ”http://jouwdomein.nl/filmpje.mp4″, “autoPlay”:false, ”autoBuffering”:true}}’ />
</object>
</video>

Wat we nu nog missen is een stukje code dat er voor zorgt dat het ook zichtbaar is in Android browsers.

<script>
var v = document.getElementById(“movie”);
v.onclick = function() {
if (v.paused) {
v.play();
} else {
v.pause();
}
};
</script>

De complete code ziet er dan dus als volgt uit:

<video  id=”movie” width=”266″ height=”192″ preload controls>
<source src=”filmpje.webm” type=’video/webm; codecs=”vp8, vorbis”‘ />
<source src=” filmpje.ogv” type=’video/ogg; codecs=”theora, vorbis”‘ />
<source src=” filmpje.mp4″ />
<object width=”266″ height=”192″ type=”application/x-shockwave-flash” data=”flowplayer-3.2.1.swf”>
<param name=”movie” value=”flowplayer-3.2.1.swf” />
<param name=”allowfullscreen” value=”true” />
<param name=”flashvars” value=’config={“clip”: {“url”: “http://jouwdomein.nl/filmpje.mp4″, “autoPlay”:false, “autoBuffering”:true}}’ />
</object>
</video>
<script>
var v = document.getElementById(“movie”);
v.onclick = function() {
if (v.paused) {
v.play();
} else {
v.pause();
}
};
</script>

Tijd om te testen!

Veel kans dat het NIET gaat werken. Wat je nog mist is een MIME type. Om niet uit te wijden over wat dat precies is
verwijs ik naar Google! Daar vind je over dit onderwerp van alles.

Wat je nodig hebt is een .htaccess file in de directory waar ook de film bestanden staan. Zo’n file maak je simpel in bijv. wordpad. Zet de volgende tekst in een leeg document:

AddType video/ogg .ogv
AddType video/ogg .ogg
AddType video/mp4 .mp4
AddType video/webm .webm
AddType application/x-shockwave-flash swf

Sla het bestand op zonder als .htaccess en vergeet niet de extensie (.txt) te verwijderen. Zet het bestandje op je server in de folder waar de filmpjes staan.

En hopla! Je hebt een filmpje wat crossbrowser te zien zal zijn. Succes ermee

Het laatste waar ik nog tegenaan liep is dat sommige webservers niet kunnen omgaan met de nieuwe html video tag. Waarom? Ik heb geen idee. Vragen daarover op diverse fora en aan de helpdesk van de webhoster hebben niets uitgehaald. Hopend dat deze webhosting bedrijven gaan begrijpen dat HTML5 toch echt de nieuwe standaard gaat worden.

Een werkend exemplaar heb ik dus op een server staan waar het perfect werkt. Met dank aan Kalb Accountants uit Valkenswaard voor het mooie bedrijfsfilmpje.

Zie hier het resutaat

Video op je website met HTML5 is a post from: Maaswebsites.nl Blog

http://www.website-laten-maken.net/feed/

Als we naar de navigatie van de website kijken is dat een belangrijk onderdeel van je website. Het vertelt de bezoeker wat er zoal gevonden kan worden op jou website. Geef deze “knoppen” niet zomaar een titel, maar doe dat met gevoel. Als je bijvoorbeeld schoenen verkoopt is dat simpel. Een knop met damesschoenen, een met herenschoenen, nog een met kinderschoenen en zo nog wat andere. Maar heb je bijvoorbeeld een accountantskantoor wordt het toch al wat moeilijker. Ik kan me voorstellen dat je als accountant geen knop met “boekhouder” op je website wilt. Toch zullen er meer mensen zoeken naar een boekhouder dan dat ze in eerste instantie denken aan een accountant. Als accountant wil je wel deze klanten bereiken.

Denk daarom goed na over welke woorden je wilt gaan gebruiken voor je pagina’s. Gebruik daarvoor de belangrijkste keywords. Je master keyword gebruik je natuurlijk op de hoofdpagina, maar je mag er altijd nog een tweede pagina aan spenderen om dat nog extra kracht bij te zetten.

Als de accountant dan uiteindelijk besluit om toch een knop te maken met “boekhouding”, zorg dan dat de rest ook klopt. In de title staat dan ook “boekhouding”, de H1 tag heeft boekhouding in zich en in de bodytekst van de website komt minimaal 3 keer “boekhouding” voor. Liefst vooraan, in het midden, en achteraan. Als je alles op een juiste manier doet zal je zien dat dit gaat werken.

Knoppen van afbeeldingen

Sommige websites zijn gemaakt met knoppen van afbeeldingen. Jammer, een gemiste kans. Je kunt hooguit de alt-tekst en de title van de knop het juiste keyword geven maar de zoekmachine zal er minder makkelijk overheen lezen.

Maak dus, indien mogelijk, navigatie met list items. Weet je niet wat dat is, lees dan op de website van Scene One een artikel daarover. Erg duidelijk en uitgebreid. Later kom ik er vast nog eens zelf over terug in deze blog.

Keywords in je navigatie. Interne link. is a post from: Maaswebsites.nl Blog

http://www.website-laten-maken.net/feed/

Ten behoeve van de vormgeving van een website heeft daarom het W3C de Cascading Style Sheet in het leven geroepen. Kortweg CSS.

Ondertussen is men bezig met de ontwikkeling van CSS3. Een aantal browsers geven daarvan zelfs al mondjesmaat stijlen weer. De standaard is CSS2. Totdat CSS3 voldoende ondersteund wordt is het verstandig van deze standaard gebruikt te maken.

Cascading Style Sheet zegt al direct meer. Eenvoudig gezegd: De laatst opgegeven stijl zal worden weergegeven. De volgorde daarvan is eenvoudig.

1. Inline style: Alle opgegeven stijlen in de website code hebben voorrang.

Bijv. het opmaken van een paragraaf kan op deze manier.

<p style=”Hier komt het stijlelement voor deze paragraaf”>Tekst – inhoud</p>

 2. Interne stylesheet: Wordt geplaatst in de<head> en heeft ná de inline stylesheet voorrang.

Je plaatst deze stylesheet op de volgende manier.

<head>
<title>titel van deze pagina</title>
<style type=”text/css”>
<!–
Hier de stijl van deze pagina
–>
</style>
</head>

3. In een externe stylesheet: Deze krijgt voorrang ná de inline style en de interne stylesheet. Deze stylesheet wordt seperaat opgeslagen op de webserver en eindigt met de extensie .css

In de <head> van de webpagina komt een verwijzing naar deze stylesheet. Dat is mogelijk met een link of met een import. Het aanroepen van deze stylesheet gaat als volgt met een link:

<html>
<head>
<title>titel van deze pagina.</title>
<link href=”naam_stylesheet.css” rel=”stylesheet” type=”text/css” />
</head>

of met een import:

<html>
<head>
<title>titel van deze pagina.</title>
<style type=”text/css” media=”all”>

<!–
    @import url(“naam_stylesheet.css”);
–>
</style>
</head> 

Nummer 2 gaan we snel vergeten. Niet meer doen….ouderwets!

Nummer 1 mag…soms….liever niet…

Blijft nummer 3 over.

De opzet van het W3C is om een zo schoon mogelijke code te krijgen. Op die manier zal een website het snelst laden. Bij snel ladende websites is iedereen gebaat. De bezoeker krijgt snel de gevraagde info voor zijn neus, en de server wordt minder belast zodat er minder dataverkeer is en andere websites op dezelfde server ook de kans krijgen om snel te laden.

Dat laatste is tegenwoordig natuurlijk minder relevant omdat server moderne processoren bezitten om de snelheid te waarborgen.

Uitgaande van de stylesheet zoals genoemd onder nummer 3 wordt op de webserver een bestand opgeslagen dat in dit geval “naam_stylesheet.css” heet. Vanzelfsprekend mag dat iedere willekeurige naam hebben, als het maar eindigt op .css.

Het bestand kan gemaakt worden met een simpele teksteditor. Bijvoorbeeld Notepad. Om wat meer duidelijkheid te krijgen in de opbouw kan ook gebruik worden gemaakt van Notepad++, Dreamweaver of elk willekeurige andere editor.

Het document dient te beginnen met een gebruikt characterset, op deze manier:

@charset “utf-8″;
/* CSS Document */ 

Beide regels zijn niet verplicht maar maken het document wat netter. We weten nu immers waar het over gaat.

Daarna kan begonnen worden met de opmaak van de diverse website elementen.

Dit is hiervan een voorbeeld.

body {
 font-family: Arial, Helvetica, sans-serif;
 font-size: 62.5%; /* = 10px */
 background-color: #666666;
 background-position: center top;
 background-image: url(../images/background.jpg);
 background-repeat: repeat-x;
}

h1 {
 font-family: Arial, Helvetica, sans-serif;
 font-size: 22px;
 color: #FFFFFF; 
 margin-left: 240px;
}

h2 {
 color: #333333;
 font-size: 1.8em; 
}

p {
 font-size: 1.2em;
 color: #666666;
 line-height: 1.6em;
 margin-bottom: 20px;
 margin-top: 18px; 
}

In dit stukje CSS wordt de <body>, <h1>, <h2> en de <p> opgemaakt. Eenvoudige zaken als de letergrootte, afstanden en kleuren, maar ook het gekozen lettertype worden hier bepaald. In een volgend bericht zal ik daar vast dieper op in gaan. Elke stijl voor elke element wordt omsloten door accolades. In dit geval gaat het om simpele tag styles. Later ga ik in op id’s en classes.

We zijn opnieuw wat dichter bij het maken van een eigen website gekomen. In het volgende bericht zal ik laten zien wat er gebeurd als je hetHTML en CSS bestand gaat combineren.

Om alvast een beetje in de sfeer te komen kan je eens kijken op de meest bekende site over CSS. Zengarden

CSS geeft de website style is a post from: Maaswebsites.nl Blog

http://www.website-laten-maken.net/feed/

Dit is de basis van je website. Zonder dit zal de browser niet weten wat hij moet weergeven.

In principe komt de inhoud van je website, (het zichtbare deel dus) tussen de <body> tags. Nu hoor de PHP-ers en andere scripters al zeggen: “Da’s niet waar: Mijn script staat in de <head> of zelfs nog boven de DOCTYPE.”

Klopt…maar de browsers zal uiteindelijk enkel en alleen de HTML weergeven. Tenslotte wordt de PHP omgezet naar html en deze html code zal geplaatst worden in de <body>.

Bij Javascript werkt dat iets anders, maar daar kom ik later op terug zodat ik niet te ver afwijk van het onderwerp.

Waar waren we?

De inhoud van de website komt tussen de <body> tags.

<!DOCTYPE html PUBLIC “-//W3C//DTD XHTML 1.0 Transitional//EN” “http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd“>
<html xmlns=”http://www.w3.org/1999/xhtml“>
<head>
<meta http-equiv=”Content-Type” content=”text/html; charset=utf-8″ />
</head>

<body>

Hier komt mijn inhoud!

</body>
</html>

Als je dit voorbeeld in een webbrowser zou open zal enkel dit te zien zijn:

Hier komt mijn inhoud!

Natuurlijk wil je meer dan alleen wat “platte”  tekst. Dat doe je met tags. Met een tag geef je de browser opdracht een deel van de website op een door jou beschreven manier te interpreteren.

Sommige zijn eenvoudig, andere wat ingewikkelder.

• Gewone tekst paragraven worden bijvoorbeeld omgeven door <p> </p>
• Als je een Kop tekst wil gebruik je de <h1> </h1>. Dat kan overigens ook <h2> t/m <h6> zijn. Je begrijp dat de belangrijkste de <h1> zal zijn.
• Als je iets dikgedrukt wilt doe je dat door het woord of de zin tussen deze tags te zetten. <strong> </strong>

Zoals je vast al gezien hebt wordt elke tag geopend en gesloten. <p> Open en </p> sluit. Sinds de komst van XHTML en later met HTML5 is dit verplicht.

Doe je dat niet zal de browsers dingen weergeven die jij anders bedoeld had.

Naast “open-” en “sluittags” zijn er ook zelfsluitende tags bijvoorbeeld de <br /> om een harde return te geven aan een stuk tekst. De tekst achter deze tag zal beginnen op de volgende regel.

Zo zijn er enorm veel tags waarvan er later in deze blog een aantal worden behandeld.

Een opsomming van de mogelijkheden ga ik hier niet geven omdat daar enorm veel mooie websites voor zijn.

Een voorbeeld is deze:  w3school.com

Om deze tags verder vorm te geven is CSS bedacht In de CSS style of stylesheet kan je bepaalde opmaak geven aan de tags.

Vanaf dat moment zal er een wereld voor je open gaan.

Daarover in het volgende bericht meer.

Tags, wat zijn het en hoe gebruik je ze. is a post from: Maaswebsites.nl Blog

http://www.website-laten-maken.net/feed/

3 containers

Elke webpagina zal bestaan uit een 3 tal (geneste) containers. De eerste is de <html> …..</html> Tussen deze2 tags wordt de gehele website geplaats.

Tussen deze tags komen tevens de<head>…</head> en de<body>….</body> tags voor.

De volgorde ziet er dan als volgt uit.

<html>

    <head>

     …..

    </head>

    <body>

     …..

    </body>

</html>

Boven de eerste tag <html> komt een zgn. SGML (Standard Generalized Markup Language)  tag. Dat is de tag die de instructie geeft met wat voor document de browser te maken heeft.

Bij HTML document zal de start er als volgt uit zien:

<!DOCTYPE HTML PUBLIC “-//W3C//DTD HTML 4.01//EN” “http://www.w3.org/TR/html4/strict.dtd“>
<html>

en bij XHTML zo:

<!DOCTYPE html PUBLIC “-//W3C//DTD XHTML 1.0 Transitional//EN” “http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd“>
<html xmlns=”http://www.w3.org/1999/xhtml“>

Wat betekent dat dan allemaal?

Het eerste dat je ziet is het document type DOCTYPE (documenttypedeclaratie) . Je geeft aan of je HTML gebruikt of dat je XHTML en schrijft daar achter de versie. Dan volgt een url die verwijst naar een bestand van W3C. Hier staat de documentstructuur beschreven.

Het bovenste voorbeeld beschrijft eenHTML4.o1 strict en de onderste een XHTML 1.0 Transitional.

Of je strict of transitional moet gebruiken hangt af van hoe strikt je zelf bent.

Wil je verouderde tags gebruiken (zoals <b> voor vet gedrukt ipv <strong>)  in de nieuwere doctype, gebruik dan transitional.
Als je  je nestjes aan de regels houdt dan gebruik je “strict”.

Er bestaat ook nog zoiets als frameset DTD, maar dat mag je snel vergeten. Frames is niet meer van deze tijd.

Helaas kan je niet aangeven welke CSS (stylesheet) je gebruikt. Waarom dat helaas zal later nog duidelijk worden in deze blog.

CSS is het document wat de opmaak van uw website bepaald. Later hierover meer.

Ook bestaat er nog zoiets als “quirks mode”, maar daar wil ik graag een ander hoofdstuk aan besteden.

Wat direct opvalt is dat de<html> tag bij XHTML uitgebreid is met “xmlns……..” De url daarachter verwijst naar de XML-document structuur. Omdat het hier gaat om een vorm van xml is dit attribuut vereist.

Tevens is het mogelijk hier de taal van de website op te geven. Dit is niet noodzakelijk. Wil je dit wel, doe je dat als volgt  <html xmlns=”http://www.w3.org/1999/xhtml” xml:lang=”nl” lang=”nl”>. Let op bij XHTML1.1 mag je de laatste “lang” niet meer gebruiken en blijft het dus bij <html xmlns=”http://www.w3.org/1999/xhtml” xml:lang=”nl”> Wil je een andere taal instellen, dan vind je hier de letters: Languages code xml.

Nogmaals; die “lang” code is niet verplicht.

Kan het dan niet anders?

Ja gelukkig wel! Redding is nabij. HTML5 biedt uitkomst. De DOCTYPE voor HTML5 de opvolger van HTML4 en XHTML heeft de volgende DOCTYPE.

<!DOCTYPE html>

En de rest dan? Dat hoeft niet meer. HTML5 is geen SGML basis en behoeft dus geen verwijzing naar een DTD document. Daarbij is het niet meer hoofdlettergevoelig en kan dus bestaan uit kleine letters.

Ik zou zo zeggen: Leuker kunnen we het niet maken, wel makkelijker. HTML5 is inmiddels te gebruiken maar browsers ondersteunen nog lang niet alles. Er is dus nog volop ontwikkeling. Later hierover vast nog meer.

Zo, dat was een heel stukje theorie. Puur achtergrondinformatie maar niet onbelangrijk. Het volgende hoofdstuk geeft je meer resultaat, dat beloof ik!

Voordat je resultaat ziet…….html, head, body. Maar eerst DOCTYPE is a post from: Maaswebsites.nl Blog

http://www.website-laten-maken.net/feed/

Zelfs de navigatie (knoppen) van je website zijn interne links. Maar alleen daarmee doe je niet aan linkbuilding.

Waarvoor zorgt een interne link?

• Bereik van een pagina. Dat lijkt voor de handliggend, maar dat is het niet.
  Op het internet zwerven miljoenen pagina’s die nooit bereikt worden.
  Ooit heeft men een pagina over een onderwerp geplaatst. Echter, de pagina met de verwijzende link is gewijzigd en de link is daardoor verdwenen. De pagina is blijven staan en zal hooguit nog bereikt worden via een rechtstreekse zoekopdracht.
  Vervelend want veelal werken de links en knoppen op deze pagina niet meer naar behoren en geven ze bij klikken alleen nog de bekende foutpagina’s. Check dus regelmatig op je server of er nog “dode” links zijn.
  Dit kan vaak eenvoudig door het maken van een nieuwe sitemap. Goede programma’s zullen de kapotte links direct ontdekken. Een voorbeeld daarvan is xml-sitemaps.com, maar ook het Google webmaster hulpprogramma ziet ze.
   
• Een interne link associeert met de pagina waar naar toe  gelinkt wordt. Zoals hierboven link je met een duidelijke tekst. Google webmaster hulpprogramma linkt naar de juiste pagina die gaat over dit onderwerp. Dus vooral geen “klik hier”. Vermijd ook de volledige url te plaatsen. Gewoon netjes linken met duidelijke woorden(combinaties).
  Het voorbeeld dat ik hier geef  is natuurlijk een externe link, maar het gaat maar om het idee.

Zorg verder voor:

• Linken die verwijzen naar relevante inhoud. Dus niet het woord “autoband” gaan linken naar een pagina over een nieuwe auto. Dat mag duidelijk zijn.
• Bedenk dat een link gezien wordt. Bij een eerste bezoek aan een pagina wordt meestal de pagina gescand. Bij het scannen worden vooral dikgedrukte, onderstreepte en gelinkte woorden en zinnen gelezen. Houd daar rekening mee bij het opstellen van je teksten.

Hoe kan je er voor zorgen dat een pagina op je website extra “gewicht” krijgt?

Pagina’s die belangrijk zijn voor zoekmachine optimalisatie wil je extra laten opvallen. Daarvoor is intern linken bijzonder geschikt. Hoe vaker een link verwijst naar een pagina des te meer “gewicht” zal de pagina krijgen voor de zoekmachines. Vandaar ook dat je “homepagina” het meeste “natuurlijke” gewicht heeft. Vaak heeft de website een homeknop, maar tegenwoordig wordt ook het beeldmerk of zelfs de gehele header naar de homepagina gelinkt. Wil je dus dat een andere pagina de overhand gaat krijgen, link dan veelvuldig vanaf andere pagina’s naar de desbetreffende pagina. Op die manier krijg je perfecte “landingspagina’s”.

Waar plaats ik een interne link?

• In de navigatie van de website (natuurlijk)
• In de content (teksten van de pagina)
• In de titels (net als in deze weblog)
• In de voetteksten (denk aan: copyrights, disclaimer, enz)
• In subnavigatie,  zoals op deze pagina rechts
• In de Tag cloud, zoals rechts op de pagina

Tenslotte

Wees correct met het plaatsen van interne linkjes. Ook hier; overdaad schaadt! Een pagina die wemelt van de linkjes ziet er natuurlijk niet uit!

Interne link en linkbuilding is a post from: Maaswebsites.nl Blog

http://www.website-laten-maken.net/feed/

De Head teksten (H1, H2, enz) zijn belangrijk voor zoekmachine’s. Hieruit lezen ze af waarover de content gaat. Als je kunt zorgen dat je (master) keyword voorkomt in deze head teksten betekent dit dat de content van de pagina beter opvalt voor de zoekmachine’s. Zorg dan ook dat die head tekst relevant is. Ga geen content plaatsen wat niets te maken heeft met de head tekst die je hebt gekozen.

Voor H2, H3, H4 geldt natuurlijk hetzelfde. Deze lenen zich natuurlijk prima om andere gekozen keywords te plaatsen.

Alle H’s kan je in de stylesheet (css) een eigen opmaak meegeven.

Als het niet mogelijk is om je master keyword te plaatsen in de H1, zorg dan dat hij in ieder geval voorkomt in de H2.

Het belang van deze H1 en H2 is redelijk groot!

Dus wees creatief met je titels!

H1, H2, enz, met je “master keyword” is a post from: Maaswebsites.nl Blog

http://www.website-laten-maken.net/feed/

Natuurlijk ga je die naam registreren. In overleg met de webdesigner ga je op zoek naar je “master keyword”. Na wat te hebben gebrainstormd kom je uit op “kinderfietsen Eindhoven”.

De website wordt gemaakt en het master keyword wordt overal gebruikt zoals het behoord. De website wordt geïndexeerd en Google zet je (bijna) bovenaan. Waarom niet helemaal bovenaan?
Omdat “dekinderfietsspecialist.nl” daar al staat.

Die heeft namelijk in zijn domeinnaam “kinderfiets” gebruikt en is nog gevestigd in Eindhoven ook.

Hoe zorg je er nu toch voor dat jouw site kan concurreren met deze en andere websites?

Registreer een tweede domeinnaam: www.kinderfietsen-eindhoven.nl.
Die nieuwe naam ga je eigenlijk als primaire naam gebruiken. Op dit domein wordt de website geplaatst. Alle regels voor keywords, die in deze weblog staan, heb je netjes opgevolgd. Al snel zal je zien dat de website gaat meedoen om de eerste plek van de zoekmachines.

De door jou gekozen naam www.doortrapper.nl kan je gewoon gebruiken op je briefpapier en visitekaartjes. Deze naam laat je doorlinken naar www.kinderfietsen-eindhoven.nl . Dat kan je het beste doen met een domainpointer of via site redirect. Als je die laatste gebruikt, zorg dan wel dat je  de type op “301 Permanent” zet. Als je dat niet doet wordt je genadeloos afgestraft door Google.

Zo heb je een domeinnaam die scoort voor de zoekmachines met jouw master keyword en een domeinnaam voor de rechtstreekse bezoekers.

Alle genoemde naam zijn puur fictief behalve die van de kinderfietsspecialist die echt bestaat!

Domeinnaam met Keyword is a post from: Maaswebsites.nl Blog

http://www.website-laten-maken.net/feed/

Wat is precies die title tag?

De title tag is een titel die je meegeeft aan de pagina van je website. Deze titel is niet te zien op de pagina zelf, maar wordt gebruikt door zoekmachine’s om de website te indexeren. De title tag wordt geplaats in de code van de website tussen deze tags. “<head>……………..</head>”. De zin of woorden die je gaat gebruiken voor deze title worden plaatst tussen deze tags. “<title>hier uw tekst</title>”.

Deze tekst zie je in de blauwe balk van Firefox of Internet Explorer helemaal bovenaan het venster. Dezelfde tekst staat dan ook op de “tabbladen” van de browers, als je tabbladen gebruikt tenminste.
Als je deze title niet gebruik op je website zal er op deze plaatsen alleen de url van de pagina te zien zijn.
Als je een standaard html-editor gebruikt zal die editor meestal standaard “Untitled Document” tussen de title tags plaatsen.
Persoonlijk vind ik dat nog slordiger dan dat je de title tag leeg laat.
De title tag wordt tevens door Google gebruikt als titel. Dat is de blauwe regel die je ziet als zoekresulataten in Google.

Waar plaats je de title tag?

Deze “<title> </title>” plaats je meteen onder de “<head>” tag.
Liefst niets er tussen. Op deze manier zal dit het eerste zijn wat de zoekmachinerobot zal lezen.
In deze title zet je de belangrijkste zoekwoorden(combinaties) Te beginnen met je master keyword.
Er zijn “deskundige” die zeggen dat het niet uitmaakt waar het masterkeyword staat in de title.
Naast dat het, naar mijn mening, wel degelijk uitmaakt ,staat het beter vooraan in de title.
Mensen die zoeken op jou master keyword zullen sneller klikken op een title met het keyword vooraan in de title dan dat dit woord elders voor komt.

Hoe belangrijk is het keyword in de title?
Naar mijn mening is dit het belangrijkste deel van zoekmachine optimalisatie.
Google zal dit belangrijk vinden voor indexering, maar daarnaast is het zeker zo belangrijk dat die title klopt.
Stel je het volgende voor;
Ik verkoop schoenen. De naam van de winkel is “Shoestore” Mijn specialiteit is herenschoenen. Het grootste deel van mijn winkel is daarmee gevuld. Daarnaast verkoop ik dames- en sportschoenen maar heb ik ook een schoenmakerij.
Ik laat een website maken en vertel dit de webdesigner die op zijn beurt een title opstelt.
“<title>Shoestore, herenschoenen, damesschoenen, sportschoenen, schoenmakerij</title>”

Onderstaand even gezocht, met Google,  op herenschoenen.

Als we de gesponserde links in het roze vak buiten beschouwing laten zullen de meeste mensen als eerste klikken op de tweede link. Herenschoenen staat hier immers vooraan de regel en valt meer op dan de bovenste. De link van Dolcis zal daarom zelden worden gebruikt.

Daarnaast werkt een leesbare link, kort en zakelijk, het best. Losse steekwoorden worden over het algemeen minder gewaardeerd. Dus…

Voor mijn schoenenzaak was “<title>Herenschoenen koop je het best bij Shoestore</title>” beter geweest. De andere zoekwoorden kan je dan gebruiken voor andere subpagina’s.

Elke pagina draagt natuurlijk een unieke “<title>”.

Wil je toch een aaneenschakeling van zoekwoorden gebruiken maak er dan een duidelijke opsomming van. Dat kan bijzoorbeeld zo:

“<title>Herenschoenen | damesschoenen | sportschoenen | schoenmaker</title>”

Hierbij valt natuurlijk op dat “schoenmakerij” plaats heeft gemaakt voor “schoenmaker”.

Men zal immers sneller zoeken met het zoekwoord: schoenmaker.

De bedrijfsnaam is niet nodig, die komt zeer waarschijnlijk toch al voor in de domeinnaam. Wil je die wel gebruiken plaats hem dan achetr aan in de title. Zorg er voor dat de titel nooit langer is dan 70 caracters. De rest valt namenlijk buiten beeld bij de zoekresulataten en in de titelbalk van de browser.

Keyword in de title tag is a post from: Maaswebsites.nl Blog

http://www.website-laten-maken.net/feed/

Keywords zijn op zijn Nederlands gezegd, de woorden waarmee je gevonden wilt worden. Zoekwoorden dus. Van deze zoekwoorden bepaal je altijd een soort van hierarchy.

Voor jezelf bepaal je welk zoekwoord of zoekwoorden combinatie je de meest belangrijke vindt. Zie dat als een hoofdtaak, voordat je teksten gaat schrijven voor je website.

Hoe doe je dat?
Bedenk hoe mensen gaan zoeken naar jou website. Als je dat zelf niet weet vraag het dan een ander die niet in dezelfde branche zit. Je zult zien dat ze andere zoekwoorden zullen noemen dan dat je zelf zou doen. Zoek naar zoekwoorden combinaties, niet naar losse zoekwoorden. Steeds vaker zoeken mensen namelijk met combinaties van zoekwoorden. Onderstaande tabel geeft het verschil weer in zoekwoorden gebruik in 2008 ten opzichte van 2010. bron: uptrends.com

Het is dan ook daarom dat Google het aantal mogelijke zoekwoorden in één zoekopdracht heeft verruimd van 10 naar 32 zoekwoorden. Probeer dus niet te scoren op enkelvoudige zoekwoorden tenzij je in een niche markt opereert.

Wil je weten hoe vaak er gezocht wordt op jou zoekwoordencombinatie check dat dan via de zoekwoordenhulpvan Google. Dat geeft je tevens de mogelijkheid om op ideeën te komen voor andere zoekwoorden en zoekwoordcombinaties.

Genoeg over zoekwoorden, meer over keywords.

Is dat niet hetzelfde dan? Jawel, maar voor de duidelijkheid moeten we het over keywords hebben. De letterlijke vertaling dekt ook meer de lading. Dat zal later duidelijk worden.

Waar, op je website, worden keywords gebruik en waar zijn ze het belangrijkst? 

In volgorde van belang heb ik hier de plaatsen opgesomd waar keywords worden gebruikt op jou website. Wees gerust ze worden later nog allemaal uitgelegd.

1. Ergens in de “title” tag
2. In de domeinnaam
3. In de H1 headline
4. In een interne link
5. In een externe link
6. Het eerste woord van de H1 headline
7. In de eerste 50 tot 100 woorden van de content
8. In een subdomeinnaam
9. In de paginanaam url
10. In de paginafolder
11. In andere headlines H2 – H6
12. In image alt teksten
13. Herhalen van keywords in de content
14. In de naam van de afbeeldingen
15. Gebruikt in de bold teksten

Ok, ik ben er een aantal vergeten, voor de oplettende onder ons. Dat zijn er namelijk een aantal die weinig tot zeer weinig invloed zullen hebben. Het kan natuurlijk nooit kwaad om ze toch mee te nemen.

Hier komen ze dan in sneltreinvaart.  Gebruik in listitems (<li>), gebruik in php urls met een vraagteken, gebruik in italic teksten, gebruik in meta description, gebruik in comment tags, gebruik in de meta keywords tag.

Ook deze zal ik later kort bespreken, de belangrijkste natuurlijk eerst.

Keywords, het belangrijkste? is a post from: Maaswebsites.nl Blog

http://www.website-laten-maken.net/feed/