Geschätzte Lesezeit anzeigen mit Yoast SEO

Wie schnell lesen Sie? Geschätzte Lesezeit anzeigen mit Yoast SEO
Auch ohne Stoppuhr möglich: Die geschätzte Lesezeit pro Blogbeitrag ermitteln und anzeigen

Viele Blogs zeigen sie an: die Zeit, die es durchschnittlich dauert, einen Beitrag zu lesen. Nun habe auch ich dafür gesorgt, dass meine Blogbeiträge die geschätzte Lesezeit anzeigen. Dafür nutze ich den Umstand, dass das Plugin Yoast SEO seit einiger Zeit eben diesen Wert ermittelt und im head-Bereich ausgibt. Also bleibt eigentlich nur noch die Frage, wie sich diese Angabe für einzelne Beiträge nutzen lässt.

Hilfreich oder abschreckend: die geschätzte Lesezeit pro Beitrag anzeigen

Ich bin noch nicht sicher, ob es nun tatsächlich hilfreich ist, wenn am Anfang des Beitrags steht, wie viel Lebenszeit er in Anspruch nimmt. Dies gilt vor allem, wenn wir von solch umfangreichen Beiträgen sprechen wie meinem jüngst veröffentlichten zum Thema Full Site Editing. 18 Minuten lautet da nun die Prognose. Holla, die Waldfee! Auf der anderen Seite wissen geneigte Leser/innen zumindest, dass es nicht in zwei Minuten erledigt ist. Dazu ist das Thema aber auch einfach zu komplex.

Durchschnittlich beläuft sich die geschätzte Lesezeit bei meinen Beiträgen eher auf vier bis sechs Minuten. Aber auch das ist gut zu wissen, oder?

Wie schnell lesen Sie?

Wenn wir hier von der geschätzten Lesezeit sprechen, dann meint das tatsächlich auch nur einen Durchschnittswert. Denn der hängt nicht nur von der Menge der Wörter ab, die gelesen sein wollen. Auch hat der Wert natürlich damit zu tun, in welchem Tempo Sie lesen.

Ich bin zum Beispiel eine ausgesprochen langsame Genussleserin. Geht es um komplexe Zusammenhänge, die ich mir erst einmal erschließen muss, werde ich zur echten Leseschnecke. Aber auch bei weniger anspruchsvollen Texten kann es passieren, dass ich bei einem Satz verharre und mir dessen Schönheit noch ein wenig auf der Zunge zergehen lasse.

Ich muss also gar nicht so einen Test machen wie von Ritter Speed Reading angeboten, um zu wissen, dass ich eine lahme Leserin bin. Aber wenn Sie mögen, können Sie sich dort ja mal ausprobieren. So oder so: Wenn Sie einen Wert von 200 bis 250 Wörtern pro Minute erreichen, sollte die hier pro Beitrag genannte geschätzte Lesezeit für Sie passen.

Yoast SEO und die geschätzte Lesezeit

die geschätzte Lesezeit als meta-Angabe im head
Geschätzte Lesezeit als Meta-Angabe

Nun war mir kürzlich aufgefallen, dass im head als meta-Angabe eben genau diese estimated reading time erscheint. Schnell war klar, dass dahinter nur Yoast SEO stehen kann.

In der Tat gibt es diese neue Funktion schon eine Weile. Genauer gesagt seit Januar 2021. Ob es damals allerdings auch schon in der freien Version des Plugins zur Verfügung stand, weiß ich gar nicht. Schlicht und ergreifend war sie mir bislang gar nicht aufgefallen. Ich schaue mir halt auch nicht ständig den Seitenquelltext meiner Website an. Und hinter der Funktion mit dem Titel »verbessertes Slack-Sharing« hätte ich keine Anzeige der geschätzten Lesezeit vermutet.

Der wesentliche Punkt ist jedenfalls, dass es nur in der Bezahl-Version für das Anzeigen der geschätzten Lesezeit einen Block gibt: den estimated reading time Block. Inklusive Optionen für die angepasste Ausgabe.

Das ist auf jeden Fall mal ziemlich cool, dachte ich. Allerdings dachte ich mir auch, dass es eine Möglichkeit geben muss, diese meta-Angabe vom head in den body zu bringen. Ungefähr so, wie ich es schon mal gezeigt hatte für die Meta-Description, die als Auszug dienen kann.

Und wie sollte es anders sein: Ein bisschen Googeln hilft doch fast immer. Und so habe ich den passenden Code im einem Forum gefunden:

<?php echo (string) YoastSEO()->meta->for_current_page()->estimated_reading_time_minutes, " minutes"; ?>

Die geschätzte Lesezeit für jeden Beitrag anzeigen

Nun gibt dieses Code-Schnipsel nicht viel mehr (aber auch nicht viel weniger!) aus als die Angabe der durchschnittlichen Lesezeit an sich. Mit anderen Worten: Ohne weitere Erklärung, was es bedeuten soll, steht dann da plötzlich 1 minutes. Oder auch 8 minutes. Also braucht es ein wenig erläuternden Code-Schnipsel drumherum.

<?php
echo '<div class="estimated-time">';
echo 'geschätzte Lesezeit: ';		
echo (string) YoastSEO()->meta->for_current_page()->estimated_reading_time_minutes, " Minute(n)"; 
echo '</div>';
?>	

Nun stellt sich nur noch die Frage, wohin mit diesem Code. Und das kommt – wie eigentlich immer im Leben – auf das aktive Theme an.

Wichtig: Für alle folgenden Angaben braucht es – wie immer, wenn es um Änderungen der Templates geht – ein Childtheme. Sonst ist Ihre Modifikation nach dem nächsten Theme-Update verschwunden.

Geschätzte Lesezeit anzeigen mit Twenty Nineteen

Im Theme Twenty Nineteen ist der Template-Part entry-header.php Ihr Ansprechpartner. Sie finden diese Datei im Verzeichnis /template-parts/header/. Die Ausgabe erfolgt hier sowohl für Beiträge, die das Beitragsbild als großes Headerbild benutzen, als auch für solche, die kein Beitragsbild haben. Und es funktioniert auch, wenn Sie so wie ich den Beitragsheader umgestaltet haben.

Der Code fügen Sie nach dem Aufruf der Kommentar-Anzahl und dem folgend schließenden span-tag ein.

<?php twentynineteen_comment_count(); ?>
</span>

<?php
echo '<div class="estimated-time">';
echo 'geschätzte Lesezeit: ';		
echo (string) YoastSEO()->meta->for_current_page()->estimated_reading_time_minutes, " Minute(n)"; 
echo '</div>';
?>

Bei Twenty Nineteen sind dann noch nicht einmal CSS-Anpassungen nötig. Das Theme gibt die Zeitangabe fürs Lesen in der Gestalt der anderen Meta-Angaben aus.

Geschätzte Lesezeit anzeigen mit Twenty Twenty

Bei Twenty Twenty gestaltet es sich etwas hakeliger, für die Ausgabe der geschätzten Lesezeit den passenden Platz zu finden. Am besten veröffentlichen Sie ihn in der Datei template-tags.php. Diese befindet sich im Verzeichnis /inc. Dort können Sie die vorhandene Funktion für die Ausgabe der Post Meta Angaben ergänzen. In diesem Fall benötigen Sie übrigens nicht das öffnende und schließende php-tag.

function twentytwenty_the_post_meta( $post_id = null, $location = 'single-top' ) {

	echo twentytwenty_get_post_meta( $post_id, $location ); // phpcs:ignore WordPress.Security.EscapeOutput.OutputNotEscaped -- Escaped in twentytwenty_get_post_meta().

	echo '<div class="estimated-time">';
	echo 'geschätzte Lesezeit: ';		
	echo (string) YoastSEO()->meta->for_current_page()->estimated_reading_time_minutes, " Minute(n)"; 
	echo '</div>';
}

Damit ist dafür gesorgt, dass Twenty Twenty die geschätzte Lesezeit in allen drei Beitrags-Templates (Standard, Coverbild und weite Breite) anzeigen kann. Sie erscheint nun immer zentriert unterhalb der anderen Post Meta Angaben (Autor, Datum, …).

Allerdings erscheint die Zeitangabe so auch auf Seiten und Archivseiten (Kategorie, Schlagwörter etc.). Entweder bräuchte es also hier ein dezidiertes Vorgehen – oder man löst das Problem mit CSS.

CSS für Twenty Twenty

Bei der Formatierung für die geschätzte Lesezeit orientiere ich mich an den CSS Angaben für die Post Meta Angaben:

.estimated-time {
color: #6d6d6d; 
letter-spacing: -0.016875em;
margin: 1.4rem 0 0 3rem;
max-width: calc(100% - 3rem);
font-size: 1.6rem;
}

.page .estimated-time, .archive .estimated-time {display:none;}

Geschätzte Lesezeit anzeigen mit Twenty Twenty-One

Im Theme Twenty Twenty-One ist die Ausgabe der geschätzten Lesezeit wiederum recht einfach. Sie bearbeiten hierfür die content-single.php. Diese finden Sie im Verzeichnis /template-parts/content/.

In diesem Template-Part ergänzen Sie den header-Bereich um die entsprechende Angabe:

<header class="entry-header alignwide">
		<?php the_title( '<h1 class="entry-title">', '</h1>' ); ?>
		<?php 		
		echo '<div class="estimated-time">';
		echo 'geschätzte Lesezeit: ';		
		echo (string) YoastSEO()->meta->for_current_page()->estimated_reading_time_minutes, " Minute(n)"; 
		echo '</div>';
		?>
		<?php twenty_twenty_one_post_thumbnail(); ?>
	</header><!-- .entry-header -->

CSS-Anpassungen sind meines Erachtens für Twenty Twenty-One gar nicht nötig. Allein könnte man hingehen und Formatierungen der Meta-Angaben verwenden. Dies betrifft aber eigentlich nur die Schriftgröße (1rem).

.estimated-time {font-size: var(--global--font-size-xs);}

Beitragsbild: Britta Kretschmer

Schreibe einen Kommentar

Deine E-Mail-Adresse wird nicht veröffentlicht. Erforderliche Felder sind mit * markiert.

Nach oben scrollen