Meta-Tags in HTML

  1. Metatags zur Seitenbeschreibung
  2. Metatags als Anweisungen für Suchmaschinen
  3. Suchmaschinenspezifische Metatags
  4. Metatags als Anweisung (zum leichteren Auslesen des Inhalts) an den Browser
  5. Microsoft-eigene Metatags für den Internet Explorer
  6. Metatags zur Steuerung des Seitenaufrufs von Servern
  7. Meta-Tags für Social Media
  8. Metatags zur Gestaltung von Diashows und Überblendeffekten
  9. SEO: Suchmaschinenoptimierung - Platzierung der Seiten in den Suchmaschinen
  10. Die gelisteten Meta-Tags als Template zum Einbau

Metatags werden im <HEAD>-Bereich einer Seite eingebaut. Sie können von dort aus auch aus einer separaten Datei aufgerufen werden.

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

1. Seitenbeschreibung: Autor und Erstelldatum etc.

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

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="2001-05-03T08:49:37+00:00" />

Mit diesem Meta-Tag geben Sie an, wann die Datei publiziert wurde. Im obigen Beispiel ist 2001 die Jahreszahl, 05 der Monat (Mai), 03 der Tag, 08 die Stunden, 49 die Minuten und 37 die Sekunden. Die Angabe 00:00 hinter dem Pluszeichen ist die Abweichung der Zeit von der Greenwich-Zeit in Stunden und Minuten, im Beispiel keine Abweichung. 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="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.

Das Verhalten von Robots (Agenten der Suchmaschinen) steuern

<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="msnbot" 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 pro Quartal, 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 Metatags

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:

Google selbst hat auch eigene Meta-Tags eingeführt

<meta name="verify-v1" content="string/string=" />

Ein entsprechender Meta-Tag kann in den Google Webmaster Tools (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 Webmaster Tools 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)

Zeichensatz angeben

<meta http-equiv="content-type" content="text/html; charset=iso-8859-1" />

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.

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=http://www.teamone.de/selfhtml/" />

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.
Dieser Metatag kann auch genutzt werden, um eine HTML-Diashow zu steuern. Siehe: "Metatags in HTML zur Gestaltung von Diashows und Seitenübergängen".

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="http://www.domain.tld/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. Microsoft-eigene Metatags für den Internet Explorer

IE 6: Bildsymbolleiste ausblenden

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.

<!--[if IE]><meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1"><![endif]-->

<!--[if IE]><![endif]-->

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: Metatag 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

6. 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).

Beachten Sie:
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

7. Meta-Tags für Social Media

7.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 XHTML 1.1 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 möglich, einen zusätzlichen Titel für die Seite anzugeben, den Facebook anstatt dem <title>-Tag nutzen soll.

Beispiele:

<html>
<head prefix="og: http://ogp.me/ns# fb: http://ogp.me/ns/fb#
article: http://ogp.me/ns/article#">
<meta property="fb:app_id" content="YOUR_APP_ID">
<meta property="og:type" content="article">
<meta property="og:url" content="URL of this object">
<meta property="og:site_name" content="Name of site hosting article">
<meta property="og:image" content="URL to an image">
<meta property="og:title" content="Name of article">
<meta property="og:description" content="Description of object">
<meta property="article:published_time" content="DateTime">
<meta property="article:modified_time" content="DateTime">
<meta property="article:expiration_time" content="DateTime">
<meta property="article:author" content="URL to Author object">
<meta property="article:section" content="Section of article">
<meta property="article:tag" content="Keyword">
</head>
<body>
<!-- main article body -->
</body>
</html>

Quelle: facebook-Meta-Tags und  facebook Developers

7.2 Meta-Tags zu Twitter

Beispiele:

  1. <meta name="twitter:card" content="summary">
  2. <meta name="twitter:site" content="@nytimes">
  3. <meta name="twitter:creator" content="@SarahMaslinNir">
  4. <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">
  5. <meta name="twitter:title" content="Parade of Fans for Houston’s Funeral">
  6. <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.">
  7. <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

8. HTML-Diashows und Überblendeffekte (nur IE)

HTML-Diashows mit dem Metatag zur automatischen Weiterleitung

Der bereits oben beschriebene Metatag zur automatischen Weiterleitung kann auch dazu verwendet werden, eine Diashow in HTML laufen zu lassen. Dazu benötigen Sie eine "normale" Startseite, von der aus per Link die erste HTML-Seite der eigentlichen Diashow aufgerufen wird. Diese enthält nun als erste Seite den Metatag und ruft nach einer Standzeit automatisch die nächste Seite auf, welche wiederum den Metatag mit dem Aufruf der nächst folgenden Seite enthält und so zu bis zur letzten Seite. Die letzte Seite muss wiederum auf die normale Startseite verweisen (oder eine andere), welche diesen Metatag nicht enthält - sonst wäre der User in einer Endlosschleife gefangen, aus der er nur mit Schließen der Seite bzw. des Browsers herauskommt.

Beispiel:

<meta http-equiv="refresh" content="5; URL=bilderseite2.htm" />

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 inklusive 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. Dabei kann die Adressangabe absolut oder auch relativ wie im Beispiel erfolgen. Bei einem Timeout von 0 wird die angegebene nächste Datei sofort geladen.

Metatag für Seitenübergänge bzw. Überblendeffekte (nur Internet Explorer ab Version 5)

Der Internet Explorer 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

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

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.

Folgende Hinweise sind besonders geeignet, die Nachteile von Frameset-Seiten bei der Indizierung durch Suchmaschinen auszugleichen:

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:

Zum Anfang

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

<link rev="made" content="mailto:name@provider.de" />
<link href="http://www.domain.tld/favicon.ico" rel="shortcut icon" type="image/ico" />
<meta name="author" content="Ihr Name" />
<meta name="email" content="name@domain.tld" />
<meta name="date" content="2014-04-21T11:05:37+01:00" />
<meta name="publisher" content="Name, Ort, Land" />
<meta name="copyright" content="Name, Ort, Land" />
<meta name="page-topic" Content="Dienstleistung, Internet" 7>
<meta name="page-type" content="Verzeichnis" />
<meta name="audience" Content="Anfänger, Fortgeschrittene, Programmierer,..." />
<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 name="revisit-after" content="20 days" />
<meta http-equiv="content-language" content="de" />
<meta http-equiv="content-type" content="text/html; charset=iso-8859-1" />
<meta http-equiv="Content-Script-Type" content="text/javascript" />
<meta http-equiv="Content-Style-Type" content="text/css" />
<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="page-enter" content="RevealTrans(Duration=4,Transition=12" />
<meta http-equiv="imagetoolbar" content="no" />
<meta http-equiv="X-UA-Compatible" content="IE=EmulateIE7" />
<meta name="MSSmartTagsPreventParsing" content="true" />

Zum Schluss noch der Link auf eine englisch-sprachige Seite zum Thema: http://vancouver-webpages.com/META/metatags.detail.html

Zum Anfang

© Klaus Gölker 2014