Meta-Tags stehen im <head> und sind im Browser unsichtbar – trotzdem sind sie entscheidend. Sie steuern wie deine Seite auf Smartphones aussieht, was Google in den Suchergebnissen anzeigt, wie ein Link beim Teilen auf WhatsApp oder Facebook aussieht, und in welcher Farbe die Adressleiste auf dem Handy erscheint. Wer sie weglässt oder falsch setzt, verschenkt Potenzial.
Abschnitte: charset und viewport, description, theme-color, Open Graph – og:image und Co., Die komplette Vorlage.
charset und viewport
Diese zwei Tags gehören auf jede einzelne Seite – ohne Ausnahme:
<meta charset="UTF-8">– legt die Zeichenkodierung fest. Ohne diesen Tag können Umlaute wie ä, ö, ü als kryptische Zeichen erscheinen.<meta name="viewport" content="width=device-width, initial-scale=1">– sagt dem mobilen Browser, die Seite in echter Pixelgröße darzustellen. Ohne ihn zoomt das Smartphone die Seite auf Briefmarkengröße raus.
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1">description
Die description ist der Text den Google unter dem Seitentitel in den Suchergebnissen anzeigt. Google generiert diesen Text zwar manchmal selbst, aber eine eigene Description gibt dir die Kontrolle darüber was Nutzer als erstes lesen – und ob sie klicken.
- Zwischen 120 und 160 Zeichen – alles darüber wird abgeschnitten.
- Den wichtigsten Inhalt der Seite auf den Punkt bringen.
- Jede Seite sollte eine eigene, einzigartige Description haben.
<meta name="description" content="Lerne HTML, CSS und PHP – praxisnah,
verständlich und Schritt für Schritt. Für Einsteiger und Neugierige.">theme-color
theme-color färbt die Adressleiste des Browsers auf Android-Geräten in der gewählten Farbe ein. Ein kleines Detail das die Seite professioneller wirken lässt und zur eigenen Marke passt:
<meta name="theme-color" content="#ffffff">
Auf iOS Safari hat dieser Tag keinen Effekt – dort gibt es ein separates apple-mobile-web-app-status-bar-style. Für die meisten Projekte reicht theme-color aber vollkommen aus.
Open Graph – og:image und Co.
Open Graph Tags stammen ursprünglich von Facebook, werden aber heute von allen großen Plattformen genutzt – WhatsApp, LinkedIn, Twitter/X, Telegram. Sie steuern wie ein Link aussieht wenn jemand deine Seite teilt: welches Bild erscheint, welcher Titel, welche Beschreibung.
<meta property="og:title" content="Rainpearl Learn – Webdesign lernen">
<meta property="og:description" content="HTML, CSS, JavaScript und PHP – praxisnah erklärt.">
<meta property="og:image" content="https://learn.rainpearl.de/media/image/og-preview.jpg">
<meta property="og:url" content="https://learn.rainpearl.de/">
<meta property="og:type" content="website">
Das Bild bei og:image sollte mindestens 1200 × 630 Pixel groß sein – das ist das Format das WhatsApp und Facebook für die Vorschau verwenden. Kleiner als 600 × 315 Pixel wird es oft gar nicht angezeigt.
Die komplette Vorlage
So sieht ein vollständiger, sauber gesetzter <head>-Bereich aus:
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<meta name="description" content="Deine Seitenbeschreibung – max. 160 Zeichen.">
<meta name="author" content="Dein Name">
<meta name="robots" content="index, follow">
<meta name="theme-color" content="#ffffff">
<meta property="og:title" content="Seitentitel">
<meta property="og:description" content="Deine Seitenbeschreibung.">
<meta property="og:image" content="https://deine-domain.de/media/og-preview.jpg">
<meta property="og:url" content="https://deine-domain.de/">
<meta property="og:type" content="website">
<title>Seitentitel</title>
</head>
Diese Vorlage kannst du für jede neue Seite als Ausgangspunkt nehmen – description, og:title, og:url und title anpassen, den Rest so lassen.