Im zweiten Tutorial zum Thema „Eigene Webseite erstellen“, erkläre ich einige erweiterte Grundlagen wie z.B. Ränder, und den Meta-Bereich.
‚Tschuldigung, dass dieser Teil am Ende so Abrupt aufgehört hat, ich konnte damals noch keine Videos hochladen, die länger als 15 Minuten sind und musste daher viel rausschneiden. Erläuterungen für die fehlenden Meta-Tags gibts aber am Anfang von Teil 3 ;)
Hier, wie immer, der aufwendig aus dem Video abgetippte, geordnete und auskommentierte Quellcode:
<html>
<head>
<meta http-equiv="refresh" content="5; URL=http://google.de/" /> <!-- würde uns nach 5 Sekunden zu Google weiterleiten -->
<meta http-equiv="content-type" content="text/html; charset=iso-8859-1" /> <!-- Kodierung, für unterschidliche Systeme wichtig -->
<meta name="keywords" content="tutorial, html" /> <!-- Schlüsselwörter für Suchmaschinen -->
<meta name="author" content="PlayingThat Inc." /> <!-- author also Ersteller -->
<title>HTML Tutorial</title> <!-- Der Tag "title" spezifiziert den Text der nachher
in der Titelleiste des Browsers angezeigt wird -->
</head>
<body>
<h1>Das ist ein Test.</h1> <!-- Die h 1-6 Tags werden verwendet, um Über- bzw. Unterüberschriften
zu formatieren. -->
<a href="http://youtube.com/playingthat"> <!-- Der a-Tag (Anchor) erstellt einen Link, dessen Ziel mit dem href (Hypertext-Refence) Atribut festgellegt wird. Innerhalb des Tags Anchor Tags können alle möglichen HTML Elemente, in diesem Fall ein Bild, stehen, die dadurch verlinkt werden.-->
<img src="logo.jpg" />
</a>
</body>
</html>
Meta-Tags im allgemeinen
Meta-Tags werden im deutschen auch „Kopfdaten“ genannt, was ihre Funktion ganz gut beschreibt. Meta-Tags sind dazu da, bestimmte Informationen über eine Webseite, oder genauer gesagt des einzelnen HTML-Dokuments preis zugeben. Diese Informationen können dann z.B. von Suchmaschinen, dem Server auf dem die Datei liegt, oder einem Webbrowser gelesen werden, damit diese die Webseite z.B. anhand von Keywords „einordnen“, bzw. verstehen können. Ein Meta-tag besteht meistens aus zwei Atributen: einer Namens „name“ bzw. „http-equiv“ und einer Namens „content“. „name“ bzw. „http-equiv“ ist ein festgelegter Bezeichner, der bestimmt, in welchem Zusammenhang die Eigenschaft steht, welche nachher mit content gefüllt wird. „name“ bzw. „http-equiv“ muss immer einen vorgefertigten Inhalt haben, die verfügbaren Typen werden weiter unten genauer erklärt. Okay, das war vielleicht ein bisschen viel auf einmal… Hier noch mal Anhand eines Beispiels:
Eine Beispielwebseite hat folgenden Header Bereich:
...
<head>
<title>Beispiel für Meta Tags</title>
<meta http-equiv="content-type" content="text/html; charset=ISO-8859-1" />
<meta name="description" content="Dies ist eine einfache Beispielseite!" />
<meta name="author" content="Ich!" />
<meta name="keywords" content="beispiel, meta-tags, html" />
<meta name="generator" content="Webocton - Scriptly (www.scriptly.de)" />
</head>
...
Jetzt surft der Google Bot auf unsere Webseite, um diese zum Google-Index hinzuzufügen oder zu aktualisieren. Er sieht die „description“, also die Beschreibung der Webseite für eben diese Suchmaschinenbots. Die Beschreibung sollte maximal 160 Zeichen lang sein. Sie ist zusammen mit den „keywords“ (ebenfalls selbsterklärend) für die Suchmaschinen wichtig. Diese errechnen dann eine Bewertung der Webseite, wie weit oben diese später in den Suchergebnissen landet, und natürlich bei welchen Suchbegriffen die Webseite nachher überhaupt gefunden wird. Zudem bestimmt dies das Aussehen des unseres Suchergebnisses:
Mehrsprachige Meta Tags
Meta Tags können Mehrsprachigen „content“ beinhalten, wenn man das Atribut „lang“ hinzufügt. Hier ein einfaches Beispiel:
<meta name="keywords" lang="de" content="beispiel, haus, apfel" /> <meta name="keywords" lang="en-us" content="sample, house, apple" /> <meta name="keywords" lang="es" content="ejemplo, casa, manzana" />
http-equiv
Gut, dann fehlen uns noch 2 Infos: 1. Die Auflistung und Erklärung der verschiedenen Typen, und 2. die Info, was es mit diesem komischen „http-equiv“ auf sich hat. Um die verschiedenen Typen kümmern wir uns später, zuerst geht es um dieses komische http-equiv Atribut. „http-equiv“ bedeutet im Grunde nur, dass die Information ursprünglich für den Webserver gedacht ist und nicht wie „name“ für den Browser oder Suchmaschinen. Die Grundidee dahinter ist, das der Autor der HTML-Datei, also wir, die Kommunikation zwischen Webserver und Browser kontrollieren kann. Dies funktioniert in der Praxis leider nicht wie gewünscht, da die meisten gängigen Webserver die HTML-Datei vor dem senden an den Browser nicht auslesen.
Die verschiedenen Typen
Sprache der Webseite
<meta http-equiv="language" content="deutsch, de">
Schlüsselwörter
<meta name="keywords" content="farben, rot, blau, grün">
Schlüsselwörter für Suchmaschinen
Beschreibung
<meta name="description" content="Ihre Beschreibung">
Beschreibung der Webseite, für Suchmaschinen und evtl. den Browser.
Author/Veröffentlicher
<meta name="author" content="Ihr Name">
Der Autor der Webseite.
Copyright
<meta name="copyright" content="Ihr Name">
Das Copyright der Webseite gibt Auskunft über den gesetzlichen Inhaber bzw. Ersteller der Webseite.
Inhalt
<meta name="page-topic" content="Dienstleistung">
Generator
<meta name="generator" content="WordPress 3.1"
Der Generator ist entweder das Programm, mit dem die Datei erstellt wurde oder ein CMS bzw. Blog-System, wie zum Beispiel Typo3.
Das sind soweit alle wichtigen Typen von Meta-Tags. Es gibt zwar noch einige mehr, allerdings sind diese fortgeschritten und werden in der Praxis meist nicht benötigt. Als Anmerkung könnte man noch hinzufügen, dass aufgrund von Missbrauch der Meta-Tags Suchmaschinen nicht nur nach den Keywords und der Beschreibung gehen, sondern den Inhalt der Seite bewerten. Also bringen auch 1000 Keywords nichts, wenn die Webseite nicht den Keywords entspricht wird sie von Modernen Suchmaschinen sehr schlecht gelistet… Wer noch mehr über Meta Tags erfahren will, dem empfehle ich de.selfhtml.org.
Damit sind wir einer eigenen Webseite ein großes Stück näher, also lasst doch mal nen Kommentar da und Tschüss!