Eigene Webseite erstellen #02 – Erweiterte Links + Meta

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:

 

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:

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:

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

Schlüsselwörter

Schlüsselwörter für Suchmaschinen

Beschreibung

Beschreibung der Webseite, für Suchmaschinen und evtl. den Browser.

Author/Veröffentlicher

Der Autor der Webseite.

Copyright

Das Copyright der Webseite gibt Auskunft über den gesetzlichen Inhaber bzw. Ersteller der Webseite.

Inhalt

Generator

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!

Schreibe einen Kommentar

Deine E-Mail-Adresse wird nicht veröffentlicht. Erforderliche Felder sind mit * markiert.