Frage stellen
ich sehe leider viele Webmaster welche zwar solide Seiten erstellen, jedoch in den wichtigen Bereichen kläglich scheitern.
Lasst uns das Internet verschönern und fangen bei der 1. Zeile an ..
Doctype:
Aktuell ist XHTML 1.0 Strict an der Spitze, HTML5 ist allerdings auch bereits gern gesehen.
Alle älteren Versionen werden schlechter bewertet. (z.B. HTML 4.01 oder XHTML 1.0 Transitional)
HTML & CSS Validation:
Fehler in beiden Bereichen werden nicht toleriert. Unten findet ihr die Links zur Überprüfung.
Wichtig ist es, ausnahmslos alle CSS definitionen extern auszulagern.
Folgender Code ist in jedem Fall zu vermeiden (man spricht von Spaghetti-Elementen):
- Code: Alles auswählen
<span style="font-weight: bold">...</span>
Rightige verwendung:
- Code: Alles auswählen
<span class="bold">...</span>
Layout-Tabellen:
Absolutes No-Go!
Ein Aufbau mit Tabellen bezeichnet man als "nicht barrierefrei", da Personen mit einer Sehbehinderung die komplette Seite in Zeilen und Spalten vorgelesen bekommen und sich somit überhaupt nicht zurecht finden.
Deshalb ist die Benutzung von <div> - Containern für Layout Elemente sozusagen Pflicht.
Tabellen sind ausschließlich für Daten zu verwenden.
Frameset:
Webseiten die mit Frames aufgebaut sind gelten als veraltet und erhalten schlechtere Positionen in Suchmaschinen, da die Hauptseite (in der das Frameset liegt) keinen Content aufweist.
Language-Key:
Dient für die sprachlich korrekte Zuordnung der Webseite.
Der Befehl sieht beispielsweise in XHTML wie folgt aus:
- Code: Alles auswählen
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="de" lang="de">
<head>
<title>...</title>
<meta http-equiv="content-language" content="de" />
</head>
Verhältnis Content zu Quelltext:
Achtet darauf keine unnötigen Code-Blöcke nieder zu schreiben, sondern kümmert euch über den wirklichen Inhalt der Webseite. Das Verhältnis von Inhalt zu Quelltext sollte von 42% an aufwärts betragen.
Meta-Description:
Die "Description" taucht in Suchmaschinen als Beschreibung zur Webseite auf und fließt in das Keyword-Ranking mit ein. Die optimale Länge dieser Beschreibung liegt bei etwa 150-165 Zeichen, denn alles was darüber hinaus geht wird abgeschnitten.
Verwendet darin ebenfalls die drei wichtigsten Keywords der Webseite.
Duplicate Content:
Doppelter Content taucht auf, wenn die Homepage unter http://www.homepage.de und http://homepage.de mit dem selben Inhalt zu erreichen ist.
Um dies zu vermeiden muss in der .htaccess Datei eine Um- bzw. Weiterleitung von der einen zur anderen Domäne hinterlegt sein (man spricht von 301 redirect).
XML-Sitemap:
Zur besseren Indizierung der einzelnen Seiten, sollte den Suchmaschinen eine sitemap.xml Datei zur Verfügung gestellt werden.
Diese sieht beispielsweise wie folgt aus:
- Code: Alles auswählen
<urlset xsi:schemaLocation="http://www.sitemaps.org/schemas/sitemap/0.9 http://www.sitemaps.org/schemas/sitemap/0.9/sitemap.xsd">
<url>
<loc>http://homepage.de/</loc>
<changefreq>never</changefreq>
<priority>1.00</priority>
</url>
<url>
<loc>http://homepage.de/impressum.php</loc>
<changefreq>yearly</changefreq>
<priority>0.80</priority>
</url>
<url>
<loc>http://homepage.de/index.php</loc>
<changefreq>monthly</changefreq>
<priority>0.64</priority>
</url>
</urlset>
robots.txt
Die robots.txt ist eine Textdatei, welche im Hauptverzeichnis der Domain liegen sollte und zugriffs-Anweisungen für Suchmaschinen enthält.
Diese sieht beispielsweise wie folgt aus:
- Code: Alles auswählen
User-agent: *
Disallow: /fehlerseite.php
Disallow: /news.php
Interne Links:
Gute Werte erreicht man mit mind. 20 Links auf einer Seite.
Favicon:
Es ist das kleine Bildchen welches links neben der Homepage im Browser angezeigt wird.
Erstellt eines. Unter folgendem Link könnt ihr kostenlos eine Datei konvertieren - http://tools.dynamicdrive.com/favicon/
In HTML wird dieses wie folgt (im <head>-Bereich) eingebunden
- Code: Alles auswählen
<link rel="shortcut icon" href="./pfad/favicon.ico" />
ALT-Texte für Bilder:
Belegt alle Bilder mit einem aussagekräftigen Alt-Text. Dieser wird beispielsweise bei Benutzern von Textbrowsern dargestellt, aber auch für Suchmaschinen ist dieser Text wichtig da diese Bilder noch nicht interpretieren können.
- Code: Alles auswählen
<img src="pfad/haus.jpg" alt="Mehrfamilienhaus" />
Title-Attribut für Links:
Über dieses Attribut könnt ihr den Benutzern eurer Webseite weitere Informationen zum Ziel eines Links zur Verfügung stellen. Links ohne href werden nicht gezählt.
- Code: Alles auswählen
<a href="pfad/impressum" title="Link zum Impressum und allen rechtlichen Angaben">Impressum</a>
Individuelle Fehlerseiten:
Falls eine Seite deines Internetportals nicht gefunden wurde, wird der Fehler 404 ausgegeben.
Diese wird ebenfalls über die .htaccess Datei angesteuert und definiert:
- Code: Alles auswählen
ErrorDocument 404 /fehlerseite.php
"Requests" und Größe der Dateien:
Dies ist die Summe der Dateien, welche geladen werden müssen um die Webseite darzustellen.
Versucht daher die Zahl möglichst klein zu halten und jeglichen Code auf ein Minimum zu komprimieren. Beachtet hierbei dass z.B. ein Leerzeichen oder Tabulator ebenfalls wenige Byte in anspruch nehmen.
CSS zur weiteren Bearbeitung:
- Code: Alles auswählen
* {
margin: 0;
padding: 0;
}
html body {
background-color: #F1F1F1;
font-family: Georgia,Garamond,Times,serif;
font-size:12px;
color: #333333;
overflow: hidden;
}
img {
border: 0;
vertical-align: bottom;
}
Komprimierte CSS Datei:
- Code: Alles auswählen
*{margin:0;padding:0;}html body{background:#F1F1F1;font:12px Georgia,Garamond,Times,serif;color:#333333;overflow:hidden;}img{border:0;vertical-align:bottom;}
Die wichtigsten Links:
http://www.google.de
http://validator.w3.org/
http://jigsaw.w3.org/css-validator/
http://www.301redirect.de/
http://www.xml-sitemap.de/
http://de.selfhtml.org/diverses/robots.htm
http://www.marko-junior.de/fehler.php
