Metatags | Übergeordnete Information für die Suchmaschinen

siehe auch Meta-Tags-de
selftml Meta

Meta Angaben können nützliche Informationen für Browser, Server und Suchmaschinen enthalten. Beispielsweise Angaben zum Author oder der Sprache der Webseite auch Weiterleitungen sind möglich.Die Metaangaben haben ein name oder http-equiv Attribut, welches die Art der Metaangabe definiert, sowie ein content Attribut, in dem der Wert dazu definiert wird.

Eine Ausnahme bildet das charset Attribut, welches den Zeichensatz bestimmt. Das http-equiv Attribut war ursprünglich dafür vorgesehen Anweisungen für den Server zu enthalten. Diese sollten ausgeführt werden bevor die Seite geliefert wurde. Das hat sich jedoch in der Praxis nicht durchgesetzt, so werden die http-equiv Attribute wie auch die name Attribute vom Browser ausgeführt.

Zeichensatz

<meta charset="utf-8">

Diese Metaangabe wurde eigens für HTML5 konzipiert. Sie sollte am Anfang stehen, genau genommen innerhalb der ersten 1024 Bytes des Dokuments.

Angaben zum Inhalt

Eine description enthält eine kurze Beschreibung zum Thema der Seite. Keine Stichwörter, maximal 500 Zeichen. Wenn eine Seite in der Suchmaschine gefunden wird, wird die Description dort angezeigt wird. In dem Fall werden ca. 80 Zeichen der description dargestellt.

Keywords haben heute kaum bis gar keine Bedeutung.

<meta name="description" content="Beschreibung der Seite maximal 150 Zeichen">
<meta name="keywords" content="max. 20 Schlüsselbegriffe">
<meta name="page-topic" content="Bildung, Education">

Angaben zum Autor

<meta name="author" content="Michael Albers">
<meta name="publisher" content="Michael Albers">
<meta name="organization" content="Comcave College">
<meta name="copyright" content="Michael Albers">

Angaben für die Suchmaschinen

siehe auch Metatags die Google versteht

<meta name="revisit-after" content="7 days">

<meta name="robots" content="index, follow">

name="robots" content="....

noindex weist die Suchmaschine an, den Seiteninhalt nicht auszulesen. Der Seiteninhalt kann nicht in der Suchmaschine gefunden werden.

nofollow Die Suchmaschine folgt nicht den Hyperlinks, so dass alle von dort aus verlinkten Unterseiten nicht gelistet werden.

Eine weitere Möglichkeit die Seiten bei der Google Suchmaschine anzumelden ist über den Google Dienst "search console" möglich.

Angaben zur Lokalisierung (GEO.Tags)

<meta name="geo.region" content="DE-NW">
<meta name="geo.placename" content="Dortmund">
<meta name="geo.position" content="51.493565;7.400955">
<meta name="ICBM" content="51.493565, 7.400955">

Weiterleitung auf eine andere Adresse

<meta http-equiv="refresh" content="5; URL=https://www.pastorpixel.de/">

http-equiv steht für ein HTTP-Äquivalent. Diese dienen zur Steuerung des Webservers.

Der Wert refresh im http-equiv Attribut erzeugt eine Weiterleitung auf eine andere Adresse. Im content Attribut werden hier 2 Werte übergeben, die innerhalb der Anführungszeichen mit Semikolon getrennt aufgeführt werden. Als erstes die Wartezeit bis zur Weiterleitung in Sekunden. Solange wird diese Seite angezeigt, bevor die andere Seite aufgerufen wird. Der zweite Werte ist URL=irgendeineAdresse. Die Adresse kann jede beliebige gültige URL Adresse sein.

Man kann diesen Meta-Tag auch nutzen, um die Seite in einem Zeitinterval ständig zu aktualisieren, beispielsweise bei Spielen.

Angabe zum Viewport

<meta name="viewport" content="width=device-width, initial-scale=1.0">
Mehr dazu unter Media Queries / Viewport

Da es mit dem Aufkommen der Smartphones kaum Webseiten gab, die für diese kleinen Viewportgrößen optimiert waren, wurde der Layout Viewport erfunden. Das bedeutet, dass bei einem Layout Viewport von 960 Pixel Breite, eine Webseite die 960 Pixel breit ist die gesamte Breite einnimmt. Sie wird also verkleinert. Mittels Zoomfunktionen kann man dann die einzelnen Bereiche vergrößern.

Hat man aber eine responsive Website erstellt, die an unterschiedliche Bildschirmauflösungen angepasst ist (siehe Media Queries), so braucht man eine eigene Viewport Anweisung, um die Seite auf dem Smartphone in der normalen Größe anzuzeigen.

Open Graph

weitere Infos - | - Open Graph Protocol Seite - | - Facebook Tool für Open Graph

Wird die eigene Website in sozialen Netzwerken geteilt, wäre es schön wenn dort nicht nur der Link erscheint, sondern generell eine ansprechende Darstellung der Seite erscheint mit Bild, Beschreibung, Name der Website etc. Das ist mit den Open Graph Metatags möglich.

einige Beispiele:

<meta property="og:image" content="https://www.pastorpixel.de/img/bild.png">
<meta property="og:description" content="Die beste Website der Welt für coole User.">
<meta property="og:title" content="Pixel Pastors Supersite">
<meta property="og:type" content="Website">
<meta property="og:url" content="https://www.pastorpixel.de">
property="og:image"
Ein Bild welches angezeigt wird. Es sollte laut Facebook ein Seitenverhältnis haben von: 1.91 : 1
Das Bild sollte mindestens 600 x 315 Pixel haben. Ideal ist 1200 x 630 Pixel. Man kann auch mehrere Bilder anbieten.
property="og:title"
Ein aussagekräftiger Titel.
property="og:description"
Eine kurze Beschreibung der Website.
property="og:content"
Art des Inhalts, üblich ist "Website".
property="og:url"
Die Adresse der Website. Hiermit wird sicher gestellt, dass nicht irgendwelche Umleitungen genutzt werden.
property="og:name"
Offizieller Name der Website

Wenn das Bild nicht aktualisiert wird oder alte Infos angezeigt werden, kann man bei Facebooks Sharing Debugger die Seite "erneut scrappen" lassen.