Berechnung der geschätzten Lesezeit für Blogartikel: Ein Tutorial
Artikel vorlesen lassen
Wenn du deinen Lesern eine zusätzliche Orientierung bieten möchtest und ihnen zeigen willst, wie viel Zeit sie in etwa für das Lesen deines Beitrags einplanen sollten, ist die Angabe einer geschätzten Lesezeit ein praktisches Feature. In diesem Blogartikel zeige ich dir, wie du mit einem simplen Stück JavaScript diesen Mehrwert auf deiner Website schaffen kannst, unabhängig davon, welches Content Management System oder welche Technologie du verwendest.
Was der JavaScript-Code macht
Der vorliegende Code berechnet die geschätzte Lesezeit basierend auf der Anzahl der Wörter in einem Text. Wir nehmen an, dass ein durchschnittlicher Leser etwa 200 Wörter pro Minute liest. Diesen Wert kannst du an die Lesegewohnheiten deiner Zielgruppe anpassen, sollte dies notwendig sein.
Im Wesentlichen besteht der Code aus zwei Teilen:
- Die Berechnungsfunktion (calculateReadingTime): Diese Funktion nimmt einen Textstring entgegen, zählt die Wörter und teilt diese Anzahl durch die durchschnittliche Lesegeschwindigkeit. Das Ergebnis wird auf die nächste ganze Zahl aufgerundet, um die Minuten der Lesezeit zu erhalten.
- Die Aktualisierungsfunktion (updateReadingTime): Hier wird der tatsächliche Text aus einem Element mit der Klasse .news-text-wrap geholt. Nach der Berechnung der Lesezeit wird diese in einem Element mit der Klasse .estimated-reading-time_inner angezeigt.
Integration des Codes
Um dieses Feature zu verwenden, musst du diese Schritte befolgen:
1. JavaScript-Code einbinden
Füge den bereitgestellten JavaScript-Code in eine JavaScript-Datei ein oder integriere ihn direkt in ein <script>-Tag innerhalb deines HTML-Dokuments:
<script>
// Hier kommt das JavaScript zum Berechnen und Anzeigen der Lesezeit
</script>2. HTML-Elemente vorbereiten
Dein Artikel-HTML sollte mindestens zwei Elemente enthalten: Eines für den Textinhalt und eines, in dem die Lesezeit dargestellt wird. Zum Beispiel:
<div class="estimated-reading-time">
Geschätzte Lesezeit: <span class="estimated-reading-time_inner"></span> Minuten
</div>
<div class="news-text-wrap">
<!-- Hier kommt der Artikeltext -->
</div>3. JavaScript-Code aufrufen
Stelle sicher, dass die Funktion updateReadingTime aufgerufen wird, sobald der Textinhalt geladen wurde. Wenn du den Code direkt in das HTML-Dokument einfügst, wird dies automatisch am Ende des Scripts durchgeführt.
Anpassungen vornehmen
- Angepasste Lesegeschwindigkeit: Falls du weißt, dass deine Leser schneller oder langsamer lesen, kannst du den Wert wordsPerMinute entsprechend abändern.
- Responsive Anzeige: Stelle sicher, dass die Darstellung der Lesezeit auch auf mobilen Geräten gut aussieht und funktioniert.
Schlussfolgerung
Die Angabe einer geschätzten Lesezeit auf deiner Seite ist eine einfache, aber wirkungsvolle Methode, um Lesern einen zusätzlichen Service zu bieten und gleichzeitig Professionalität auszustrahlen. Dieser kleine JavaScript-Schnipsel kann überall eingesetzt werden, unabhängig von der verwendeten Plattform.
Der JavaScript-Code
document.addEventListener('DOMContentLoaded', function() {
// Estimated reading time for blog articles
// Calculates the estimated reading time based on the number of words
function calculateReadingTime(text) {
const wordsPerMinute = 200; // Average reading speed
const words = text.trim().split(/\s+/).length; // Count the words
const readingTime = Math.ceil(words / wordsPerMinute);
return readingTime;
}
// Updates the display of the estimated reading time
function updateReadingTime() {
const newsTextWrap = document.querySelector('.news-text-wrap');
// Checks if the element exists
if (newsTextWrap) {
const textContent = newsTextWrap.innerText;
const readingTime = calculateReadingTime(textContent);
const readingTimeDisplay = document.querySelector('.estimated-reading-time_inner');
// Only updates if the target element exists
if (readingTimeDisplay) {
readingTimeDisplay.innerText = `${readingTime}`;
}
}
}
updateReadingTime();
});
Wer schreibt hier?
Hi, ich bin Wolfgang.
Seit 2006 tauche ich tief in die faszinierende Welt von TYPO3 ein – es ist nicht nur mein Beruf, sondern auch meine Leidenschaft. Mein Weg führte mich durch unzählige Projekte, und ich habe Hunderte von professionellen Videoanleitungen erstellt, die sich auf TYPO3 und seine Erweiterungen konzentrieren. Ich liebe es, komplexe Themen zu entwirren und in leicht verständliche Konzepte zu verwandeln, was sich auch in meinen Schulungen und Seminaren widerspiegelt.
Als aktives Mitglied im TYPO3 Education Committee setze ich mich dafür ein, dass die Prüfungsfragen für den TYPO3 CMS Certified Integrator stets aktuell und herausfordernd bleiben. Seit Januar 2024 bin ich stolz darauf, offizieller TYPO3 Consultant Partner zu sein!
Meine Leidenschaft endet aber nicht am Bildschirm. Wenn ich nicht gerade in die Tiefen von TYPO3 eintauche, findest du mich oft auf meinem Rad, während ich die malerischen Wege am Bodensee erkunde. Diese Ausflüge ins Freie sind mein perfekter Ausgleich – sie halten meinen Geist frisch und liefern mir immer wieder neue Ideen.
Der TYPO3 Newsletter
TYPO3-Insights direkt in dein Postfach!
Hol dir monatliche Updates, praktische Tipps und spannende Fallstudien.
Übersichtlich, zeitsparend, ohne Spam.
Bist du dabei? Jetzt für den Newsletter anmelden!