Webseiten-Titel ändern oder animieren mit JavaScript (mehr Aufmerksamkeit bei Tabs!)

Der Webseiten-Titel wurde früher in der Titelleiste des Browsers angezeigt: Mittlerweile sieht man den Text oft nur noch bei mehreren geöffneten Tabs. Für Besucher, die mehr als einen Browser-Tab geöffnet haben, kann man diesen Bereich aber leicht als zusätzliches, sinnvolles Textfeld nutzen: Hier kann man auf neue Nachrichten oder auch auf neue Angebote hinweisen. Booking.com nutzt die Titelzeile zum Beispiel, um an eine nicht abgeschlossene Buchung zu erinnern.

Da die Titelzeile Teil des angezeigten Dokuments ist, lässt sie sich auch nach Belieben mit JavaScript beeinflussen – und das auch, nachdem die Seite selbst schon geladen ist. Wichtig: Je nach Browser werden dabei Sonderzeichen nicht immer unterstützt, auch deren HTML-Äquivalente wie zum Beispiel • werden in der Regel nicht unterstützt.

Mit diesem kurzen Skript ändert man den Titel von Webseite oder Tab nachträglich:

<script>
document.title = "* Computerhilfen.de";
</script>

Durch ein mehrfaches Ändern der Titelzeile lässt sich so auch eine Animation erzeugen. Das sorgt zwar für garantierte Aufmerksamkeit, sollte aber mit Bedacht eingesetzt werden – sonst wird der Tab schnell geschlossen. Für die Animation eignet sich die JavaScript Funktion “setInterval”: Hiermit lassen sich wiederkehrende Ationen mit einem wählbaren Zeitintervall in Millisekunden automatisieren. Je nachdem, ob die aktuelle Titelzeile in dem folgenden Beispiel einen Asterisk (“*”) enthält oder nicht, wird dieser ergänzt oder aus dem Titel gelöscht.

<script>
setInterval(function () {
	if(document.title.includes("*")) { document.title = "  Computerhilfen.de"; }
	else { document.title = "* Computerhilfen.de"; }
}, 1000);
</script>

Der eigentliche Titel des Dokuments wird mit diesem Skript nicht geändert: Der neue Titel wird erst bei Ausführen des Skriptes bei bestimmten Events direkt im Client, also im Browser des Besuchers, aktualisiert. Für Suchmaschinen, ob intern oder extern, die kein JavaScript unterstützen, bleibt der Titel wie ursprünglich im Dokument angegeben bestehen.