Meta-Tags in HTML

Diese Seite bietet eine Übersicht, welche wesentlichen Meta-Tags aktuell sind, zeigt jedoch auch Meta-Tags, die als veraltet gelten, aber zumindest zum Teil noch in Gebrauch sind. Zusätzlich werden die Meta-Tags für die sozialen Medien vorgestellt.
Wenn Sie allein Informationen über die aktuell gültigen Meta-Tags zu HTML5 suchen, werden Sie hier fündig:
https://wiki.selfhtml.org/wiki/HTML/Elemente/meta

Meta-Tags zur Seitenbeschreibung

Meta-Tags als Anweisungen für Suchmaschinen

Suchmaschinenspezifische Meta-Tags

Meta-Tags als Anweisung (zum leichteren Auslesen des Inhalts) an den Browser

Meta-Tags zur Steuerung des Seitenaufrufs von Servern

Meta-Tags zur Darstellung von Webseiten auf mobilen Geräten

Microsoft-eigene Meta-Tags für den Internet Explorer

Meta-Tags für Social Media

SEO: Suchmaschinenoptimierung - Platzierung der Seiten in den Suchmaschinen

Die wichtigsten der gelisteten Meta-Tags als Template zum Einbau

Meta-Tags werden im <head>-Bereich einer Seite eingebaut.

Im folgenden werden die wichtigsten Meta-Tags aus diesen Bereichen genannt und erläutert.
Quellen: SelfHTML-Wiki; Sueddeutsche.de (Quellcode); Spiegel-Online (Quellcode)

Meta-Tags, die gelb hervorgehoben sind, gelten als veraltet!

Auch veraltete Meta-Tags sind noch in Gebrauch, siehe die Meta-Tags auf Spiegel-Online.

1. Seitenbeschreibung: Autor und Erstelldatum etc.

<meta name="author" content="Name, Ort, Land (EN)" />

In diesem Meta-Tag teilen Sie den Namen des Autors (d.h.: des inhaltlich Verantwortlichen) für die HTML-Datei mit (author = Autor).


<meta name="email" content="name@domain.tld" />

gleichbedeutend mit

<link rev="made" 
content="mailto:name@domain.tld" />

Benennt den Ansprechpartner für die Website. Unter Content kann der Ansprechpartner oder die eMail-Adresse des Webmaster oder des für den Inhalt der Webseite Verantwortlichen angegeben werden.

<meta name="publisher" 
content="Name, Ort, Land" />

Benennt den Herausgeber, in der Regel die Firma, die diese Seiten publiziert.


<meta name="copyright" content="Name, Ort Land" />

Das Urheberrecht angeben.

<meta name="date" 
content="2022-05-04T08:49:37+00:01" />

Mit diesem Meta-Tag geben Sie an, wann die Datei publiziert wurde. Im obigen Beispiel ist 2022 die Jahreszahl, 05 der Monat (Mai), 04 der Tag, 08 die Stunden, 49 die Minuten und 37 die Sekunden. Die Angabe 00:01 hinter dem Pluszeichen ist die Abweichung der Zeit von der Greenwich-Zeit in Stunden und Minuten, im Beispiel plus eine Stunde für die Zeitzohne von Amsterdam, Berlin, Bern, Rom, Stockholm, Wien. Wenn Sie nur das Datum, aber keine Uhrzeit angeben wollen, notieren Sie nur den Teil der Datumsangabe bis vor dem großen T (für Time).

<meta name="last-modified" content="Mi, 04 Mai 2022 20:19:04 UTC" />

Mit diesem Meta-Tag lässt sich angeben, wann die Seite zuletzt geändert und modifiziert wurde. Dies dient nur zur eigenen Information. Die Angabe der Zeit ist nicht unbedingt erforderlich.


<meta name="page-topic" Content="Dienstleistung, 
Internet" />

Das übergeordnete Thema der Seite angeben.


<meta name="page-type" content="Verzeichnis" />

Den Seitentyp charakterisieren, Angabe was auf der Seite angeboten wird, z.B. Katalog, Verzeichnis, Überblick,....


<meta name="audience" Content="Anfänger, 
Fortgeschrittene, Programmierer,..." />

Zielgruppe die angesprochen werden soll, das anzusprechende Publikum.

Zum Anfang

2. Informationen und Anweisungen für Suchmaschinen

Kurzbeschreibung der Seite in Suchmaschinen

<meta 
name="description" content="Kurze Beschreibung der Seite" />

Der hier hinter content eingefügte Text sollte eine Kurzbeschreibung von Art und Inhalte der betreffenden Website sein. Die Form der Angabe ist frei, die Anzahl der Zeichen begrenzt auf 1000 Zeichen. Suchmaschinen lesen diesen Text beim Indizieren aus und geben ihn unter dem Link auf die Seite wieder.


<meta name="abstract" content="Kurze Beschreibung 
der Seite" />

Der zusätzlich eingefügten Meta-Tag name="abstract" ermöglicht eine Mehrfachnennung der Seitenbeschreibung, was das Ranking in Suchmaschinen verbessern kann.

Such-Stichwörter für Suchmaschinen

<meta name="keywords" 
content="Suchstichwörter" />

Geben Sie hier anstelle des Wortes: Suchstichwörter jene Stichwörter ein, die wesentlich für den Inhalt Ihrer (jeder einzelnen) Seiten sind. Dies können Überbegriffe, Kategorien sein und einzelne, bezeichnende Wörter aus dem Inhalt der Seite. Erlaubt sind bis zu 200 Zeichen.
Obwohl die Suchmaschinen diesen Meta-Tag auf Grund von Missbrauch nicht mehr beachten, wird er selbst noch in großen, professionellen Websites eingesetzt.


<meta name="searchtitle" content="Suchstichwörter" 
/>

Der zusätzlich eingefügten Meta-Tag name="searchtitle" ermöglicht eine Mehrfachnennung von Suchstichwörtern, was das Ranking in Suchmaschinen verbessern kann.

<meta name="keywords" lang="de" content="Ferien, Griechenland, 
Sonnenschein" />

<meta name="keywords" lang="en-us" content="vacation, Greece, sunshine" />
<meta name="keywords" lang="en" content="holiday, Greece, sunshine" />
<meta name="keywords" lang="fr" content="vacances, Grèce, soleil" />

Bei mehrsprachigen Seiten lassen sich die gleichen Suchstichwörter in verschiedenen Sprachen angeben, im Beispiel für Deutsch, US-Englisch, Englisch und Französisch. Die Zuweisung der Sprache erfolgt über das Attribut lang und das entsprechende Länderkürzel.

Das Verhalten von Robots (Agenten der Suchmaschinen) steuern

Dies vorweg: die nachfolgend genannten Meta-Tags zur Steuerung des Verhaltens der Suchmaschinen stellen eine Aufforderung, Bitte an die Suchmaschinen dar, sind für diese aber nicht zwingend.
Die Aufforderung zu positivem Verhalten, also z.B. index und follow, lässt sich ganz sparen, das ist sowieso Standardverhalten der Suchmaschinen.


<meta name="robots" content="noindex" />

Mit diesem Meta-Tag verbieten Sie einem Suchprogramm, Inhalte aus der HTML-Datei an seine Suchdatenbank zu übermitteln (robots = Suchprogramme, content = Inhalt, noindex = keine Indizierung). Anstelle von noindex können Sie auch none notieren (none = keine).
Daneben sind folgende weitere Angaben möglich:

<meta name="robots" content="index" />

Damit erlauben Sie einem Suchprogramm ausdrücklich, Inhalte aus der aktuellen HTML-Datei an seine Suchdatenbank zu übermitteln (index = Indizierung).

<meta name="robots" content="nofollow" />

Damit erlauben Sie einem Suchprogramm, Inhalte aus der aktuellen HTML-Datei an seine Suchdatenbank zu übermitteln (nofollow = nicht folgen). Sie verbieten dem Suchprogramm jedoch, untergeordnete Dateien Ihres Projekts, zu denen Verweise führen, zu besuchen.

<meta name="robots" 
content="follow" />

Damit erlauben Sie einem Suchprogramm ausdrücklich, Inhalte aus der aktuellen HTML-Datei und aus untergeordneten Dateien Ihres Projekts, zu denen Verweise führen, zu besuchen und an seine Suchdatenbank zu übermitteln (follow = folgen).

<meta name="robots" content="noarchive" />

Die Suchmaschine Google indiziert nicht nur Webseiten, sondern nimmt sie mit ihren Inhalten in einen Cache, in ein Archiv auf. Das kann bei Seiten, die häufig - täglich - aktualisiert werden, dazu führen, dass Inhalte nur noch aus dem Archiv von Google gefunden und als Suchergebnisse angezeigt werden. Verärgerte Seitenbesucher, die diese nicht mehr aktuellen Seiten über die Suchmaschine gefunden haben, sind die Folge. Um Google vom Archivieren tagesaktueller Seiten abzuhalten, setzen Sie den oben genannten Meta-Tag. Die Seite wird zwar indiziert, aber nicht ins Archiv aufgenommen.

<meta 
name="robots" content="archive" />

Damit erlauben Sie den Suchmaschinen ausdrücklich, die Seite ins Archiv aufzunehmen.

<meta name="robots" content="nosnippet" />

Dieser Meta-Tag unterbindet das Auslesen von Seiteninhalten als beschreibenden Text für die Suchergebnisse. Dies ist unter Umständen wünschenswert, wenn es sich bei den Seiteninhalten um Informationen handelt, für die die Nutzer zahlen sollen.

<meta name="robots" content="snippet" />

Damit erlauben Sie ausdrücklich das Auslesen von Seiteninhalten als beschreibenden Text für die Suchergebnisse.

Google und andere Suchmaschinen zeigen bei Seiten, die einen Eintrag im ODP (das derzeit wohl wichtigste Verzeichnis) haben, oft den Titel und die Beschreibung des ODP-Eintrages und nicht die der Webseite an. Das Einfügen eines HTML-Tags in die Webseite verhindert dies.

Das NOODP-Tag sieht (abhängig von der Suchmaschine) wie folgt aus:

<meta name="robots" 
content="noodp" />

<meta name="Bingbot" content="noodp" 
/>

<meta name="GoogleBot" content="noodp" />

Im ersten Fall gilt die Anweisung für alle Suchmaschinen, im zweiten und dritten Fall nur für Google bzw. MSN. Das Tag bezieht sich nur auf die eingetragene Seite und braucht auch nur dort hinzugefügt werden. Auf das Ranking wirkt sich das Tag nicht aus - nur die Vorschau in den Suchergebnissen wird verändert.

Die Angaben zum Meta-Tag name="robots" lassen sich in in dieser Art zu einem Meta-Tag zusammenfassen:

<meta name="robots" 
content="index, nofollow, noarchive, nosnippet, noodp" />

<meta name="allow-search" content="no">

Der Meta-Tag name="allow-search" dient dazu, Suchmaschinen die Suche auf der Seite ausdrücklich zu erlauben. Mögliche Werte für content sind yes oder no. Er ist gleichbedeutend mit dem Meta-Tag name="robots" mit dem Attribut content="noindex" bzw. content="index".

<meta 
name="revisit-after" content="20 days" />

An Such-Robot: bitte nach 20 Tagen erneut vorbeikommen und Datei neu auslesen! So ist dieser Meta-Tag angedacht, wird aber von den Suchmaschinen ignoriert. Suchmaschinen wie Google machen einen Suchdurchlauf durch das Internet - wann weiß Google -, um Seiten neu zu indizieren und neue Seiten das erste Mal zu indizieren. Eine Steuerung seitens der Webdesigner ist dabei nicht vorgesehen.

Zum Anfang

3. Suchmaschinenspezifische Meta-Tags

Für die Suchmaschine Google und andere gibt es die Möglichkeit, die Meta-Tags name="robots" für jede Suchmaschine anders anzulegen und damit gezielt das Verhalten einzelner Suchmaschinen zu steuern. Je nachdem, welche Suchmaschine Sie ansprechen möchten, ersetzen Sie den Namen robots durch eine der folgenden Angaben:

googlebot (=Google)
slurp (=Yahoo)
bingbot (=Microsoft Bing)

Google selbst hat auch eigene Meta-Tags eingeführt

<meta 
name="google-site-verification" content="string/string=" />

Ein entsprechender Meta-Tag kann in der Google Search Console (zugänglich mit einem Google-Account) erzeugt werden. string steht im Beispiel oben für eine von Google automatisch generierte Zeichenkette. Der Meta-Tag muss dann z.B. in die Startseite der eigenen Website eingetragen werden. Er dient zur Überprüfung und Bestätigung, dass die Website auch wirklich Ihnen gehört, sodass Sie für diese Seite Zugang zu den Statistiken der Google Search Console erhalten.

Zum Anfang

4. Anweisungen an den Browser

Sprache angeben

<meta 
http-equiv="content-language" content="de" />

Sprache des Dateiinhalts: Deutsch (HTTP 1.0 und RFC1766; veraltet)

Dieser Meta-Tag ersetzt nicht die für CSS wesentliche Angabe der Sprache der Seite mit dem Attribut lang, Beispiel:

<html lang="de">

Zeichensatz angeben


<meta charset="utf-8">


<meta 
http-equiv="content-type"content="text/html; charset=utf-8" />

Ganz wichtig: damit der Browser sofort den richtigen Zeichensatz läd, muss dieser Meta-Tag innerhalb der ersten 1024 Zeichen der Seite im Quellcode stehen!

Ergänzende (Programmier-) Sprachen angeben

<meta http-equiv="Content-Script-Type" 
content="text/javascript" />


<meta http-equiv="Content-Style-Type" 
content="text/css" />

Sie können mit Hilfe einer Meta-Angabe ausdrücklich bestimmen, welchen Zeichensatz Sie innerhalb der HTML-Datei verwenden. Für HTML-Ergänzungssprachen wie Style-Sheets und Scripts können Sie bestimmen, welche Sprachen Sie innerhalb der HTML-Datei verwenden. Diese Angaben helfen dem WWW-Browser, die Inhalte der HTML-Datei im Zweifelsfall korrekter zu interpretieren. Vor allem die Angabe zum Zeichensatz ist wichtig, falls Sie innerhalb der HTML-Datei Umlaute usw. nicht maskieren. Für HTML5 MUSS es der Zeichensatz utf-8 sein.

Automatische Weiterleitung

Zum Beispiel für das automatische Weiterleiten eines Anwenders von einer alten Adresse Ihres Projekts zu der neuen Adresse können Sie das automatische Laden einer anderen Datei veranlassen. Wenn die HTML-Datei dann aufgerufen wird, ruft der WWW-Browser sofort oder nach einem frei wählbaren Timeout eine andere gewünschte Datei auf.

Beispiel:

<meta http-equiv="refresh" content="5; 
URL=https://wiki.selfhtml.org/" />

Erläuterung:
Mit <meta http-equiv="refresh" content="..." /> veranlassen Sie den Start einer anderen Datei. Mit content="5; bestimmen Sie die Anzeigedauer der Datei in Sekunden. Die 5 im Beispiel bedeutet also, dass die Datei 5 Sekunden lang angezeigt wird. Danach wird die nächste Datei aufgerufen, die mit url=..." spezifiziert wird. Notieren Sie den gesamten Befehl inclusive der etwas ungewohnten Stellung der Anführungszeichen so wie im Beispiel oben angegeben. Setzen Sie jeweils Ihre gewünschte Anzeigedauer und den Namen der nächsten aufzurufenden Datei ein. Für die Adressierung der Datei gelten die gleichen Regeln wie bei Verweisen. Bei einem Timeout von 0 wird die angegebene nächste Datei sofort geladen.

Beachten Sie:
Dieser HTML-Befehl funktioniert auch ohne HTTP-Protokoll, also lokal auf jedem Rechner. Verlassen Sie sich nicht darauf, dass dieser Befehl in jedem Browser funktioniert. Wenn Sie etwa eine Weiterleitung zu einer neuen Adresse eingeben, notieren Sie am besten auf der gleichen Seite zur Sicherheit noch einen normalen Verweis zu der neuen Adresse. So finden auch Anwender, bei denen die Meta-Angabe nicht funktioniert, den Weg zu Ihrer neuen Heimat.

Favicons einfügen

Favicons (kurz für favourite icon, engl. für Favoriten-Symbol) sind kleine, 16×16 oder 32×32 Pixel große Icons, Symbole oder Logos, die unter anderem in der Adresszeile eines Browsers links von der URL angezeigt werden und meist dazu dienen, die zugehörige Website auf wiedererkennbare Weise zu kennzeichnen. Sie tauchen auch in der Lesezeichenleiste (Favoriten), bei den Registerkarten (oder Tabs) und unter Windows beim Speichern einer Seite auf dem Desktop auf. Favicons wurden von Microsoft mit dem Internet Explorer 4 eingeführt.
Zulässige Dateiformate sind ICO, GIF und PNG. Favicons werden in der Regel im Stammverzeichns (root) der Website abgelegt.

Um ein Favicon auf der Seite anzuzeigen, ist ein solcher link-Tag im head-Bereich der Seite einzufügen:

<link 
href="absolute_url/favicon.ico" rel="shortcut icon" type="image/ico" />

Liegt das Bild in einem der anderen Dateiformate vor, wird ico durch gif oder png ersetzt. Mehr dazu unter http://de.wikipedia.org/wiki/Favicon

Zum Anfang

5. Den Seitenaufruf vom Server steuern:

Datei von Originaladresse laden

Häufig abgerufene WWW-Seiten werden im WWW auf sogenannten Proxy-Servern zwischengespeichert. Das ist dann ein sogenannter Proxy-Cache. Auch Browser speichern aufgerufene Seiten, und zwar lokal auf dem Rechner des Anwenders. Dabei spricht man vom Browser-Cache. Die Cache-Speicher sparen in vielen Fällen Leitungswege und Ressourcen.
Ein Nachteil ist jedoch, dass dem Anwender möglicherweise Daten angezeigt werden, die gar nicht mehr aktuell sind, weil auf der Original-Adresse mittlerweile neue Daten liegen. Sie können mit Hilfe einer Meta-Information erzwingen, dass der Server-Rechner dem WWW-Browser befiehlt, sich die Daten nicht aus einem Cache-Speicher zu holen, sondern vom Original-Server. Das ist allerdings nur dann zu empfehlen, wenn Sie die Daten einer HTML-Datei häufig ändern und neu ins WWW hochladen.

Beispiel:

<meta http-equiv="expires" content="0" />

Erläuterung:
Mit <meta http-equiv="expires" content="0"> veranlassen Sie den Server-Rechner, einem aufrufenden WWW-Browser zu befehlen, diese HTML-Datei in jedem Fall von der Original-Adresse auf dem Server-Rechner zu laden (http-equiv = http equivalent = gemäß HTTP-Befehl, expires = fällig werden).

Das nachfolgend geschriebene ist veraltet:
Bei content= können Sie anstelle der 0 in diesem Zusammenhang auch ein bestimmtes Datum und eine bestimmte Uhrzeit angeben. Dadurch bewirken Sie, dass der WWW-Browser bis zu dem definierten Zeitpunkt die Daten auch von einem Proxy-Server holen darf, danach aber vom Original-Server holen muß. Datum und Uhrzeit müssen Sie im internationalen Format angeben.

Beispiel:content="Sat, 14 Dec 1998 12:00:00 GMT". Notieren Sie den Zeitpunkt so wie im Beispiel mit allen Leerzeichen, Doppelpunkten zwischen Stunden, Minuten und Sekunden sowie der Angabe GMT am Ende. Als Wochentagsnamen sind erlaubt Mon (Montag), Tue (Dienstag), Wed (Mittwoch), Thu (Donnerstag), Fri (Freitag), Sat (Samstag) und Sun (Sonntag). Als Monatsnamen sind erlaubt Jan (Januar), Feb (Februar), Mar (März), Apr (April), May (Mai), Jun (Juni), Jul (Juli), Aug (August), Sep (September), Oct (Oktober), Nov (November) und Dec (Dezember).
Anstelle der 0 können Sie auch eine Zahl angeben. Diese Zahl bedeutet dann die Anzahl Sekunden, nach deren Ablauf der WWW-Browser eine Datei, die er im Cache hat, auf jeden Fall wieder vom Server lädt. Mit content=43200 stellen Sie beispielsweise einen Wert von 12 Stunden ein.

<meta 
http-equiv="pragma" content="no-cache" />

Wie vor. Sorgt für stetigen Abruf nur der aktuellen Seite.

Das Speichern im Browsercache (Temporary Internet Files) unterbinden (bzw. befehlen)

<meta 
http-equiv="cache-control" content="no-cache" />

oder ausführlicher

<meta 
http-equiv="cache-control" content=" no-store, no-cache, must-revalidate, 
pre-check=0, post-check=0, max-age=0" />

Dieser Meta-Tag soll das Speichern der Seite im Browsercache verhindern. Aber: funktioniert angeblich im Internet Explorer nicht zuverlässig.


<meta http-equiv="cache-control" content="cache" />

Damit wird der Browser aufgefordert, die Seite im lokalen Speicher zu cachen.

Zum Anfang

6. Meta-Tags zur Darstellung von Webseiten auf mobilen Geräten

Viewport einstellen

Mobilgeräte stellen Websites ohne Angabe dieses Meta-Tags oft nur in einer sehr kleinen Darstellung ganz dar. Dabei skaliert der Browser die Seite auf eine Breite von 960px und verkleinert die Darstellung so, dass die Seite in den Viewport passt (den kleinen Bildschirm füllt). Die betrachtende Person erhält so eine Übersicht über die Seite und kann in die Seite hineinzoomen.

Wenn Sie z.B. mit mediaqueries arbeiten, können Sie mit dem folgenden Meta-Tag dafür sorgen, dass der Browser die Seite wie von Ihnen gewünscht anzeigt und sie in der vorgegebenen Größe an den Viewport anpasst. Die betrachtende Person kann dann immer noch in die Seite zoomen.

<meta name="viewport" content="width=device-width, initial-scale=1.0, 
user-scalable=yes">

Der folgende Meta-Tag ist gleichbedeutend, da user-scalable=yes die default-Einstellung ist.

<meta name="viewport" content="width=device-width, initial-scale=1.0">

Dieser Meta-Tag ist sehr zu empfehlen, da er die Darstellung der Websites auf mobilen Endgeräten verbessert.

Mit folgender Angabe nehmen Sie der betrachtenden Person die Möglichkeit zu zoomen:

<meta name="viewport" content="width=device-width, initial-scale=1.0, 
user-scalable=no">

Folgende Einstellungen sind möglich:

initial-scale: (Zoom) (initial-scale=1.0 Inhalte werden 1:1 dargestellt)
user-scalable: Mit diesem Attribut kann man definieren, ob der Nutzer auf der Seite zoomen kann (yes) oder nicht (no), der default-Wert ist yes.
minimum-scale bzw. maximum-scale: ermöglichen es, den Zoomgrad einzuschränken. (z. B.: maximal scale=2.0 Inhalt kann maximal 2x-fach vergrößert werden.)

Zum Anfang

7. Microsoft-eigene Meta-Tags für den Internet Explorer

IE 6: Bildsymbolleiste ausblenden

Die im nachfolgenden aufgeführten Meta-Tags für den Microsoft Internet Explorer sind allesamt veraltet und werden mit dem Verschwinden des Browsers aussterben. Bislang sind aber die Meta-Tags http-equiv="imagetoolbar" und name="MSSmartTagsPreventParsing" noch in Gebrauch.

Der Internet Explorer 6.0 zeigt standardmäßig bei allen Bildern ab 130 x 130 Pixel eine Bildsymbolleiste an, wenn der Mauszeiger auf dem Bild ruht. Um diesen Effekt auszuschalten, fügen Sie folgenden Meta-Tag in Ihre Webseiten ein:


<meta http-equiv="imagetoolbar" content="no" />

Dieser Meta-Tag schaltet die Symbolleiste für alle Bilder auf dieser jeweiligen Internetseite ab. Für ein einzelnes Bild auf der Seite deaktivieren Sie die Symbolleiste mit dem Attribut galleryimg im img-Tag:


<img src="bild.jpg" galleryimg="false" />.

Im übrigen kann auch der Benutzer diese Symbolleiste von sich aus deaktivieren, im Browser (IE 6) über Extras/Internetoptionen/Register: Erweitert. Dort muss das Häkchen vor dem Eintrag: Bildsymbolleiste aktivieren herausgeklickt werden.
Bei allen anderen Browsern wird diese Bildsymbolleiste nicht angezeigt.

IE8: Darstellung von IE7 erzwingen

Internet Explorer 8 zeigt Webseiten von Haus aus standardkonform an, wie Firefox und Opera. Da jedoch viele Webentwickler die Darstellung Ihrer Seiten für den Internet Explorer 7 speziell optimiert haben, können Sie durch Einfügen des folgenden Meta-Tags auf jeder Seite die Darstellung wie in IE 7 erzwingen:


<meta http-equiv="X-UA-Compatible" 
content="IE=EmulateIE7" />

IE: Darstellung wie im Browser Google Chrome erzwingen

Der nachfolgend dargestellte Meta-Tag weist den Browser an, sich beim Rendern der Seite wie der Browser Google Chrome zu verhalten.

Der Internet Explorer kommt mit verschiedenen Rendering-Engines daher. Um den IE dazu zu zwingen die neueste Rendering-Engine zu benutzen dient der Einsatz des folgenden Schnippsels. Wenn Google Chrome installiert sein sollte, wird auch im IE die starke Rendering-Engine von Chrome eingesetzt.

Quelle: UrbanDigital-Blog

Anmerkung: das verbessert auch die Darstellung von Seiten in HTML5 im Internet Explorer.

Das vorstehende Beispiel zeigt einen konditionalen Kommentar. Durch diesen Kommentar wird sichergestellt, dass die enthaltene Anweisung, in diesem Fall der Meta-Tag, nur von Browsern vom Typ Internet Explorer (IE) ausgelesen wird.

In der gezeigten Schreibweise, ohne Inhalt zwischen den Kommentaren beschleunigt der Kommentar das Rendering von Seiten im Internet Explorer allgemein.

Dieser leere conditional-comment hack wird zur Steigerung der Seitenperformance genutzt. Wenn conditional-comments auf der Seite genutzt werden, blockt der Browser weitere downloads bis zum abgeschlossenen conditional-comment download. Um dieses Problem aus der Welt zu schaffen wird ein leeres conditional-comment eingebaut.

Quelle: UrbanDigital-Blog

IE: Smarttags abschalten

Microsoft plant mit der Einführung der Technologie der Smart-Tags, Worte einer Internetseite mit Links auszustatten, die zum Wort (nicht aber unbedingt zum Satz oder Inhalt) passen. Wer sich bei Mircosoft »seine Schlüsselwörter« registriert (kostenpflichtiger Service) wird bevorzugt verlinkt. Die Smart-Tags-Technologie wird im InternetExplorer sowie in den MS Office-Programmen zur Anwendung kommen.
Zwar wird das Original (Datei auf dem Webserver) nicht verändert, der Seitenbesucher erhält aber trotzdem u.U. eine massiv geänderte Datei angezeigt - deren Verlinkung zwar in seinem Sinne sein kann, aber auf keinen Fall sein muss.
Ein Webseitenbetreiber hat auf das Sprungziel der Links keinen Einfluss - den hat bislang nur Microsoft. Mit einem Meta-Tag lässt sich diese Technologie abschalten. Ergänzen Sie dazu im head-Bereich jeder (!) Seite, die ohne Smart-Tags angezeigt werden soll:


<meta name="MSSmartTagsPreventParsing" 
content="true" />

IE: Meta-Tag für Seitenübergänge bzw. Überblendeffekte (nur Internet Explorer ab Version 5)

Der Internet Explorer ab Version 5 kann den Wechsel zwischen zwei HTML-Seiten mit Überblendeffekten darstellen wie ein Präsentationsprogramm. Dies ist nicht offizieller HTML-Standard und wird von den anderen Browsern einfach ignoriert, ohne Ausgabe einer Fehlermeldung.
Erreicht wird die Überblendung mit folgendem Meta-Tag:

Beispiel:

<meta 
http-equiv="page-enter" content="RevealTrans(Duration=4,Transition=12" />

Duration gibt die Dauer des Effektes in Sekunden an

Transition gibt den gewünschten Effekt an. Sie können aus 24 Effekten wie Vorhang, Verpixelung etc. wählen (Transition=0 bis Transition=24). Dabei ist 23 eine Zufallsfunktion, die die Überblendungen zwischen den übrigen 23 Effekten wahllos wechselt. Einfach mal probieren!

http-equiv="page-enter" gibt an, dass der Effekt beim Aufruf einer Seite angewandt wird (Einblenden)

http-equiv="page-exit" gibt an, dass der Effekt beim Verlassen einer Seite angewandt wird (Ausblenden)

Zum Anfang

8. Meta-Tags für Social Media

8.1 Meta-Tags zu Facebook

Um die Nutzung der Social Plugins von Facebook zu verbessern, kann man z.B. selber bestimmen, welches Bild Facebook als Miniaturbild nutzen soll. Dies geschieht über die Angabe von bestimmten Meta-Tags.

Diese sind nicht HTML valide. Dort kann aber nachgebessert werden, sodass der W3C-Validator still hält.

Zusätzliche Meta-Angaben für Facebook, wie auf der Seite des Social Plugins "Like-Button" zu sehen, zeigen Facebook beispielsweise welches Bild als Miniaturbild genutzt werden soll. Außerdem ist es z.B. möglich, einen zusätzlichen Titel für die Seite anzugeben, den Facebook anstatt dem <title>-Tag nutzen soll.

Beispiele:

<meta property="og:title" content="Kurzer Seitentitel">
<meta property="og:type" content="Art_des_Dokuments">
<meta property="og:url" content="Absolute_URL_der_Website">
<meta property="og:image" content="Absolute_URL/bilddatei.end">

<meta property="og:description" content="Beschreibung von Website und 
Inhalt.">

Die vollständige Liste der Open Graph Meta-Tags ist auf dieser Seite von Meta zu finden:
https://developers.facebook.com/docs/sharing/webmasters?locale=de_DE

Eine weitere Seite mit Erläuterungen zu den Open Graph Meta-Tags:
https://de.ryte.com/magazine/open-graph-tags

Facebook aktiviert die Linkbearbeitung nicht mehr standardmäßig. Seiten müssen nun mit dem Meta-Tag fb:pages validiert werden, um Clickbaiting zu bekämpfen.
<meta property="fb:pages" content="[channel_id_of_main_channel]">
Die alte Schreibweise im nachfolgenden Quellcode-Beispiel gilt zwar als veraltet, ist aber gelegentlich noch in Gebrauch:
<meta property="fb:page_id" content="ID der zugehörigen Facebook-Seite">

8.2 Meta-Tags zu Twitter

Beispiele:

<meta name="twitter:card" content="summary">
<meta name="twitter:site" content="@nytimes">
<meta name="twitter:creator" content="@SarahMaslinNir">
<meta name="twitter:url" content="http://www.nytimes.com/2012/02/19/arts/music/amid-police-presence-fans-congregate-for-whitney-houstons-funeral-in-newark.html">
<meta name="twitter:title" content="Parade of Fans for Houston’s Funeral">
<meta name="twitter:description" content="NEWARK - The guest list and parade of limousines with celebrities emerging from them seemed more suited to a red carpet event in Hollywood or New York than than a gritty stretch of Sussex Avenue near the former site of the James M. Baxter Terrace public housing project here.">
<meta name="twitter:image" content="http://graphics8.nytimes.com/images/2012/02/19/us/19whitney-span/19whitney-span-articleLarge.jpg">

Quelle: Twitter Developers: Twitter Cards

Zum Anfang

9. SEO: Suchmaschinenoptimierung - Platzierung der Seiten in den Suchmaschinen

Überlegen Sie, mit welchen Suchbegriffen Ihre Website gefunden werden soll. Legen Sie sich eine Liste an. Setzen Sie diese Worte gezielt auf Ihren Seiten ein.
Meta-Tags, title-Tag und Überschriften der bestplatzierten Seiten gleichen Inhalts von konkurrierenden Seiten auswerten.
Stichwörter und Stichwort-Kombinationen, z.B. aus dem Title-Tag und aus Überschriften in die entsprechenden Elemente der eigenen Seite übernehmen oder angleichen.
Eine kurz und prägnant geschriebene Beschreibung von Sinn, Zweck und Inhalten Ihrer Website im Meta-Tag "description" einfügen.
Stichwörter und wichtige Begriffe zur Seitenbeschreibung/Inhaltskennzeichnung/Ortsangabe unbedingt im <TITLE>-Tag verwenden.
Wichtige Suchbegriffe auf den einzelnen Seiten in Überschriften h1 bis h6 einfügen. Beachten Sie: was im title-Tag und in Überschriften auf der einzelnen Seite steht, wird von Suchmaschinen besonders gewertet. Dabei zählen Begriffe, die in einer Überschrift h1 zu finden sind, mehr, als was in einer Überschrift h3 oder h6 steht.
Text, Text, Text: Suchmaschinen sind text-orientiert. Schreiben Sie Text auf Ihren Seiten und achten Sie dabei darauf, wichtige Begriffe einzufügen.
Verwenden Sie bei Bildern das alt-Attribut. Fügen Sie eine Bildbeschreibung ein, knapp, aber mit wichtigen Begriffen.
Auf Seiten mit wenig Text im Quelltext Kommentare einfügen und diese mit Suchstichworten versehen, die aber Bezug zu der jeweiligen Seite haben sollten.
Linktext: achten Sie beim auf der Seite sichtbaren Text von Hyperlinks darauf, wichtige, beschreibende Begriffe zu verwenden. Nicht: hier "mehr..." sondern: hier der "Artikel über Fischzucht".
Erstellen Sie eine Sitemap und verlinken Sie diese in der Navigation Ihrer Website oder zumindest so, dass von Ihren Seiten Links darauf zeigen. Melden Sie diese Sitemap bei den Suchmaschinen an. Mehr zum Thema Sitemaps und wie Sie sie erstellen und einbinden können, erfahren Sie bei Google:

https://search.google.com/search-console/about
Für Google und andere Suchmaschinen relevant sind Hyperlinks, die von anderen, fremden Webseiten auf Ihre Website zeigen. So Sie können, bitten Sie Freunde und Bekannte, im Austausch einen Link auf Ihre Seite zu setzen. Wichtig ist dabei, dass im Linktext wichtige Begriffe auftauchen: Nicht: zur "Homepage von Max Mustermann", sondern: Seite über "Fischzucht von Max Mustermann".
Meiden Sie so genannte Linkfarmen, da diese den Suchmaschinen weitestgehend bekannt sind und deren Links nicht weiter gewertet werden. Das spart Ihnen auch noch Geld.

Die folgenden Hinweise sind heutzutage nicht mehr relevant, da der Meta-Tag "keywords" von Suchmaschinen wie Google nicht mehr beachtet wird. Doch manche kleinere Suchmaschinen beziehen sich noch darauf.

Begriffe in "keywords" maximal drei Mal wiederholen. Hinweis: Zu häufige Mehrfach-Nennung kann auch zum Ausschluss aus der Suchmaschine führen.
Priorität der Suchworte beachten: ca. 5 Worte => 1 Wort = 20%.

Wirklichen Nutzen bringt eine Seite nur dann, wenn sie auf den ersten drei Seiten einer Suchanfrage gefunden wird.

Hier Links zu zwei Websites, die sich mit dem Thema Suchmaschinenoptimierung (Searchengineoptimization SEO) befassen:

http://www.suchmaschinen-doktor.de/
http://www.sitepronews.com/ (Englisch)

Zum Anfang

10. Meta-Tags als Template zum Einbau in eine Seite:

<meta charset="utf-8">
<meta name="author" content="Ihr Name" />
<meta name="email" content="name@domain.tld" />
<meta name="date" content="2022-05-04T11:05:37+01:00" />
<meta name="publisher" content="Name, Ort, Land" />
<meta name="copyright" content="Name, Ort, Land" />
<meta name="description" content="Kurze Beschreibung der Seite" />
<meta name="keywords" content="Suchstichwörter" />
<meta name="robots" content="all,index,follow,archive,snippet,noodp" />
<meta http-equiv="content-language" content="de" />
<meta http-equiv="expires" content="0" />

<meta http-equiv="cache-control" 
content="no-store,no-cache,must-revalidate,pre-check=0,post-check=0,max-age=0" 
/>

<meta http-equiv="refresh" content="5; URL=http://www.domain.tld" />
<meta http-equiv="imagetoolbar" content="no" />
<meta name="MSSmartTagsPreventParsing" content="true" />
<link rev="made" content="mailto:name@provider.de" />

<link href="https://www.domain.tld/favicon.ico" rel="shortcut icon" 
type="image/ico" />

Zum Anfang