Head
Einführung in den Kopf
In den Head werden Tags gepackt, welche vom Browser nicht direkt als Inhalt angezeigt werden (im Gegensatz zu dem, was zwischen den Body-Tags steht). Dennoch sind es wichtige Informationen für den User oder seinen Browser bzw. die Suchroboter.
<head>...</head>
Der Head (Kopf) folgt auf den <html> Opentag (der </html> Endtag steht ganz am Ende des Quellcodes).
Was also alles so zwischen den <head>...</head> Tag rein kommt und welche Wirkung dies zeitigt, wird hier beschrieben.
Titel
<title>...</title>
Was zwischen den title-Tags steht, erscheint im Fensterbalken des Browsers oder als Tab Beschriftung als Seiten-Titel (wird die Seite in einem Frameset dargestellt, dann erscheint derjenige Titel der Framesetseite).
Man nimmt an, dass diese Titel von einigen Suchmaschinen besonders berücksichtigt werden (5 Worte, sagt man, seien akzeptabel). Der Seitentitel wird als Link angezeigt als Ergebnis von Suchmaschinen.
Wird die Seite im Browser als Bookmark versehen, also zu den Favoriten hinzugefügt, dient der Titel auch als Name für das Lesezeichen. Der Seitentitel ist nicht zu verwechseln mit dem Dokumentname oder Fensternahme.
(Es gibt auch noch ein Attribut title="Das Attribut title in Aktion", welches eine Bemerkung einblendet.
Bitte Mauszeiger über diesen Text positionieren.)
Favicon
<link rel="shortcut icon" />
Das favicon.ico ist ein 16 x 16 Pixel kleines Bildchen, welches vom Browser am Anfang der Adresszeile, dem Tab und auch vor dem Favoriten-Eintrag abgebildet wird. Im Prinzip genügt es, das favicon.ico in den obersten Site-Ordner zu legen (z.B. der Ordner 'public_html' oder www). Die Browser suchen dort automatisch nach dem Bild mit diesem Namen und dieser Endung. IE 5 zeigte das Favicon aber nur in der Adresszeile, wenn die Site als Favorit abgelegt wurde.
Will man unterschiedliche Favicons für unterschiedliche Seiten zeigen, so kann im Head jeder Datei mittels Link-Tag der Speicherort des favicon.ico angegeben werden:
<link rel="shortcut icon" href="http://www.biefer.com/favicon.ico">
Dabei muss der Pfad nicht absolut geschrieben werden und das Icon muss auch nicht favicon heissen.
Das Favicon.ico muss mit einem speziellen Program erstellt werden (man kann nicht einfach ein gif umbenennen; das Bilbearbeitungprogramm IrvanView kann das Umwandeln übernehmen, 256 Farben sollten genügen und Transparenz ist erlaubt).
Die Konfiguration des richtigen Mime-Type bei Apache geht so: Im obersten Verzeichnis der Website (bei mir 'public_html') eine Datei mit dem Namen .htaccess anlegen, die die folgende Zeile enthält:
AddType image/x-icon .ico
Inzwischen wurde ein Standart geschaffen, welcher W3C konform ist, da im Attribut eigentlich kein Leerschlag erlaubt ist (rel="shortcut icon").
AddType image/vnd.microsoft.icon
Und inzwischen darf das Bild diese Endungen aufweisen: *.ico, *.png, *.gif (auch animiert) und *.jpeg.
und es darf 16x16 oder 32x32 Pixel gross sein bei einer 8-bit or 24-bit Farbtiefe (color depth).
Der korrekte Link sieht dann so aus:
<link rel="icon" type="image/gif" href="http://example.com/image.gif" /> (für XHTML)
Zielfenster
<base />
Der unpaarige Base-Tag, mit seinem Attribut <base target="irgendeinfenster" /> macht,
dass alle Links dieses Dokuments auf jenes Browserfenster (oder auf jenen Frame) namens "irgendeinfenster" zielen.
Weitere Fensternamen siehe unter Links.
Stylesheet
Die CascadingStyleSheets werden ausführlich in einem eigenen Teil behandelt.
Internes CSS
<style>...</style>
Ein internes Stylesheet schreibe ich so: <style media="screen" type="text/css">Hier stehen die Style-Anweisungen</style>
Externes CSS
<link rel="stylesheet" />
Zu einer externen Stylesheet-Datei verlinken, welche z.B. die Hintergrund-Farben, Schriftgrössen und allerlei weitere Styles für die gesammte Site vorgibt:
<link rel="stylesheet" href="../css/globalstyle.css /> Es gibt also eine Stylesheet Datei namens globalstyle.css in einem Ordner namens css, welcher sich nicht im gleichen Ordner wie diese Seite befindet.
Wie Links relativ zur Position geschrieben werden, siehe unter Links.
Importiertes CSS
<style> @import ...</style>
<style type="text/css" media="all"> @import url("../css/globalstyle.css"); </style>
Javascript
Die JavaScript werden ausführlich in einem eigenen Teil behandelt.
Internes Javascript
<script type="text/JavaScript">...</script>
Ein Javascript im Head welches automatisch z.B. ein prompt( ) Fenster öffnet, etc., sollte möglichst am Anfang stehen,
damit es gleich ausgeführt wird, ohne dass zuerst schon etwas anderes geladen wurde.
Ein internes Javascript schreibe ich so: <script type="text/javascript">Hier stehen die Javascript-Anweisungen</script>
Die Angabe: language="javascript" was oft gesehen wird, ist nicht nötig, auch muss das Skript nicht mehr auskommentiert werden.
Externes Javascript
<script src="javascriptbibliothek/meinscript.js"></script>
Ein ausgelagertes JavaScript, welches sich im Ordner javascriptbibliothek befindet, wird so in die Seite eingelesen.
Link Tags
Ausser zur Einbindung von Favicons und Stylesheets habe ich auch noch andere Link Tags mit rel="attribut" und rev="attribut" gesehen.
Sie specifizieren die Beziehungen zwischen unterschiedlichen Dokumenten ('rel' des aktuellen mit dem verlinkten, 'rev' des verlinkten mit dem aktuellen Dokument).
Z.B.: <link rel="next" href="doctype" title="Typische Dokumente" />
Diese Angaben könnten zur Bildung einer Navigationsleiste oder einer Sitemap genutzt werden, sie werden aber leider in den marktbeherrschenden Browsern nicht umgesetzt.
Meta Tags
<meta />
Der unpaarige Meta-Tag beinhaltet meisstens einen Schlüssel und einen Wert, mehrere Einträge werden mit Kommas voneinander getrennt:
HTTP Kopfdaten ergänzen
Umleitung: Um beim Aufruf einer Seite zu einer anderen URL weiterzuleiten (engl. forwarding), kann das refresh-Tag genutzt werden.
Über den content-parameter kann weiterhin eine Zeit gesetzt werden, bis die Weiterleitung erfolgt, z. B. um den Anwender noch auf den Grund für die Weiterleitung hinzuweisen:
<meta http-equiv="refresh" content="5"; url="http://www.example.org/" />
Standart: <meta http-equiv="content-type" content="text/html;charset=ISO-8859-1" /> auf jede Seite!
Durch diese Angabe wird der europäische Zeichensatz definiert und die Browser und Suchmaschinen kommen auch mit Umlauten zurecht.
Sprache: <meta name = "language" content = "de" /> - "en" würde für english stehen.
Autoren und Generatoren
Autorenschaft: <meta name="autor" content="Marcel Biefer" />
Veröffentlicher: <meta name="publisher" content="biefer.com" />
Inhaber der Rechte: <meta name="copyright" content="Marcel Biefer" />
Tool: <meta name="generator" content="GoLive5" /> - löscht man am bessten, - man beschränke sich sowieso auf W3C conformen HTML Code.
Suchroboter und SEO
Sie durchstreifen unermüdlich das www und indexieren was sie kriegen können: Die Such-Roboter und Web-Crawler.
Durch komplexe Gesetze zur Auswertung wird das so Gefundene, geordnet und bewertet. Ziel ist es, Listen zu erstellen, die Websites entsprechend ihrer Relevanz auf die Suchanfragen darstellen.
Die dominierende Suchseite ist Google, es gibt noch andere, mit unterschiedlichen Schwehrpunkten, wie Yahoo, etc.
Das Ziel eines jeden Websitebetreibers ist bei Google möglichst weit vorne aufgelistet zu werden, weshalb die Sites für dessen Gesetze zur Auswertung optimiert werden. Daraus hat sich ein Geschäftszweig gebildet: Suchmaschinenoptimierung oder Search Engine Optimization (SEO). Inzwischen kann man auch die vorderen Plätze kaufen.
Eine Optimierung muss mehr oder weniger folgendes berücksichtigen:
Versuche keine fiesen Tricks, stelle hochwertigen Inhalt bereit.
- Jedes Wort, welches in einem Text vorkommt wird gezählt, kommt ein Wort in einer Seite öffters vor, wird diese Seite im Suchergebnis höher eingestuft; das hat leider schlechte Auswirkungen auf den Stil einer Seite.
- Als Titel ausgezeichnete Worte werden stärker gewertet als solche, die nur im Text vorkommen.
- Definieren Sie (immer) einen Alternativ-Text bei Ihren Grafiken (alt="Bild Teddybär" und title="Wir führen Teddybären in allen Farben.").
- Auch das noscript-Tag kann relevante Suchbegriffe aufgreiffen.
- Studieren Sie den Quellcode der Seiten die die besten Ergebnisse bei einer Suchabfrage erzielen um eventuell Ihre Seiten besser zu optimieren.
- Man sollte Suchroboter nicht als Feinde betrachten die es zu überlisten gilt, sondern als Helfer, denen man die Arbeit erleichtern könnte. (Worte im Text zu verstecken, mit einer Textfarbe welche gleich der Hintergrundfarbe ist, scheitern; solches Tun wird mit Verbannung aus dem Suchergebnis bestraft.)
- Ein Kriterium, welches eine Seite weiter vorne auflistet ist, die Anzahl anderer Seiten, die auf diese Seite durch einen Link verweisen. Aber Seiten, die nichts zu bieten haben, als Links auf irgendwelche Seiten zu verkaufen sind bad praxis.
Haupttema: <meta name="page-topic" content="art" />
Manche Suchroboter stufen ein einziges Wort, welches so als Hauptbegriff für die Seite geoutet wird ziemlich hoch ein. Andere reagieren gar nicht drauf.
Begriffe aus einer Liste: <meta name="page-type" content="???" />
Wie Haupttema aber es stehen nur genau definierte Begriffe zur Verfügung, hat sich nicht so durchgesetzt ausser bei wissenschaftlichen Seiten.
Stichworte/Suchbegriffe: <meta name = "keywords" lang="de" content = "Biefer, Marcel, Kunst, Fotografie, Animation, Webdesign, Webmaster" /> - Die Sprache kann angegeben werden. Nicht mehr als 150 Zeichen.
Die Stichworte sollen der Seite angepasst werden, auf welcher sie sich befinden, sie sollen im Text vorkommen. Jedes Stichwort soll nicht mehr als in 3 Meta-Tags benutzt werden. Die Stichworte sollen nicht allzu weit gefasst werden und sie sollen zutreffen.
(Es gibt ein paar ganz schlaue Webmaster, welche einen Suchbegriff 100 mal in ein MetaTag tun in der Hoffnung, bei den Suchergebnissen an vorderster Stelle genannt zu werden. Die meissten Roboter erkennen auch solche Tricks und bannen diese Seiten ganz aus ihrem Ergebnis.)
Erklährungen: <meta name="description" content="Wir lieben Katzen und Hunde, ja selbst Schweine, wenn sie nicht zu menschlich werden." />
Dieser kurze Satz - nicht mehr als 200 Zeichen - kommt als Beschreibung der Seite bei manchen Suchergebnissen, manche Suchmaschinen ziehen aber auch den Eintrag des Open Directory Projects vor.
kein ODP: <meta name="robots" content="noodp" />
Die Suchmaschine soll auf der Ergebnisseite nicht die Beschreibungstexte des Open Directory Projects verwenden – sofern die Seite dort eingetragen ist –, sondern wie bei nicht eingetragenen URLs einen Ausschnitt der Seite selbst (sog. „Snippet“) anzeigen. Diese Anweisung wird von Google und MSN Search unterstützt.
Durchsuchen: <meta name="robots" content="..." /> Folgende Werte bedeuten:
index - diese Seite soll durchsucht und als Ergebnis aufgelistet werden. (Achtung nur Seiten welche ohne Frameset auskommen oder mittels eines JavaScrips in einen bestimmten Frameset gezwungen werden können.)
noindex - diese Seite soll nicht durchsucht und nicht als Ergebnis aufgelistet werden (für Seiten welche ausserhalb ihres Framesets keinen Sinn ergeben).
follow - den Links dieser Seite soll gefolgt werden und die Zielseiten sollen auch indexiert werden.
nofollow - den Links dieser Seite soll nicht gefolgt werden und die Zielseiten sollen auch nicht indexiert werden.
Es sind auch Kombinationen möglich wie: "index,follow" oder "index,nofollow".
Veröffentlichungstermin: <meta name="date" content="2001-12-15T08:49:37+02:00">
Es ist mir zwar nicht bekannt, wo dies angezeigt würde, aber es wäre schon gut zu wissen, wie aktuell eine Seite ist, bevor man auf den Link in der Suchmaschine klickt.
Aktualisiert: <meta name="revised" content="2009-12-28 11:30:00">
Aktualisieren: <meta name="revisit" content="after 30 days">
Manche Suchmaschinen kehren in einem regelmässigen Zeitabstand wieder. Da es so viele Seiten zu durchforsten gibt, kehren sie nicht jeden Tag und auch nicht einmal wöchentlich zurück. Hat man eine Seite, welche sich täglich oder in kurzen Intervallen ändert, kann man versuchen, die Roboter zum baldigen wiederkommen aufzufordern.
Verwendet man einen Frameset, gehören solche Meta-Tags aber nur in den Frameset Kopf, nicht auf jede Seite, denn sonst würden solche Seiten ausserhalb ihres Frames und also ohne Zusammenhang geöffnet. Zu diesem Problem gibt es Lösungsansätze im Kapitel JavaScript! In den Frameset-Body sollten Sie, damit die Suchroboter Text finden, unbedingt die <noframes> Tags tun. So die wichtigsten Begriffe in Header-Titel und die wichtigsten anderen Seiten als Links darstellen! Auch Text schadet gar nichts.
Es gibt eine Möglichkeit durch eine seperate Datei robots.txt Seiten von der Indexierung auszuschliessen. Serever
MetaTags Testen lassen und Websites automatisch anmelden lassen
Es gibt einige gratis Dienste, welche wie Suchroboter die Site durchsuchen und dann im Bezug zur Indexierung eine Statistik oder eine Kritik liefern; dort kann man einfach mal seine Site (welche schon im www steht) angeben, bevor man sie bei den Suchmaschinen anmeldet.
Allerdings werden solche Websites immer weniger, da die Suchmaschinen die Metatags unterschiedlich schwach nutzen. Und die automatischen Anmeldedienste haben zuweilen die gegenteilige Wirkung.
Mehr über Suchdienste findet sich in: server.php
Check den Code.