Sinnvolles Markup für den Website-Titel in einem WordPress-Theme

Halbwegs bekannt dürfte sein, dass eine Webseite am besten nur eine h1-Überschrift einsetzt. Das sollte der Titel der jeweiligen Unterseite sein – im Fall einer WordPress-Installation ist das nur auf der Startseite, die die letzten Blog-Beiträge anzeigt, der Titel der Website. Wie ihr den Site-Titel im Header (oder wo auch immer er steht) sinnvoll auszeichnen könnt, zeigt dieser Artikel.

Ich habe mir selbst ehrlich gesagt bis vor relativ kurzer Zeit nicht besonders viele Gedanken darüber gemacht, wie das Überschriften-Markup einer Seite im Detail am besten aussehen sollte, sondern häufig einfach den Titel oder das Logo der Website in ein h1-Element gepackt. Ich weiß nicht mehr, bei welcher Suche ich auf den Artikel „HTML5 Headings in WordPress: A11y versus SEO?“ von Rian Rietveld gestoßen bin, aber das war so ein kleiner Augenöffner (sehr empfehlenswert für die gesamte Headline-Struktur einer Website!). Von da an musste ich ein kleines bisschen umdenken, vor allem beim Titel der Website. Folgende Kriterien sollen da erfüllt werden:

• Titel/Logo nur auf Startseite als h1, wenn diese die letzten Beiträge zeigt – sonst ist immer der Seiten-/Archiv-/Beitragstitel die h1.
• Titel/Logo auf Startseite nicht verlinken, auf paginierter Startseite aber sehr wohl (also auf zweiter, dritter, … Beitragsübersicht-Seite).

Von WordPress werden uns alle Funktionen geliefert, um diese Punkte relativ problemlos abzuarbeiten. Ich werde das kurz am Beispiel des Themes zeigen, das hier auf der Website zum Einsatz kommt. Um den Titel oder das Logo nur auf der Startseite, die die letzten Beiträge anzeigt, als h1 anzuzeigen, prüfen wir auf is_front_page() und is_home(). Mit is_front_page() testen wir, ob gerade die Startseite angezeigt wird, und mit is_home(), ob wir uns auf der Beitragsübersicht befinden. Zusätzlich nutzen wir die Funktion is_paged() um herauszufinden, ob wir uns gerade nicht auf der ersten Seite der Beitragsübersicht befinden, um in diesem Fall den Titel doch zu verlinken. Dieser Teil des Codes sieht so aus:

// Befinden wir uns auf der Startseite, die die letzten Beiträge anzeigt?
<?php if ( is_front_page() && is_home() ) { ?>
    <h1 class="site-title">
        // Sind wir nicht auf der ersten Seite der Beitrags-Übersicht?
        <?php if ( is_paged() ) { ?>
            <a href="<?php echo esc_url( home_url( '/' ) ); ?>" rel="home">
        <?php } ?>
        Florian <span>Brinkmann</span>
        <?php if ( is_paged() ) { ?>
            </a>
        <?php } ?>
    </h1>
Code-Sprache: PHP (php)

Wenn wir uns hingegen nicht auf der Startseite befinden, die die letzten Beiträge anzeigt, soll der Titel als Absatz ausgezeichnet sein. Falls wir uns nicht auf einer statischen Seite als Startseite befinden, soll der Titel verlinkt sein – darauf können wir mit ! is_front_page() prüfen. Der Code dafür sieht so aus:

// Wir sind nicht auf der Startseite, die gleichzeitig Blog-Übersicht ist
<?php } else { ?>
    <p class="site-title">
        // Befinden wir uns nicht auf der Startseite, Titel verlinken!
        <?php if ( ! is_front_page() ) { ?>
            <a href="<?php echo esc_url( home_url( '/' ) ); ?>" rel="home">
        <?php } ?>
        Florian <span>Brinkmann</span>
        <?php if ( ! is_front_page() ) { ?>
            </a>
        <?php } ?>
    </p>
<?php } ?>
Code-Sprache: PHP (php)

Damit wäre für den Website-Titel eine sinnvolle Auszeichnung umgesetzt. Nun müsst ihr natürlich noch für die Beitrags-/Seiten-/Archiv-Ansichten den Titel der entsprechenden Ansicht als h1 ausgeben. An dieser Stelle sei noch einmal auf den Beitrag von Rian verwiesen.