Skip to content
AI-gestützt · kostenlos

Title-Tag-Generator

3 fertige `<title>`-Tags zum Einfügen in Yoast, Next.js Metadata oder HTML.

Ein Title-Tag-Generator schreibt Vorschläge für Meta-Titel. Ein produktionsreifer Generator formatiert die Ausgabe so, dass du sie direkt in dein CMS, deine Static-Site-Konfiguration oder dein HTML einfügen kannst, ohne Spitzklammern neu einzutippen. Dieses Tool generiert drei perfekte Title-Tags mit One-Click-Copy-Buttons für HTML, Next.js-Metadaten, Yoast SEO und Plain Text sowie eine pixelgenaue SERP-Vorschau, damit du weißt, dass der Titel passt, bevor du veröffentlichst.

Generate the whole content, not just check it.

BlazeHive writes SEO articles end to end from a single keyword. Outline, draft, meta, schema, internal links. Free trial, no card.

Start with BlazeHive Free trial

Was ein Title-Tag ist und warum Formatierung zählt

Der Title-Tag ist das HTML-Element, das die anklickbare Überschrift in Suchergebnissen, Browser-Registerkarten und Social-Share-Vorschauen definiert, wenn Open-Graph-Tags fehlen. Er befindet sich im <head>-Bereich der Seite und sieht im rohen HTML so aus:

<title>How to Write a Meta Description | BlazeHive</title>

In Next.js oder anderen React-Frameworks erscheint er als Metadaten-Export:

export const metadata = {
  title: "How to Write a Meta Description | BlazeHive",
};

In WordPress mit Yoast SEO wird er ins Feld „SEO-Titel" im Yoast-Panel eingefügt. Verschiedene Systeme erwarten unterschiedliche Formate. Ein Tool, das dir den Titel als Plain Text liefert, zwingt dich, ihn in die richtige Syntax für deinen Stack zu packen. Ein Tool mit drei Copy-Buttons spart diesen Schritt.

Google kürzt Title-Tags bei etwa 60 Zeichen oder 600 Pixeln, je nachdem, was zuerst kommt. Die Zeichenzahl ist eine Annäherung. Ein Titel mit Großbuchstaben und breiten Zeichen wie W und M wird früher gekürzt als ein Titel mit Kleinbuchstaben. Die einzige zuverlässige Überprüfung ist eine pixelgenaue Vorschau, die den Titel in der SERP-Schriftart rendert und die Breite misst.

Die meisten kostenlosen Generatoren geben eine Liste von Plain-Text-Titeln zurück. Dieser gibt formatierte Ausgabe zurück, die bereit zum Einfügen in die fünf häufigsten Umgebungen ist: Raw HTML, Next.js-Metadaten, WordPress Yoast, Astro-Frontmatter und Plain Text für CMSe mit eigenem Title-Feld.

Wie du diesen Title-Tag-Generator verwendest

  1. Gib dein Main keyword ein. Verwende die exakte Phrase, auf die du abzielst. „Accounting software for freelancers" ist ein Keyword. „Accounting" ist zu breit.
  2. Lege Page topic / purpose fest. Schreib einen Satz darüber, worum es auf der Seite geht. Beispiel: „Comparison of accounting apps for freelancers under $50/month." Dies gibt dem Generator Kontext, um einen Titel zu schreiben, der zum Seiteninhalt passt.
  3. Optional: füge Brand name hinzu. Wenn deine Marke am Zielmarkt erkannt wird, füge sie ein. Wenn deine Marke neu ist, überspring es, um Zeichen für den Nutzenversprechen zu sparen.
  4. Wähle Brand placement. „No brand" lässt sie ganz weg. „Prepend" stellt die Marke voran: „BlazeHive: Accounting Software for Freelancers." „Append" stellt die Marke am Ende: „Accounting Software for Freelancers | BlazeHive."
  5. Klick auf Generate title tags. Du bekommst drei perfekte Optionen, jede mit SERP-Vorschau, Zeichenzahl und vier Copy-Buttons.

Probier das: Keyword „accounting software for freelancers", Page-Topic „comparison of 7 apps tested by freelance designers", Brand „BlazeHive", Brand-Placement „append". Ein Output könnte „7 Accounting Apps for Freelancers (Tested by Designers) | BlazeHive" (62 Zeichen, passt in SERP) lauten. Ein anderer könnte „Best Accounting Software for Freelancers in 2026 | BlazeHive" (59 Zeichen, passt in SERP) lauten. Jeder kommt mit Copy-Buttons für HTML, Next.js, Yoast und Plain Text.

Warum formatspezifische Ausgabe zählt

Der Wechsel zwischen einem Schreib-Tool und einem Code-Editor führt zu Reibung und Transkriptionsfehlern. Du generierst einen Titel, kopierst ihn, öffnest deine IDE oder dein CMS, tippst das öffnende Tag, fügst den Titel ein, tippst das schließende Tag. Dieser Workflow kostet 15 Sekunden pro Titel und führt zu Tippfehlern. Ein fehlendes schließendes Bracket bricht die Seite. Das Vergessen, Sonderzeichen wie Anführungszeichen oder Ampersands zu escapen, bricht Metadaten-Parser.

Eine 2022er-Umfrage von Netlify unter 500 Entwicklern ergab, dass Konfigurationsfehler und Tippfehler in Metadaten-Feldern 18 % der fehlgeschlagenen Builds in Static-Site-Generatoren ausmachten. Die meisten dieser Fehler waren mit Copy-Paste-Workflows, die die vollständige Syntax enthielten, vermeidbar.

Drei praktische Konsequenzen.

Geschwindigkeit. One-Click-Copy entfernt den Formatierungsschritt. Das zählt, wenn du zehn Seiten in einem Sprint veröffentlichst oder Titel während einer Site-Migration regenerierst.

Genauigkeit. Das Tool escapt Sonderzeichen und erzwingt korrekte Syntax. Wenn dein Titel ein Anführungszeichen oder Ampersand enthält, escapt die HTML-Ausgabe es als &quot; oder &amp;. Die Next.js-Ausgabe wickelt es in einen JavaScript-String. Du musst die Regeln nicht auswendig kennen.

Stack-spezifische Optimierungen. Next.js 13+ verwendet ein exportiertes metadata-Objekt. Astro verwendet YAML-Frontmatter. WordPress Yoast verwendet ein Plain-Text-Feld ohne Wrapper. Ein Tool, das den Ziel-Stack kennt, gibt dir das exakte Snippet, das funktioniert. Keine Übersetzungsschicht.

Formatspezifische Ausgabe ist keine Annehmlichkeit. Sie ist der Unterschied zwischen einem Tool, das Titel vorschlägt, und einem Tool, das sie ausliefert.

Brand-Placement-Strategie

Das Brand placement-Dropdown steuert, wo dein Unternehmensname im Title-Tag erscheint.

No brand. Der Titel enthält nur das Keyword und den Nutzenversprechen. Beispiel: „7 Accounting Apps for Freelancers (Tested in 2026)." Dies maximiert Platz für das Keyword und den Hook. Verwende dies, wenn deine Marke keine Erkennung auf dem Markt hat oder wenn jedes Zeichen zählt.

Prepend. Die Marke erscheint zuerst, gefolgt von einem Doppelpunkt oder Strich. Beispiel: „BlazeHive: Accounting Apps for Freelancers." Dieses Muster funktioniert für Brand-Search-Abfragen, wo Nutzer deinen Namen bereits kennen. Es schneidet bei Discovery-Keywords schlecht ab, wo Nutzer deinen Namen noch nie gehört haben.

Append. Die Marke erscheint am Ende, getrennt durch einen Strich oder Bindestrich. Beispiel: „Accounting Apps for Freelancers | BlazeHive." Dies ist das häufigste Muster. Es priorisiert das Keyword für Relevanz-Signalisierung, während die Marke für Nutzer sichtbar bleibt, die die SERP scannen und den Namen erkennen.

Brand-Placement ist kein Ranking-Faktor, beeinflusst aber die CTR. Wenn deine Marke starke Erkennung hat, kann das Anhängen die CTR um 10 bis 20 % laut A/B-Tests von Moz und Ahrefs zu Branded vs. Non-Branded-Titeln steigern. Wenn deine Marke unbekannt ist, kostet das Anhängen fünf bis fünfzehn Zeichen für null CTR-Gewinn.

Häufige Fehler

  • Die Marke hinzufügen, wenn sie nicht passt. Ein 55-Zeichen-Titel ohne Marke passt perfekt. Das Hinzufügen eines 12-Zeichen-Brandnamens bringt es auf 67 Zeichen und triggert Kürzung. Wenn die Marke den Titel zu lang macht, lass sie weg. Ranking und CTR sind wichtiger als Brand-Sichtbarkeit in einem gekürzten Titel.
  • Die HTML-Version in eine Next.js-Datei kopieren. Der HTML-Copy-Button gibt <title>...</title> aus. Das Einfügen in ein Next.js-Metadaten-Objekt bricht den Build. Verwende den Next.js-Copy-Button für Next.js-Projekte.
  • Sonderzeichen verwenden, ohne die Vorschau zu überprüfen. Ampersands, Anführungszeichen und Emojis rendern manchmal korrekt und manchmal nicht. Die SERP-Vorschau zeigt, was Google anzeigen wird. Wenn es falsch aussieht, regeneriere mit einfacherem Punctuation.
  • Den gleichen Titel über mehrere Seiten hinweg wiederverwenden. Jede Seite deiner Site braucht einen eindeutigen Title-Tag. Doppelte Titel verwirren Suchmaschinen und reduzieren die Chance, dass eine der Seiten rankt. Generiere einen neuen Titel für jede Seite, auch wenn das Keyword ähnlich ist.
  • Die SERP-Vorschau überspringen. Ein Titel, der im Plain Text gut liest, kann trotzdem in der SERP gekürzt werden. Überprüfe immer die Vorschau, bevor du kopierst.

Fortgeschrittene Tipps

  • Verwende den Plain-Text-Copy-Button für CMSe, die kein HTML-Wrapping erfordern. Shopify, Webflow und Squarespace alle haben Title-Felder, die Plain Text erwarten. Die anderen Copy-Buttons sind für Code-Level-Integrationen.
  • Regeneriere, wenn der erste Batch den richtigen Ton nicht trifft. Das Tool gibt drei Optionen pro Durchlauf zurück. Wenn keine passt, führe es erneut mit einem spezifischeren Page-Topic aus. Das Hinzufügen von Details zum Page-Topic-Feld produziert bessere Titel.
  • Kombiniere dieses Tool mit dem seo title generator für einen Zwei-Pass-Workflow. Verwende den SEO-Title-Generator, um zehn Optionen zu generieren und die beste auszuwählen. Dann füttere den Gewinner in dieses Tool, um die formatierte Ausgabe zum Einfügen zu bekommen.
  • Teste Brand- vs. No-Brand-Versionen auf ähnlichen Seiten. Wenn du unsicher bist, ob du deine Marke einbeziehen sollst, generiere beide, veröffentliche sie auf vergleichbaren Seiten und vergleiche die CTR in der Search Console nach zwei Wochen. Die Daten entscheiden.
  • Speichere die formatierte Ausgabe in einer Tabellenkalkulation, wenn du eine Site-Migration durchführst. Generiere Titel für jede Seite im Voraus, exportiere sie als CSV und batch-importiere sie in dein neues CMS. Das entfernt den Copy-Paste-Schritt pro Seite.

Sobald du den Title-Tag hast, ist der nächste Schritt die Meta-Beschreibung. Verwende den meta description generator, um fünf Beschreibungsoptionen mit SERP-Vorschau und CTA-Style-Toggle zu schreiben. Wenn der Titel eine Qualitätsprüfung vor der Veröffentlichung braucht, füttere ihn dem headline checker für eine Aufschlüsselung über Klarheit, Emotion, SEO-Gewicht und Power-Word-Dichte. Für einen vollständigen Content-Planning-Workflow produziert der content brief generator Titel, Meta-Beschreibung, Outline und Keyword-Ziele in einem Pass.

Generate the whole content, not just check it.

BlazeHive writes SEO articles end to end from a single keyword. Outline, draft, meta, schema, internal links. Free trial, no card.

Start with BlazeHive Free trial

Häufig gestellte Fragen

Was ist ein Title-Tag?

Ein Title-Tag ist das HTML-Element, das den Titel einer Webseite definiert: <title>Your page title</title>. Er befindet sich im <head>-Bereich, nicht im sichtbaren Body. Browser verwenden ihn als Tab-Label. Suchmaschinen verwenden ihn als anklickbare Link in Suchergebnissen (manchmal umgeschrieben). Soziale Plattformen nutzen ihn oft, wenn Open Graph Tags fehlen. Es ist eines der stärksten On-Page-Ranking-Signale und der größte Hebel auf die Click-Through-Rate aus der SERP. Studien zeigen, dass die Optimierung von Title-Tags den organischen Traffic um 20 bis 40 Prozent erhöhen kann, ohne irgendein anderes On-Page-Element zu ändern. Unser Generator gibt drei perfekte Title-Tags mit One-Click-Copy-Buttons formatiert für den Ort zurück, wo du sie wirklich einfügst: Raw HTML, Next.js-Metadaten-Objekt oder Yoast SEO's Title-Feld in WordPress. Fülle Main keyword, beschreibe die Seite in Page topic, füge optional Brand name mit Brand placement hinzu. Für mehr Varianten mit SERP-Vorschau verwende den SEO title generator.

Was ist ein Beispiel für einen guten Title-Tag?

Gute Title-Tags folgen einem konsistenten Muster: primäres Keyword zuerst, spezifisches Versprechen Sekunde, Marke am Ende, wenn Platz vorhanden. Drei echte Beispiele. Blog-Post: Content Marketing for SaaS: A 2026 Framework | BlazeHive. Produktseite: Project Management Software for Remote Teams | Notion. Vergleich: Notion vs. Obsidian: Which Note App Wins for Research?. Alle unter 60 Zeichen, jeder mit dem Keyword in den ersten 30, jeder beschreibend genau, was die Seite liefert. Schlechte Title-Tags teilen das entgegengesetzte Muster: Keyword vergraben, Marke vorangestellt (das Keyword über die Pixel-Grenze drückend), Clickbait, das nicht zur Seite passt, oder identischer Text über mehrere Seiten derselben Site. Doppelte Title-Tags verwirren Suchmaschinen und verdünnen Ranking-Power über Seiten. Unser Generator gibt drei perfekte Varianten zurück, die auf das Page topic und Brand placement, die du angibst, abgestimmt sind. Für eine Liste von zehn Such-optimierten Varianten mit pixelgenauer Google-Vorschau verwende den SEO title generator.

Wie erstelle ich einen Title-Tag?

Drei Schritte. Eins: Schreib den Titel. Setze das primäre Keyword in die ersten 30 Zeichen, beschreib, was die Seite liefert, halten die Gesamtlänge unter 60 Zeichen (580 Pixel). Zwei: Wickle ihn im <title>-Element im <head> deines HTML ein: <title>Your page title | Brand</title>. Drei: Füge ihn in dein CMS ein. WordPress-Nutzer mit Yoast oder Rank Math fügen ins SEO-Title-Feld ein (das Plugin schreibt das <title>-Tag für dich). Next.js-Entwickler fügen es zum metadata-Export oder generateMetadata-Funktion hinzu. Raw-HTML-Sites fügen direkt ins <head> ein. Unser Generator macht das alles für dich: Gib Main keyword und Page topic ein, wähle Brand placement, und bekomme drei perfekte Varianten mit Copy-as-HTML-, Copy-as-Yoast- und Copy-as-Next.js-metadata-Buttons. Teste jeden Titel im Google Rich Results Test, um zu bestätigen, dass er auf allen Geräten korrekt rendert. Für mehr Optionen oder SERP-Vorschau verwende den SEO title generator.

Was passiert, wenn eine Seite keinen Title-Tag hat?

Drei schlechte Dinge in Reihenfolge der Schwere. Eins: Google pickt einen Titel für dich, normalerweise aus dem H1 oder einem Fragment aus dem Body-Text gezogen. Der algorithmus-gepickte Titel liest sich selten so gut wie einer, den du geschrieben hast, und deine Click-Through-Rate fällt. Zwei: Browser-Tabs zeigen die URL anstelle eines lesbaren Labels, was Tab-Verwaltung schlechter macht für Nutzer und Return-Visit-Gewohnheiten weh tut. Drei: Soziale Shares fallen zurück auf was auch immer plattformspezifische Logik füllt die Lücke, oft die URL oder einen gekürzten Dateinamen anstelle eines richtigen Seitennamens zeigend. Title-Tags zu fehlen sind einer der häufigsten On-Page-SEO-Audit-Befunde. Seiten ohne Title-Tags ranken niedriger als identische Seiten mit optimierten Titeln. Unser Generator behebt das Problem in einem Klick: Fülle Main keyword und Page topic und bekomme Ready-to-Paste-Markup für jeden Stack. Um deine ganze Site für fehlende Titel zu auditieren, führe den website metadata checker und die SEO checklist auf jeder URL aus.

Was ist die ideale Title-Tag-Länge?

Ziele auf 50 bis 60 Zeichen. Google kürzt bei etwa 580 Pixeln, was die meisten Buchstabenkombinationen nahe Zeichen 60 treffen. Titel unter 50 lassen Ranking-Wert auf dem Tisch; du kannst mehr Keyword-Kontext und ein klareres Versprechen fit. Titel über 60 werden mitten in einem Satz gekürzt, was unvollständig aussieht und den hinteren Brand oder Modifikator verliert. Das Hard-Minimum ist länger als ein oder zwei Wörter: Einwort-Titel ranken selten. Das Hard-Maximum hängt von der Buchstabenbreite ab (Alles-Großbuchstaben trifft die Pixel-Grenze schneller als Kleinbuchstaben), so dass die Generierung auf Pixel-Breite die Generierung auf Zeichenzahl schlägt. Unser Generator kürzt Ausgabe nach Pixelmessung, nicht Zeichenzahl, und zeigt dir die exakte Breite für jede der drei Varianten. Für eine vollständige SERP-Vorschau mit zehn such-optimierten Varianten, koppel mit dem SEO title generator. Für das rohe HTML-Markup ist der Title-Tag-Generator das, was du willst.

Wie füge ich einen Title-Tag in WordPress ein?

Zwei Pfade. Wenn du Yoast SEO oder Rank Math verwendest (das tun die meisten WordPress-Sites), öffne den Post- oder Page-Editor, scrolle zum SEO-Plugin-Panel und füge deinen Titel ins Feld „SEO Title" oder „Title" ein. Das Plugin schreibt das aktuelle <title>-Markup für dich; codiere es nicht auch in Theme-Dateien. Wenn du kein SEO-Plugin verwendest, kommt der Standard-WordPress-Titel vom Post- oder Page-Titel, was selten optimiert ist. Installiere Yoast oder Rank Math; das dauert fünf Minuten und gibt dir Pro-Page-Kontrolle. Beide Plugins enthalten eine Echtzeit-SERP-Vorschau, die zeigt, wie dein Titel in Google angezeigt wird. Unser Generator hat einen One-Click-Button „Copy for Yoast", der den Titel genau so formatiert, wie das Plugin ihn erwartet. Fülle Main keyword, beschreibe die Seite in Page topic, wähle Brand placement, und füge die Ausgabe ein. Um existierende Titel über deine Site zu auditieren, wirf eine URL in den website metadata checker.

Wie füge ich einen Title-Tag in Next.js ein?

Next.js 13+ verwendet die App Router Metadata API. In deiner Page-Datei exportiere ein metadata-Objekt: export const metadata = { title: 'Your page title | Brand' }. Next.js injiziert das <title>-Tag automatisch in den Document Head. Für dynamische Routes verwende stattdessen generateMetadata: es läuft bei jeder Request und gibt ein Metadaten-Objekt zurück, das dir erlaubt, den Titel aus Params oder geholten Daten zu bauen. Ältere Pages-Router-Projekte verwenden die <Head>-Komponente von next/head mit einem <title>-Kind im Innern jeder Seite. Du kannst auch Template-Strings in der Metadata API verwenden, um ein Site-weites Suffix zu setzen, ohne es über jede Datei zu wiederholen. Unser Generator hat einen One-Click-Button „Copy for Next.js", der die Ausgabe als ein ready-to-paste Metadaten-Objekt formatiert. Fülle Main keyword und Page topic, wähle Brand placement, und füge direkt in deine Page- oder Layout-Datei ein. Für Such-Performance-Varianten mit pixelgenauer SERP-Vorschau generiere Alternativen mit dem SEO title generator.

Sollte jede Seite einen eindeutigen Title-Tag haben?

Ja. Doppelte Title-Tags über eine Site sind eine der häufigsten Ursachen von Ranking-Problemen, und Google flaggt sie in der Search Console unter „Duplicate, Google chose different canonical" und verwandten Warnungen. Duplikate machen es schwer für Suchmaschinen herauszufinden, welche Seite für welche Query ranken sollte, so dass sie oft das Ranking über Seiten hinweg spliten oder die ganze Menge unterdrücken. Jede Seite braucht einen Title-Tag, der diese Seite spezifisch beschreibt, mit eigenem primärem Keyword in den ersten 30 Zeichen. Templates helfen: Für E-Commerce, {Product Name} | {Category} | {Brand} skaliert sauber. Für Blogs, {Post Title} | {Brand} handhabt die meisten Fälle. Unser Generator produziert eindeutige Varianten, die auf das Page topic abgestimmt sind, das du eingibst, so dass jede Seite einen anderen Titel bekommt, auch auf der gleichen Site. Um deine ganze Site auf Duplikate zu scannen, führe einen Crawl durch und überprüfe jede URL durch den website metadata checker.

Title-Tag-Generator vs. SEO-Title-Generator: welchen sollte ich verwenden?

Verwende beide, für unterschiedliche Momente. Der SEO title generator ist für Such-Performance-Entscheidungen: er gibt zehn Varianten mit pixelgenauer Google-SERP-Vorschau, Zeichenzahlen, Keyword-Platzierungs-Indikatoren und Emotional-Tone-Labels zurück. Du pickst den Gewinner basierend darauf, wie er in der SERP performen wird. Der Title-Tag-Generator ist zum Ausliefern: er gibt drei perfekte Optionen mit Copy-as-HTML-, Copy-as-Yoast- und Copy-as-Next.js-metadata-Buttons zurück, so dass du ins CMS oder in Code einfügen kannst, ohne Reformatierung. Typischer Workflow: Führe zuerst den SEO-Title-Generator aus, um über Phrasing zu entscheiden, dann hand den gewinnenden Ausdruck (oder das Topic dahinter) zum Title-Tag-Generator, um das exakte Markup für deinen Stack zu bekommen. Das spiegelt echten Content-Workflow: Strategie zuerst, dann Umsetzung. Der Split lässt dich für Such optimieren, dann für deine Plattform packen. Für eine scored-per-dimension Überprüfung auf einem spezifischen Titel, bevor du committed, führe ihn durch den headline checker mit Platform gesetzt auf blog.

Ist der Title-Tag-Generator kostenlos?

Ja. Fülle Main keyword, beschreibe die Seite in Page topic, füge einen optionalen Brand name mit Brand placement hinzu, und bekomme drei perfekte Title-Tags mit Copy-as-HTML-, Copy-as-Yoast- und Copy-as-Next.js-metadata-Buttons. Keine Anmeldung, keine Quote, kein Feature-Paywall. Das Tool funktioniert in deinem Browser, behalten deine letzten zehn Durchläufe in localStorage zum Zurückspulen, und speichern deine Eingaben nicht server-seitig. Kopiere die Ausgabe in dein CMS, Theme-Datei oder Metadaten-Export in Sekunden. Die ganze Verarbeitung passiert Client-seitig, so dass deine Daten dein Gerät nie verlässt. LocalStorage-Caching bedeutet, dass du vergangene Titel ohne erneutes Eingeben von Keywords überprüfen kannst. Für mehr Varianten, eine zehn-Titel-Liste oder eine vollständige Google-SERP-Vorschau mit pixelgenauer Zeichenbreite, handhabt der SEO title generator die Generation-Seite des gleichen Workflows. Für per-dimension Scoring auf einem einzelnen Titel, den du bereits hast, bricht der headline checker Klarheit, Emotion, SEO, Länge und Power-Wörter über fünf Platform-Vorsets auf.

Verwandte kostenlose Tools

Alle Tools →