--- title: 'Meta-Titel und Description schreiben – mit Vorschau' url: 'https://www.p17-tools.de/web-seo/meta-tag-editor' markdown: 'https://www.p17-tools.de/web-seo/meta-tag-editor.md' lang: de date: '2026-10-14' description: 'Meta-Titel und Meta-Description schreiben und live prüfen: Zeichen, Pixelbreite, Vorschau für Desktop und Smartphone, Symbole zum Einfügen und fertiges HTML.' --- Web & SEO # Meta-Titel und Description schreiben – mit Vorschau Tippen Sie Titel und Beschreibung ein und sehen Sie sofort, wie das Suchergebnis aussieht, wo Google kürzen würde und wie viel Platz noch frei ist. Symbole fügen Sie per Klick an der Cursorposition ein. ## Werkzeug: Meta-Tags & Vorschau **Richtwerte, keine festen Grenzen:** Google kürzt nach verfügbarer Breite in Pixeln, nicht nach Zeichen – ein „W" ist etwa dreimal so breit wie ein „i". Die Vorschau misst mit der Schrift Arial in 20 px (Titel) und 14 px (Beschreibung). Google schreibt Titel und Beschreibungen außerdem regelmäßig selbst um und zeigt Sonderzeichen und Emojis nicht garantiert an. ## Was im Suchergebnis steht – und woher es kommt Ein Treffer bei Google besteht aus vier Teilen, von denen Sie drei direkt steuern können: | Teil | Quelle | Steuerbar über | |---|---|---| | Name der Website und Favicon | Strukturierte Daten und Startseite | `WebSite`-Auszeichnung, Favicon | | Adresse als Pfad | URL der Seite | sprechende URLs | | **Titel** (blau) | ``-Element | Meta-Titel | | **Beschreibung** (grau) | `<meta name="description">` oder Seitentext | Meta-Description | Titel und Beschreibung sind damit die einzige Anzeige, die eine Website bei Google kostenlos schalten kann. Sie entscheiden darüber, ob aus einer guten Position auch ein Klick wird. ## Pixel statt Zeichen Der verbreitete Rat „maximal 60 Zeichen" ist eine Vereinfachung. Tatsächlich zählt die Breite in Pixeln: | Beispiel | Zeichen | Breite | |---|---|---| | `iiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiii` | 40 | etwa 180 px | | `WWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWW` | 40 | etwa 750 px | Beide Titel haben dieselbe Zeichenzahl, aber nur einer passt ins Suchergebnis. Der Editor misst deshalb mit derselben Schrift und Größe, die Google verwendet, und zeigt den Balken rot, sobald die Breite überschritten ist. ## Ein guter Titel in fünf Schritten 1. **Das Wichtigste zuerst.** Der Begriff, nach dem gesucht wird, gehört an den Anfang – dort bleibt er auch bei einer Kürzung stehen. 2. **Ein Versprechen dazu.** Was bekommt der Leser? „Mehrwertsteuerrechner" ist ein Etikett, „Mehrwertsteuerrechner: brutto netto mit 19 % oder 7 %" ist eine Antwort. 3. **Marke ans Ende.** Getrennt durch `|` oder `–`, und nur, wenn Platz ist. 4. **Jede Seite einzeln.** Identische Titel auf mehreren Seiten sind der häufigste Grund, warum Google selbst umschreibt. 5. **Passend zur H1.** Titel und Hauptüberschrift müssen nicht gleich sein, sollten aber dasselbe Thema benennen. ## Eine gute Beschreibung Die Meta-Description ist kein Rankingfaktor, aber ein Klickfaktor. Bewährt hat sich ein einfacher Aufbau: - **Erster Satz:** Was genau finde ich hier? Mit dem Suchbegriff darin – Google hebt ihn dann fett hervor. - **Zweiter Satz:** Was unterscheidet diese Seite? Kostenlos, mit Vorlage, für Deutschland, aktuell. - **Optional:** Eine klare Handlungsaufforderung wie „Jetzt berechnen" oder „Ohne Anmeldung nutzen". Vermeiden Sie Beschreibungen, die mit dem Firmennamen beginnen oder bloß die Überschrift wiederholen. Sie verschenken den ersten und wichtigsten Teil der Zeile. ## Symbole: wann sie helfen Ein einzelnes Häkchen oder ein Pfeil kann ein Ergebnis in einer Liste ähnlicher Treffer hervorheben. Die Palette im Editor enthält deshalb Zeichen, die Google erfahrungsgemäß häufig anzeigt, und einige Emojis, bei denen das weniger sicher ist. | Gut geeignet | Mit Vorsicht | Besser nicht | |---|---|---| | ✓ ★ → » · – \| | ✅ ⭐ 📞 🚚 | ganze Emoji-Ketten | | als Aufzählung in der Beschreibung | als Blickfang im Titel | GROSSBUCHSTABEN, !!! | Grundregel: Ein Symbol sollte eine Information transportieren – ein Häkchen vor „kostenlos", ein Telefon vor der Hotline – und nicht nur Aufmerksamkeit erzeugen. ## Wenn aus Suchergebnissen Kunden werden sollen Titel und Beschreibung sind der sichtbare Teil der Suchmaschinenoptimierung. Dahinter stehen Seitenstruktur, Ladezeit, interne Verlinkung, strukturierte Daten und Inhalte, die die gestellte Frage tatsächlich beantworten. Unterstützung bei Online-Marketing und Website-Umsetzung gibt es bei der [p17 GmbH](https://www.p17.de/). Wer wissen will, welche Kampagne welche Besucher bringt, baut die Links vorher mit dem [UTM-Link-Generator](https://www.p17-tools.de/web-seo/utm-link-generator). ## Verwandte Werkzeuge - Tracking-Links bauen: [UTM-Link-Generator](https://www.p17-tools.de/web-seo/utm-link-generator) - Texte formatieren: [Markdown-Editor](https://www.p17-tools.de/web-seo/markdown-editor) - Zeichen, Wörter und Lesezeit: [Zeichenzähler](https://www.p17-tools.de/buero/zeichenzaehler) ## Häufige Fragen zu Meta-Titel und Description Wie lang darf ein Meta-Titel sein? Google kürzt nicht nach Zeichen, sondern nach Pixelbreite – auf dem Desktop bei etwa 580 bis 600 Pixeln. Das entspricht meist 50 bis 60 Zeichen. Ein Titel aus vielen schmalen Buchstaben passt länger als einer mit breiten wie W, M oder Großbuchstaben. Deshalb misst der Editor beides. Wie lang sollte die Meta-Description sein? 120 bis 160 Zeichen sind ein guter Rahmen, auf dem Desktop etwa 920 Pixel. Auf dem Smartphone wird früher gekürzt, dort sind rund 680 Pixel ein brauchbarer Richtwert. Wichtig ist, dass die zentrale Aussage im ersten Drittel steht – dann bleibt sie auch bei einer Kürzung sichtbar. Ist die Meta-Description ein Rankingfaktor? Nein, nicht direkt. Sie beeinflusst aber, ob jemand auf das Ergebnis klickt. Eine Beschreibung, die genau die Frage des Suchenden aufgreift, bringt bei gleicher Position mehr Besuche – und das ist am Ende das, worum es geht. Warum zeigt Google einen anderen Titel an als meinen? Google schreibt Titel um, wenn es sie für unpassend hält: zu lang, mit Suchbegriffen überladen, bei vielen Seiten identisch oder inhaltlich weit von der Hauptüberschrift entfernt. Häufig nimmt Google dann die H1 der Seite. Die beste Vorsorge ist ein Titel, der zur H1 passt, eindeutig ist und in die Pixelbreite passt. Darf ich Symbole und Emojis verwenden? Ja, aber mit Maß. Einfache Zeichen wie ✓, ★, →, | oder – zeigt Google meist an und sie können ein Ergebnis hervorheben. Emojis werden je nach Suchanfrage und Gerät oft ausgeblendet. Mehr als ein oder zwei Symbole wirken schnell unseriös und erhöhen die Wahrscheinlichkeit, dass Google den Text umschreibt. Gehört der Markenname in den Titel? In der Regel ja, und zwar ans Ende, getrennt durch einen senkrechten Strich oder Halbgeviertstrich: „Mehrwertsteuerrechner: brutto netto | p17-tools". Bei sehr langen Titeln kann er entfallen – Google zeigt den Namen der Website ohnehin über dem Ergebnis an. Wo trage ich Titel und Description ein? Im `<head>`-Bereich der Seite. Der Editor erzeugt den passenden HTML-Code. In Content-Management-Systemen gibt es dafür meist eigene Felder – in Grav etwa im Seitenkopf, in WordPress über ein SEO-Plugin. Weiterführend ## Weitere Werkzeuge aus „Web & SEO“ - [UTM-Links](https://www.p17-tools.de/web-seo/utm-link-generator)Tracking-Links mit utm\_source, utm\_medium und utm\_campaign – mit GA4-Kanalvorschau. - [Markdown](https://www.p17-tools.de/web-seo/markdown-editor)Markdown schreiben mit Live-Vorschau, Symbolleiste und HTML-Export – plus Anleitung. - [Alle Werkzeuge: Web & SEO](https://www.p17-tools.de/web-seo)UTM-Links bauen, Meta-Tags mit Google-Vorschau prüfen, Markdown schreiben. --- ## Navigation - Parent: [Werkzeuge für Website, Suchmaschine und Kampagne](https://www.p17-tools.de/web-seo.md) - Previous: [UTM-Links erstellen – und verstehen, was sie messen](https://www.p17-tools.de/web-seo/utm-link-generator.md) - Next: [Markdown-Editor – und die Sprache dahinter erklärt](https://www.p17-tools.de/web-seo/markdown-editor.md)