arjans
help your mate if you can
- Lid geworden
- 26 nov 2011
- Berichten
- 738
- Waarderingsscore
- 0
tutorial website optimalisatie
inhoudsopgave- meta tags
- h1-h6 tags
- titel aanpassen
- 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
Code:
www.domein.nl/home-tutorial-ncf
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
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>
PHP:
$page = str_replace('{title}',$_GET['page'].' - nationaalcomputerforum-tutorial', $page);
$page = str_replace('{content}',$subpage, $page);
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
Code:
www.domein.nl/home/weetikveel
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: