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>

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 } ?>

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.

Das könnte auch interessant sein

5 Kommentare zu »Sinnvolles Markup für den Website-Titel in einem WordPress-Theme«

  1. Peter

    Und alles wieder nur um Tante Google gerecht zu werden.
    Wann bitte widersetzt ihr Euch endlich dieser Datenkrake welche sich heraus nimmt zu bestimmen was im Internet gültig ist.

    Das Internet ist frei und darf nicht reglementiert werden.

    1. Florian

      Sorry, aber das ist Unsinn. Es geht hier um eine sinnvolle Auszeichnung eines Dokuments (beziehungsweise des Titels), und nicht darum, „Tante Google gerecht zu werden“. Du kannst ja deine Website gerne so auszeichnen, wie du magst, auch komplett ohne Heading-Elemente, nur um dich Google zu widersetzen – da ist das Internet ja frei. Ob das deinen Nutzern hilft, würde ich eher bezweifeln (vor allem den Nutzern, die beispielsweise auf einen Screenreader und damit eine sinnvolle Überschriftenstruktur angewiesen sind).

      1. Peter

        Natürlich mache auch ich Überschriften. So wie es mir am besten gefällt und am sinnvollsten ist. Weil es eben ansprechend sein soll.
        Wer gibt denn dieses heraus:

        Halbwegs bekannt dürfte sein, dass eine Webseite am besten nur eine h1-Überschrift einsetzt.

        Kommt doch nur von Google. Weil Google es so will. Google läßt nen Furz und alle knallen Beifall.
        Sieht man doch gerade wieder an dem lästigen Cookies bestätigen. Jeder macht mit.

        Übrigens wollte ich nicht deinen Artikel angreifen. Ich versuche nur die Augen zu öffnen damit man sich auf das Wesentliche konzentriert.

        1. Chris

          Ein Buch hat bekanntlich auch nur einen Haupttitel. Alles andere sind untergeordnete Titel. Genauso verhält es sich mit Webseiten. Und das war schon vor Google so.

Schreib einen Kommentar

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