website optimalisatie

arjans

help your mate if you can
#1
tutorial website optimalisatie​
inhoudsopgave
  1. meta tags
  2. h1-h6 tags
  3. titel aanpassen
  4. url verbeteren(apache)



in deze tutorial wil ik jullie helpen je website te verbeteren. dit is vaak een lastig onderwerp en sommige mensen weten niet eens dat de middelen bestaan. voor deze tutorial is wel een beetje kennis verijst. je moet op zijn minst kennis hebben van html en css. php en apache kennis zou heel mooi meegenomen zijn. heb je geen php kennis dan is het nog handig om deze tutorial te lezen.

we beginnen maar eens met de vindbaarheid van je website. hoe zorg je ervoor dat je website hoog scoort in de zoekmachine's. hieronder een aantal tips:

1.
zorg ervoor dat je logische html gebruikt. logische html bedoel ik mee dat je html gebruikt zoals het bedoeld is. ga je vreemde constructies maken dan heb je grote kans dat de zoekmachine je strafpunten gaat geven (spreek uit ervaring). heel belangrijk is dus dat je html goed is maar wat is dan een goede opbouw?

een goede opbouw is deze:
HTML:
<!DOCTYPE HTML>
<html>
<head>
<link rel="stylesheet" type="text/css" href="css/css.css" />
<link rel="shortcut icon" HREF="images/icon(1).ico" TYPE="image/x-icon">
<meta name="description" content="de beschrijving van je website komt hier deze is ongeveer 150 woorden." />
<meta name="keywords" content="hier, komen, je, keywords, die, je, invoerd, met, een, comma, er, tussen"/>		
<meta name="author" content="Arjan S" />
<meta charset="utf-8"/>
<title>hier komt je titel</title>

</head>
dit is een duidelijke opbouw van je website (het begin. dit staat in de <head>)
je begint met te vertellen wat voor versie html je gebruikt (niet belangrijk voor de zoekmachine maar dit moet er altijd bij om je website goed weer te geven en om verschil in browsers een stukje voor te zijn.)

daarna ga je de meta tags invullen. in de meta tags zet je alle info over je website. deze kan per pagina verschillen. je mag dus voor alle pagina's een specifieke meta aanmaken. dit is wel wat meer werk en google zoekt niet meer op de meta tags omdat mensen er verkeerde woorden inzetten, woorden waar mensen veel opzoeken. doe dit niet!!! vul de meta description in met een zin of paar zinnen van 150 woorden. daarna de meta keywords. je kunt er zoveel als je wilt invoeren gescheiden door een komma(,) (je kunt ook gewoon een spatie tussen de woorden doen bv. nationaal computer forum. het hoeft dus niet strikt een woord te zijn)
verder kun je nog de meta author invullen. is verder niet belangrijk. er zijn nog veel meer meta opties maar behandelen we hier niet.
op de inhoud van de titel gaan we zo in.

2.
verder heb je de h1-h6 tags. hierin geef je belangrijke kopjes weer. deze zijn met css aan te passen. in de h1 tag zet je het belangrijkste van de hele websites. ook geven we hier even een kijkje in de menu structuur van html.

de opbouw van een website is dus als volgt.
HTML:
<!DOCTYPE HTML>
<html>
<head>
<link rel="stylesheet" type="text/css" href="css/css.css" />
<link rel="shortcut icon" HREF="images/icon(1).ico" TYPE="image/x-icon">
<meta name="description" content="de beschrijving van je website komt hier deze is ongeveer 150 woorden." />
<meta name="keywords" content="hier, komen, je, keywords, die, je, invoerd, met, een, comma, er, tussen"/>		
<meta name="author" content="Arjan S" />
<meta charset="utf-8"/>
<title>hier komt je titel</title>

</head>
<body>

<ul class="menu">
<li class="li">Home</li>
<li class="li">Tutorial</li>
<li class="li">Handleiding</li>
<li class="li">Nationaalcumputerforum</li>
<li class="li">Contact</li>
<li class="li">Over ons</li>
</ul>
<div id="home">
<h1>Tutorial</h1>
<p class="text">In deze tutorial leest u over zoekmachine's en hun zoekwijze.</p>
<h2>Wat te doen bij het maken van een website</h2>
<p class="text">Maak je html zo goed mogelijk met een duidelijke structuur...bla.....bla.....bla</p>
<h3>verdere tips</h3>
<p class="text">Je maakt een goede meta.....bla....bla....bla</p>
</div>
</body>
</html>
je ziet dat de h1-h3 zijn gebruikt. je kunt uiteraard gewoon tot 6 gaan. een goed hulpmiddel om je html duidelijk en goed te laten zijn is met deze website: validator.org. hiermee kun je zien of je je html volgens de regels van html hebt gemaakt.

maak ook een menubalk met goed gekozen woorden. dit zodat bezoekers als ze al op je website zijn misschien langer blijven.

3.
je titel is een zeer belangrijk deel van je website. misschien zonder dat je het zelf in de gaten hebt, is dit een zeer goed middel om mensen naar je website te krijgen. de titel is iets dat opvalt. gebruik dus een duidelijke titel en denk daar lang genoeg over na. een titel mag zoveel tekens bevatten als je wilt. alleen er komt maar een deel in de titelbalk te staan van je browser. gebruik daarom dus ongeveer 100 tekens.
zoekmachines laten deze title ook zien. hier volgt een lijstje van internet over de lengte van de tilte.
66-69 karakters - Google
64-65 karakters - Yahoo
67-72 karakters - Bing
probeer dus rond de 65 karakters te zitten dan is het altijd goed. nogmaals, geef een goed beeld van de inhoud van de pagina.

4.
dit is een iets lastiger deel van de tutorial. voor mensen zonder php is dit waarschijnlijk slechter te volgen. de echte php gebruikers kennen dit waarschijnlijk al.
je ziet vaak dat er in de url een domein staat met daarachter een landcode en dan /... het probleem is dat de bestands naam achter het domein staat. dit is niet de bedoeling vaak. hier is wat aan te doen. eerst nog even de standaard opbouw:
Code:
www.domein.nl/home.html
stel je wilt dit:
Code:
www.domein.nl/home-tutorial-ncf
hoe doe je dat?
je doet dit met een .htaccess bestand een apache bestand. die upload je dus ook op de server. sommige mensen vergeten dit omdat het een bestand is dat normaal verborgen is. wat is de inhoud van dit bestand?
Code:
RewriteEngine On
RewriteRule ^([+a-z-_()0-9]+)?/?([+a-z-_()0-9]+)?/?([+a-z-_()0-9]+)?/?$ index.php?page=$1&subpage=$2&argument3=$3 [NC,L]
je kunt eventueel dit in je code erbij zetten. dan wordt index.php standaard als eerste gekozen. mocht er toch een index.html aanwezig zijn dan heb je daar iedergeval geen problemen mee.

Code:
DirectoryIndex Index.php
zet dit in je apache bestand genaamd .htaccess

het is teveel om uit te leggen hoe het in elkaar steekt. je kunt het gebruiken.
je hebt hierbij wel een index.php nodig, te zien in de code. die code is dan als volgt:
PHP:
<?php
session_start();

$page = file_get_contents('html/index.html');

if(!$_GET['page'])
{
	//$_GET['page'] = 'home';	
	header('Location: home');
}
if(!empty($_GET['argument3']))
{
	$subpage = $_GET['argument3'];
}
elseif(!empty($_GET['subpage']))
{
	$subpage = $_GET['subpage'];
}
elseif(!empty($_GET['page']))
{
	$subpage = $_GET['page'];
}

if(!file_exists('html/'.$subpage.'.html'))
{
	$subpage = 'niet-gevonden';
}
$subpage = file_get_contents('html/'.$subpage.'.html');

switch($_GET['page'])
{
	case 'contact':
		require_once('php/contact.php');
	break;
}
/*
	Deze functie zoekt naar een term, bv {content} en kan je vervangen met je nieuwe inhoud
	$page = str_replace('wat je wil vervangen','waarmee je het vervangt', 'waarin je het vervangt.');
*/
$page = str_replace('{title}',$_GET['page'].' - nationaalcomputerforum-tutorial', $page);
$page = str_replace('{content}',$subpage, $page);
/*
	Hiermee stuur je de inhoud van $page naar de browser
*/
print($page);
?>
ik was niet van plan om veel php uit te leggen omdat deze tutorial daar niet voor geschreven is. ik gebruik geen objecten en classes omdat dat lastiger te begrijpen is.

even een noodzakelijk verhaaltje:
om een goede website te maken gebruiken veel mensen php. ze beginnen met een index.php te maken. daarna maken ze een index.html. zet deze het liefst in een andere map op de server want de meeste servers kiezen index.html boven index.php. in de index.html zet je de dingen die in de head staan en dingen. oftewel je zet alles wat op alle pagina's moet staan zet je in de index.html. bijv.
HTML:
<!DOCTYPE HTML>
<html>
<head>
<link rel="stylesheet" type="text/css" href="css/css.css" />
<meta name="description" content="ff probere" />
<meta name="keywords" content="haha"/>		
<meta name="author" content="Arjan S" />
<meta charset="ISO-8859-1"/> 
<title>{title}</title>
</head>
<body>
<div id="home"></div>
{content}
</div>
</body>
</html>
je ziet dat er {titel} en {content} staat. deze worden met dit stukje php veranderd in het gewenste resultaat.
PHP:
$page = str_replace('{title}',$_GET['page'].' - nationaalcomputerforum-tutorial', $page);
$page = str_replace('{content}',$subpage, $page);
ik ga het niet verder uitleggen. ik hoop dat je bovenstaande snapt.

okee, nu tijd voor het stukje waar het om ging.
door het .htaccess bestand word er nu het gewenste resultaat geregeld. de homepage is nu dus:
Code:
www.domein.nl/home
zorg ervoor dat wat er achter de / staat een mooi en aantrekkelijk iets is maar wat nog wel in te typen is. nog een opmerking. als er dit
Code:
www.domein.nl/home/weetikveel
dan wordt argument3 gezocht. argument3 houdt in dat er een pagina is met de naam niet-gevonden.html. deze wordt dan getoond op het scherm.

als je ervoor zorgt dat je al deze methoden op je website hebt dan is de kans groot dat je hoog scoort in google en andere zoekmachines.

nu nog de manier om de bezoekers op je websites te houden. dat doe ik misschien in mijn volgende tutorial. ook het toegankelijk houden voor blinden en kleurenblinden op je website wordt behandeld. heb je vragen dan kun je altijd een topic openen in het webdesign gedeelte op deze website. grote kans dat ik je wil proberen te helpen. commentaar van harte welkom. evt. door een privebericht.

als je dit alles wilt testen heb je een ontwikkelomgeving nodig om alles te testen omdat php een html code genereert en een browser geen php snapt. hier een linkje naar een goede.
 
Laatst bewerkt door een moderator:

David

Verslaafd
#2
Voor ik begin met lezen valt mij gelijk op dat je geen titels gebruikt. Alleen 1. 2. 3.

[kopje]Gebruik kopjes[/kopje]

en dan kan je hier naar linken in een inhoudsopgaven
  1. [linkje]Gebruik kopjes[/linkje] <- klik daar maar eens op

Hierdoor verbeter je de leesbaarheid van je handleiding :)


edit

Ik heb nu je handleiding gelezen en qua. inhoud vind ik de handleiding top. Alleen probeer er nog op te letten dat na een punt een hoofdletter moet :)

Ook zag ik je dit vertellen:
even een noodzakelijk verhaaltje:
om een goede website te maken gebruiken veel mensen php. ze beginnen met een index.php te maken. daarna maken ze een index.html. zet deze het liefst in een andere map op de server want de meeste servers kiezen index.html boven index.php. in de index.html zet je de dingen die in de head staan en dingen. oftewel je zet alles wat op alle pagina's moet staan zet je in de index.html. bijv.
Hier is een heel simpel trucje voor, genaamd DirectoryIndex. Dit is misschien nog een mooie toevoeging :)
 
Laatst bewerkt door een moderator:

arjans

help your mate if you can
#3
je bedoelt dat de index.html standaard gegeven wordt als je bijv deze link aanklikt.
Code:
www.jwz.nl
dan wordt het
Code:
www.jwz.nl/index.html
de standaard instelling van de server?
stond dat er niet al bij?

bedankt voor je positieve commentaar. hoop dat mensen er wat aan hebben
 
Laatst bewerkt door een moderator:

arjans

help your mate if you can
#5
ok dacht al dat zou ik er idd bij kunnen zetten. alleen dan wordt het misschien nog ingewikkelder voor de mensen die geen php en apache gebruiken. ik zet het er niet bij want dan klopt het verhaal niet meer. ik zet het er gewoon bij als extratje voor de mensen die het snappen:)


om de hoofdletters nu nog aan te passen is beetje veel werk. je heb idd gelijk.
je locatie 127.0.0.1 doet me er aan denken dat ik nog moet zeggen dat er localhost aanwezig moet zijn of een andere ontwikkelomgeving. poeh tut maken is lastiger ask dacht:wall:



misschien dat ik via een gratis host ntje met een subdomeinnaam het voorbeeld kan showen met de code erop. weet je misschien daar een goede host voor met alles erop en eraan. apache mysql php phpmyadmin etc etc

wil misschien nog meer schrijven maar heb geen zin om ervoor te betalen dus weet iemand misschien wat handigs?
 

arjans

help your mate if you can
#7
bij mij kan je intypen localhost/arjans/home of je typt in 127.0.0.1/arjans/home. daarom dacht ik eraan. goed gekozen bedankt :fun:

ik zal eens kijken bij deze webhosting. is het gelukt dan plaats ik de link in het forum.
 

arjans

help your mate if you can
#9
ok gebruik je die ook. @niels ik maak op die webiste dan misschien dan ook wel een login tutorial.
 
#10
Hoi Arjans,
Goe artikel hoor maar wellicht een handige aanvulling voor mensen is de mogelijkheden om de zoekresultaten in de SERPS bovendien aantrekkelijker te maken. Een verhoogde CTR kun je bereiken door de zoekresultaten aantrekkelijker te maken met de google rich snippets. Ik heb op mijn blog een stukje geschreven hierover en is wellicht een handige aanvulling voor mensen die Wordpress gebruiken. http://goo.gl/24ATpg
Groet,
Robert-Jan
 

Nieuwste berichten

Bovenaan Onderaan