10 Jahre
Gespräch vereinbaren
Werbung
FeatValue
Das Kundenportal für Agenturen und Freelancer
Integriert sich in das bestehende Projektmagement-System
Kostenlos registrieren

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

Stefan Wienströer

Wir entwickeln Webanwendungen mit viel Leidenschaft. Unser Wissen geben wir dabei gerne weiter. Mehr über a coding project

Cookie-Einstellungen

Helfen Sie dabei, uns noch besser zu machen. Wir nutzen Cookies und ähnliche Technologien, um die Website auf Ihre Bedürfnisse anzupassen. Zur Datenschutzerklärung

Auswahl speichern