HTML: Daten im HEAD
Der head-Bereich umfasst größtenteils
nicht-sichtbare Dinge und definiert die Seite, Skripte oder Stilangaben
näher.
Seitentitel
Im head kann der Titel der Seite notiert werden. Dieser
erscheint dann in der Browserleiste am oberen Fensterrand (als Fenstername).
Der Titel wird mit dem title-Element notiert. Beispiel:
<title>Überschrift/Name der Seite</title>
Bezüge
Das link-Element kann dazu verwendet werden einen Bezug
zwischen Dokumenten herzustellen, seperate StyleSheets, um einen Verweis zu
einer druckbaren Version der Seite herzustellen oder um zu kontrollieren,
wie StyleSheets in gedruckten Dokumenten behandelt werden sollen. Beispiel:
<head> <link rel="stylesheet" href="styles.css" type="text/css"> <link title="Inhalt" href="inhalt.htm" rel="contents"> </head>
Es besitzt unter anderem die Attribute rel und rev
sowie href und type. Dabei sagt die Attribute
rel und rev über die Art der referenzierten
Datei aus. Als Werte können z.B. stylesheet für
StyleSheets, contents für Verzeichnis und noch einige
mehr verwendet werden. rel gibt eine Vorwärtsbeziehung an
- rev eine Rückwärtsbeziehung. Das href-
Attribut gibt die Zieldatei an und mit type wird der Typ der
Datei angegeben.
Alternative URLs
Es gibt Fälle, in denen eine Seite unter mehreren URLs verfügbar sein soll. Dazu gehören zum Beispiel mobile Versionen oder auch Sprachversionen. Um den Suchmaschinen hier den richtigen Hinweis zu geben, ist es wichtig, mit rel="alternate" zu arbeiten.
<link rel="alternate" href="https://www.meinname.de/es/" hreflang="es" />
In diesem Fall wird der Hinweis entsprechend auf die spanische Version gesetzt. Die Sprache wird dabei im Format ISO 639-1 angegeben.
<link rel="alternate" media="only screen and (max-width: 640px)" href="https://m.meinname.de/">
Hier ist für die Geräte mit einer Breite von 640px oder niedriger eine andere Url vorgeschlagen.
Canonical Tag
Der Canonical Tag kennzeichnet die Url der Seite selbst. Hat man zum Beispiel versehentlich die Inhalte über zwei verschiedene Urls online gestellt, so können Suchmaschinen an Hand des Canonical-Tags erkennen, welche Url nun die Richtige ist:
<link rel="canonical" href="https://www.meinname.de/" />
Paginierungen
Damit Paginierungen sauber verarbeitet werden können, kann man die jeweils vorherige Seite un die nächste Seite so kennzeichnen (aktuell Seite: 2):
<link rel="prev" href="https://www.meinname.de/seite_1.html" /> <link rel="next" href="https://www.meinname.de/seite_3.html" />
Meta-Angaben
Die Meta-Angaben dienen der Erkennung der Seite/des Seiteninhalts durch
Suchmaschinen. Sie beschreiben den Inhalt, Autor und sonstige Angaben zur
betreffenden Seite. Diese Angaben werden immer mit dem
meta-Element getätigt, wobei das
name-Attribut über die Art der Angabe aussagt (z.B. Autor,
Seitenbeschreibung etc.) und das content-Attribut den Wert dazu
wiedergibt (beispielsweise bei Autor der Name des Autors oder bei der
Seitenbeschreibung die Beschreibung selbst). Folgende Angaben können
u.a. als Meta-Angaben notiert werden:
Autor / Erzeuger / beteiligte Personen
<meta name="author" content="Name des Autors"> <meta name="creator" content="Name des Erzeugers"> <meta name="contributors" content="An der Erstellung beteiligte Personen">
Organisation / Firma / Herausgeber / Verlag / Urheber / Urheberrechte
<meta name="organization" content="Firmenname"> <meta name="publisher" content="Herausgeber oder Verlag"> <meta name="rights" content="Urheber oder Angaben zu den Urheberrechten">
Titel / Thema / Überschrift
<meta name="title" content="Titel der Seite"> <meta name="subject" content="Thema der Seite oder Überschrift">
Stichwörter
<meta name="keywords" content="Stichwort1, Stichwort2, ... ">
Beschreibung der Seite
<meta name="description" content="Beschreibungstext">
Quelle / Orginal / Kennzeichnung
<meta name="source" content="Quellenangabe oder Orginal"> <meta name="identifier" content="Kennzeichnung">
Erstellungsdatum / Expire
<meta name="date" content="1999-01-27T00:35:44+00:00"> <meta name="expire" content="1999-01-27T00:35:44+00:00">
Expire gibt Suchmaschinen den Überblick leichter mit
zeitlich-abhängigen Daten/Informationen umgehen zu können, bevor
die Information veraltet. Als content wird hier ein Datum
angegeben, an welchem die Daten/Informationen dieser Seite
verfallen/veraltet sind, das heißt aber nicht, dass diese Datei danach
nicht mehr zu gebrauchen ist.
Sprache
<meta name="language" content="de">
Folgende Varianten sind hier unter anderem möglich:
-
content="de"- Deutsch -
content="en"- Englisch -
content="en-us"- US Amerikanisch -
content="fr"- Französisch -
content="it"- Italienisch -
content="es"- Spanisch
Auslesen durch Suchmaschinen erlauben / verbieten / einschränken
<meta name="robots" content="noindex">
Folgende Varianten sind hier möglich:
-
content="noindex"- keine Indizierung -
content="none"- keine Indiziereung -
content="index"- Indizierung erlaubt -
content="nofollow"- Aktuelle Datei Indizieren, aber keine untergeordneten Dateien -
content="follow"- Aktuelle Datei sowie untergeordnete Dateien Indizieren
Des Weiteren ist eine Mehrfachnennung möglich, hierbei werden die
Angaben dann durch ein Komma getrennt (z.B.
content="index,follow").
Content-Type/Type
Hiermit beschreiben Sie, um was für eine Seite es sich handelt, nämlich um eine HTML-Datei nach ISO 8859-1.
<meta http-equiv="content-type" content="text/html;charset=iso-8859-1"> <meta http-equiv="type" content="text/html; charset=iso-8859-1">
Dateiformat
Als content-Angaben können Sie hier alle Formate laut dem
MIME-Standard angeben (z.B. image/gif für gif-Dateien;
etc.).
<meta name="format" content="Dateiformat">
Vorschau-Bild und Text für Facebook (Open Graph)
<meta property="og:image" content="http://meinname/facebook.jpg" /> <meta property="og:title" content="Titel auf Facebook" /> <meta property="og:descrption" content="Das ist die Kurzberschreibung, die man auf Facebook sieht" /> <meta property="og:type" content="website" />Mehr dazu
Neu Laden/Weiterleiten
<meta http-equiv="refresh" content="5; URL=Homepageadresse">
Hier können Sie den refresh (Neuaufbau) der Seite nach
einer bestimmten Zeit bestimmen. Die Zeit wird dabei in Sekunden angegeben.
Zudem müssen Sie noch die Seitenadresse (URL) angeben, die nach dem
Neuaubau geladen werden soll. Beachten Sie bitte die etwas andere Notation
mit den Gänsefüßchen
("ZEIT,URL= ADRESSE ").
Basisadresse
Auf Grundlage der Basisadresse werden alle relativen Verweise (also z.B.
/Bild.jpg) verwendet. Dazu wird das base-Element verwendet. Mit
Hilf des href-Attributs gibt es das aktuelle Verzeichnis an,
nach dem alle relativen Verweise aufgelöst werden sollen. Als Wert wird
hier ein absoluter Pfad erwartet (z.B. http://www.meinname.de/Bilder/). Als
Beispiel: Die Datei befindet sich im Verzeichnis
http://www.meinname.de/Dokumente/Beispiel.htm. In dieser wird mit Hilfe
dieses Elements die Basisadresse auf http://www.meinname.de gesetzt.
Enthält die Datei nun einen relativen Verweis Bilder/Bild.gif, so wird
dieses Bild nicht unter http://www.meinname.de/Dokumente/Bilder/Bild.gif
sondern unter http://www.meinname.de/Bilder/Bild.gif gesucht. Beispiel:
<html> <head> <base href="https://www.meinname.de"> </head> </html>
Zielfenster
Ebenfalls mit dem base-Element kann das Zielfenster festgelegt
werden. Alle Links, die geöffnet werden sollen, werden dann in einem
Fenster mit dem definierten Namen geöffnet - sofern dies nicht anders
beschrieben wird. Zur Beschreibung des Zielfensters wird das
target-Attribut verwendet. Als Wert wird hier ein beliebiger
Fenstername erwartet. Beispiel:
<html> <head> <base href="https://www.meinname.de" target="neuesFenster"> </head> </html>
Du arbeitest in einer Agentur oder als Freelancer?
Dann wirf doch mal einen Blick auf unsere Software FeatValue.
Weiterlesen: ⯈ Textformen
Über uns
Wir entwickeln Webanwendungen mit viel Leidenschaft. Unser Wissen geben wir dabei gerne weiter. Mehr über a coding project