Was sind Meta-Tags? Einfach erklärt

Meta-Tags sind Zeilen ganz oben im Quelltext einer Webseite. Kein Besucher Ihrer Galerie bekommt sie zu sehen, und trotzdem bestimmen sie mit, wie die Galerie nach außen wirkt. Ob in der Google-Suche „Bildergalerie – Herbst“ steht oder nur „Bildergalerie“, ob Umlaute in Bildunterschriften korrekt erscheinen und ob die Vorschaubilder auf dem Handy in passender Größe oder winzig klein auftauchen, regeln diese Angaben im Kopfbereich der Seite. Gelesen werden sie von Programmen: vom Browser, von Suchmaschinen und von Netzwerken, in denen jemand einen Link zu Ihren Fotos teilt.

Meta Tags einfach erklärt: Eine Lupe zeigt Etiketten mit Bild, Zahnrad, Schild, Stern und Code im verborgenen Kopf einer Webseite

Die Zeilen im Quelltext finden

Am schnellsten verstehen Sie das Prinzip an Ihrer eigenen Seite. Öffnen Sie die Galerie im Browser und drücken Sie Strg und U, am Mac Wahltaste, Befehlstaste und U. Es erscheint der Quelltext. Zwischen <head> und </head> stehen die Angaben, um die es hier geht, alles danach im <body> ist das, was Besucher tatsächlich sehen. Bei einer schlichten Galerieseite finden Sie im Kopf meist diese vier Zeilen:

meta charset="utf-8": sagt dem Browser, wie er die Bytes in Buchstaben übersetzt. Die Zeile muss früh im Kopf stehen, innerhalb der ersten 1024 Bytes der Datei.
meta name="viewport" content="width=device-width, initial-scale=1": erlaubt dem Handy, die Seite in seiner echten Breite darzustellen, statt eine Desktop-Seite zu verkleinern.
title: der Name der Seite im Browser-Tab, in Lesezeichen und als blaue Zeile im Suchergebnis.
meta name="description" content="...": ein Vorschlag für die zwei Zeilen Text, die eine Suchmaschine unter dem Titel anzeigt.

Was passiert, wenn eine Angabe fehlt

Aufschlussreicher als die Schreibweise ist die Frage, was schiefgeht, wenn eine Zeile fehlt. Daran lässt sich ablesen, welche Angabe für eine Bildergalerie wie viel Gewicht hat.

Angabe	Wer sie liest	Was passiert, wenn sie fehlt
title	Browser und Suchmaschine	die Suchmaschine bildet selbst einen Titel, im Tab steht die Adresse
description	Suchmaschine	unter dem Titel erscheint ein Textschnipsel aus der Seite, oft eine Bildunterschrift
charset	Browser	aus „Bäume“ wird „BÃ¤ume“, sofern der Server keinen Zeichensatz mitschickt
viewport	Browser auf dem Handy	die Seite wird wie für rund 980 Pixel Breite gebaut und dann verkleinert, alles ist winzig

Der Titel ist genau genommen kein Meta-Tag, sondern ein eigenes Element. Er gehört trotzdem in jede Aufzählung, weil er im Suchergebnis das Erste ist, was jemand von Ihrer Galerie liest. Google zeigt davon so viel, wie in rund 600 Pixel Breite passt, das sind etwa 50 bis 60 Zeichen. Wie Sie ihn formulieren, beschreibt der Artikel Title-Tag bei Bildern, und was eine gute Beschreibung mit etwa 150 Zeichen ausmacht, steht unter Was ist die Meta Description. Wer welche Zeile auswertet und woran Sie merken, dass eine fehlt, zeigt das Diagramm. Gestrichelt umrandet sind die beiden Zeilen, die in der Vorlage des Bildergalerie-Scripts nicht stehen.

Animiertes Diagramm: charset und viewport liest der Browser, title erscheint im Browser-Tab und im Suchergebnis, description im Suchergebnis, og:image beim Teilen eines Links; darunter für alle fünf Zeilen, was passiert, wenn eine davon fehlt — Jede Zeile im Kopf hat ihren Leser, und fehlt sie, zeigt sich das an einer bestimmten Stelle, vom Browser-Tab bis zum geteilten Link.

Open Graph, robots und canonical: wann Sie sie brauchen

Neben den vier Grundangaben gibt es Meta-Tags, die nur in bestimmten Lagen etwas bringen. Ob Sie sie brauchen, hängt davon ab, wo Ihre Fotos auftauchen sollen und wo nicht.

Angabe	Typischer Anlass
Open Graph (og:title, og:image)	Sie verschicken den Link zu einem Album im Messenger und wollen ein bestimmtes Foto als Vorschau.
robots noindex	Eine Seite soll erreichbar sein, aber nicht in der Suche auftauchen, etwa eine Testgalerie.
canonical	Dieselbe Seite ist unter mehreren Adressen erreichbar, und nur eine davon soll zählen.

Bei Galerien kommt Open Graph am häufigsten ins Spiel. Fehlt og:image, nimmt ein Netzwerk irgendein Bild von der Seite: mal das Logo, mal ein Vorschaubild im Hochformat, das abgeschnitten wird, mal gar keines.

Ein robots-Tag mit noindex ist dagegen ein Werkzeug zum Verstecken, und es hat zwei Haken. Es wirkt erst, wenn die Suchmaschine die Seite erneut abruft, und dafür darf die Adresse nicht zugleich in der robots.txt gesperrt sein, sonst sieht der Crawler das Tag nie. Außerdem schützt es nichts: Wer die Adresse kennt, kann die Seite weiter aufrufen. Canonical wird oft missverstanden. Es ist ein Hinweis, keine Umleitung, und ein falscher Wert kann ganze Seiten aus der Suche nehmen. Ob Ihre Seiten so im Index landen, wie Sie sich das vorstellen, prüfen Sie in der Google Search Console.

Formular oder Vorlage: wer die Kopfzeilen schreibt

Bei einem großen Redaktionssystem tippen Sie Titel und Beschreibung für jede Seite in ein Formular, und das System schreibt die Zeilen in den Kopf. Eine schlanke Galerie-Software baut dagegen alle Seiten aus einer einzigen Vorlage. Unterscheiden können sich die Köpfe dann nur über Platzhalter, die das Programm je Seite füllt. Jedes fest eingetragene Meta-Tag erscheint auf jeder Seite.

Was das bedeutet, zeigt eine Galerie mit zwölf Kategorien. Steht in der Vorlage eine feste Beschreibung, tragen alle dreizehn Treffer im Suchergebnis, die Startseite eingerechnet, dieselben zwei Zeilen. Die Seiten selbst bleiben für die Suchmaschine verschieden, sie zeigen ja andere Fotos und Namen. Bei der Wahl zwischen „Herbst“ und „Winter“ hilft die Beschreibung aber niemandem, und Google ersetzt sie in solchen Fällen oft durch einen eigenen Ausschnitt. Prüfen Sie deshalb jede feste Zeile mit einer Frage: Stimmt dieser Satz für jede einzelne Seite der Galerie? Für den Namen Ihrer Website und eine allgemeine Beschreibung der Sammlung trifft das zu, für den Namen einer Kategorie oder ein bestimmtes Foto nicht.

Was Meta-Tags nicht leisten

Eine Beschreibung ist ein Vorschlag, kein Befehl. Google ersetzt sie häufig durch einen Ausschnitt aus der Seite, wenn der besser zur Suchanfrage passt, und für die Position im Ergebnis zählt sie nicht. Ihr Nutzen liegt darin, dass mehr Menschen klicken. Das alte keywords-Tag mit einer Liste von Stichwörtern beachtet Google seit Jahren gar nicht mehr, Sie können es ohne Verlust weglassen.

Auch für die Bildersuche bringen Meta-Tags wenig. Was auf einem Foto zu sehen ist, entnimmt Google vor allem dem alt-Text, dem Dateinamen und dem Text rund um das Bild. Strukturierte Daten für Bilder ergänzen das an einer bestimmten Stelle: Mit Angaben zu Urheber und Lizenz kann Google ein Foto in der Bildersuche als lizenzierbar kennzeichnen. Die Beschreibung des Motivs ersetzen sie nicht.

Meta-Tags im Bildergalerie-Script

Im Bildergalerie-Script stehen die Meta-Tags der öffentlichen Galerie in einer einzigen Datei, der Vorlage tpl/bildergalerie.html. Ein Eingabefeld dafür in der Verwaltung gibt es nicht. Im Kopfbereich der mitgelieferten Vorlage stehen meta charset="utf-8", die viewport-Angabe width=device-width, initial-scale=1, ein leeres meta name="author" content="" und der Titel Bildergalerie {AUSGABE_KATEGORIE}. Den Platzhalter ersetzt die Galerie auf einer Kategorieseite durch einen Gedankenstrich und den Namen der Kategorie, auf der Startseite durch nichts. Die Startseite heißt also „Bildergalerie“, die Kategorie „Herbst“ heißt „Bildergalerie – Herbst“.

Angabe	Im Bildergalerie-Script
charset	immer UTF-8, die Galerie sendet ihre Seiten so; speichern Sie die Vorlage ebenfalls in UTF-8
viewport	vorhanden, die Galerie ist für Bildschirme bis hinunter zu 390 Pixel Breite ausgelegt
title	je Kategorie verschieden über `{AUSGABE_KATEGORIE}`
description, og:image, canonical	nicht vorhanden, lassen sich aber von Hand in den Kopf schreiben
robots	nur in der Verwaltung: Jede Seite unter `admin/` trägt `noindex, nofollow`

Am Titel lohnt sich die erste Änderung: Ergänzen Sie in der Vorlage den Namen Ihrer Website, zum Beispiel <title>Bildergalerie {AUSGABE_KATEGORIE} | Fotos aus Erfurt</title>. Eine Kategorieseite heißt dann „Bildergalerie – Herbst | Fotos aus Erfurt“. Außer diesem Platzhalter kennt die Vorlage nur zwei weitere: {AUSGABE_BILDERGALERIE} für den Inhalt und {SCRIPT_VERSION} für die Versionsnummer. Ein ausgedachter Platzhalter wie {TITEL} wird durch nichts ersetzt, und bedingte Blöcke wie {IF …} wertet die Galerie in dieser Vorlage nicht aus, sie stünden als Text auf der Seite.

Eine meta name="description" im Kopf erscheint auf der Startseite und auf jeder Kategorieseite mit demselben Wortlaut. Formulieren Sie sie deshalb für die ganze Sammlung, etwa „Fotos aus Erfurt und Umgebung, sortiert nach Jahreszeiten“. Das leere author-Tag füllen Sie mit Ihrem Namen, oder Sie löschen die Zeile.

Ein fester canonical gehört nicht in diese Vorlage. Zeigt er auf die Startseite, meldet jede Kategorieseite der Suchmaschine „maßgeblich ist die Startseite“, und die Kategorien können aus der Suche verschwinden. Ähnlich wirkt ein festes og:image: Jeder geteilte Link zeigt dann dasselbe Foto, egal welches Album jemand verschickt. Verwenden Sie noch eine eigene Vorlage aus Version 3.10, entfernen Sie user-scalable=no aus der viewport-Zeile, damit Besucher auf dem Handy in die Fotos hineinzoomen können.

Ein Update des Scripts bringt eine neue tpl/bildergalerie.html mit. Sichern Sie Ihre angepasste Vorlage vorher, sonst sind die eingetragenen Zeilen nach dem Hochladen wieder weg. Wer das an einer eigenen Galerie ausprobieren will, kann das Bildergalerie-Script kostenlos herunterladen und die Vorlage nach der Installation mit einem Texteditor öffnen.

Häufige Fragen

Rund um die Angaben im head-Bereich kommen immer wieder dieselben Fragen, hier die wichtigsten kurz beantwortet:

Welche Meta-Tags braucht wirklich jede Seite?

Vier Zeilen reichen für den Anfang: charset, viewport, ein Titel, der die Seite genau benennt, und eine Beschreibung, die zum Klicken einlädt. Fehlt eine der ersten beiden, merken Sie es sofort an kaputten Umlauten oder an einer winzigen Darstellung auf dem Handy. Fehlen die anderen beiden, zeigt sich das erst in der Suche, meist an zu wenigen Besuchern.

Brauche ich noch das keywords-Tag?

Nein. Google wertet es nicht aus, und andere Suchmaschinen geben ihm kaum Gewicht. Eine lange Stichwortliste im Quelltext verrät außerdem Mitbewerbern, auf welche Begriffe Sie zielen. Die Zeit stecken Sie besser in einen Titel, der die Kategorie beim Namen nennt.

Wozu ist Open Graph gut?

Damit bestimmen Sie, wie ein geteilter Link aussieht: welches Bild als Vorschau erscheint, welcher Titel darüber steht und welcher Satz darunter. Für eine Galerie heißt das, dass beim Teilen eines Albums ein passendes Foto statt eines zufälligen Ausschnitts zu sehen ist. Mit dem Ranking in der Suche hat Open Graph nichts zu tun.

Kann ich im Bildergalerie-Script jeder Kategorie eigene Meta-Tags geben?

Nur den Titel: Er enthält über den Platzhalter {AUSGABE_KATEGORIE} automatisch den Namen der Kategorie. Für eine eigene description oder ein eigenes og:image je Kategorie fehlt ein passender Platzhalter, solche Zeilen wären auf allen Seiten identisch.