Mit Sprungmarken direkt zum Thema

Gerade bei langen Texten ist es ein prima Service, wenn man dem User ein Inhaltsverzeichnis anbietet, mit dem er auch noch direkt zu der Stelle springen kann, die ihn am meisten interessiert. Aber nicht nur für User ist dieser Service von Vorteil. Suchmaschinen nutzen diese Querverweise, um den Inhalt der Webseite noch besser zu verstehen. In diesem Workshop zeigen wir Dir verschiedene Wege, wie Du ein solches Sprungmarkenmenü leicht selbst erstellen kannst.

Sprungmarken – wie funktioniert das technisch

In HTML haben wir schon immer die Möglichkeit innerhalb eines Dokuments Links zu setzen und diese anzusteuern. Im Grunde ist das sogar eine der ältesten Methoden interner Verlinkung. Dabei wird die Möglichkeit genutzt, dass man quasi jedem Element in einem HTML-Dokument eine ID geben kann. Diese ID wird auch als Selektor bezeichnet:

<h3 id="header" class="meineklasse"> Hier ist der Inhalt </h3>

In der Fachsprache werden diese Links „Ankerlinks“ genannt. Im Header wird die Ankerstelle ausgewählt (Selektor) und mit dem Link navigiert man zu dieser Ankerstelle. Wir sprechen diesen Selektor, auch in den Zusatz-Formaten CSS und JS, mit einem „#“ (Raute, Doppelkreuz) an. Somit können wir zu dem H3-Tag oben diesen Link setzen:

<a href="#header">Zum Header</a>

Eine einfache Regel musst Du beim Setzen der IDs, Ankerstellen beachten: Die vergebenen IDs müssen eindeutig sein. Du darfst dieselbe ID nicht zweimal verwenden.

Sprungmarken automatisch erzeugen

Es kann ganz schön aufwendig sein, wenn man so ein Sprungmarkenmenü komplett von Hand aufbauen muss. Die Überschriften müssen zu einem Menü zusammengefasst werden und die passenden IDs müssen in den Überschriften gesetzt werden. Es wäre doch schön, wenn uns Tools unter die Arme greifen und die Arbeit für uns erledigen.

Für die meisten CMS gibt es Plugins, die das können. Bei manchen CMS (TYPO3) gehört eine solche Funktion zu den Bordmitteln. Aber nicht jeder hat Zugriff auf Plugins und manche Plugins sind so überdimensioniert, dass sie aus SEO-Sicht nicht mehr zu empfehlen sind. Wir haben für Dich zwei Methoden entwickelt, die Dich dabei unterstützen Dein Sprungmarkenmenü bequem und aus SEO-Sicht bedenkenlos zu erzeugen.

Sprungmarken mit JavaScript erzeugen.

Dieses Skript erledigt die Arbeit fast komplett von selbst. Du musst lediglich das Skript ans Ende der Seite, also im Footer oder vor dem schließenden Body-Tag einbauen. Zusätzlich erstellst Du ein leeres DIV-Tag an der Stelle, an der Du das Menü ausgeben willst. Also wahrscheinlich über dem Text:

Füge dieses DIV-Tag an der Stelle ein, an der das Sprungmarkenmenü erscheinen soll:

<div id="anchormenu"></div>

Füge dieses JavaScript in den Footer Deiner Seite ein:

<script type="text/javascript">
    $anchormenu ="<ul>";
    document.querySelectorAll(' h1,  h2,  h3,  h4').forEach($heading => {
        //create id from heading text
        var id =
          $heading.getAttribute('id') ||
          $heading.innerText
            .toLowerCase()
            .replace(/[`~!@#$%^&*()_|+\-=?;:'",.<>\{\}\[\]\\\/]/gi, '')
            .replace(/ +/g, '-')
      
        //add the id to the heading
        $heading.setAttribute('id', id)
      
        //append parent class to heading
        $heading.classList.add('anchor-heading')
      
        //create an anchor
        $anchor = document.createElement('a')
        $anchor.className = 'anchor-link'
        $anchor.href = '#' + id
        $anchor.innerText = $heading.innerText

        $anchormenu += '<li><a href="'
        $anchormenu += $anchor
        $anchormenu += '">'
        $anchormenu += $heading.innerText
        $anchormenu += '</a></li>'
        
      })
        $anchormenu +="</ul>";
        document.getElementById('anchormenu').innerHTML = $anchormenu
</script>

Ruf Deine Seite im Browser auf und freu Dich oder wundere Dich. Das Skript erzeugt aus allen H-Tags, die auf Deiner Seite sind, ein entsprechendes Sprungmarkenmenü und fügt auch in die H-Tags die notwendigen IDs (Anker) ein. Wenn Du alles SEO-konform richtig gemacht hast, sollten nur Überschriften aus Deinem Text in dem Menü auftauchen. Wenn Du allerdings noch weitere Überschriften auf der Seite hast, werden diese auch in dem Menü angezeigt und verlinkt.

Mit etwas mehr Programmierungsaufwand kann man dieses Skript auch noch an die individuellen Anforderungen anpassen, aber es hat noch ein paar weitere Schwachpunkte:

1. Das Skript muss vom Browser ausgeführt werden und dürfte daher die Core Web Vitals Werte beeinflussen. So schlank wie es ist, dürfte das nicht viel sein, aber trotzdem.
2. Das Menü ist erst nach dem Laden verfügbar. Es steht nicht initial zur Verfügung.
3. Wie oben schon angemerkt, nimmt das Skript eben alle Überschriften auf, die auf der Seite vorhanden sind.

Statisches Sprungmarkenmenü mit PHP erzeugen

Wir haben für Dich noch eine zweite Methode entwickelt, mit der Du ein Sprungmarkenmenü für Deine Seite erstellen kannst. Der einzige Nachteil ist: Du musst das Menü anschließend selbst in die Seite kopieren und Du musst noch die IDs zu den Überschriften hinzufügen. Die eindeutigen Vorteile dieser Methode sind: Sie ist initial vorhanden und braucht keine weitere Rechenleistung des Browsers.

Füge in das Feld „URL“ die vollständige Adresse Deiner Webseite ein. Wenn der Text, für den Du Sprungmarken brauchst, in einem Div-Tag liegt, das eine ID hat oder eine sehr eindeutige Klasse, die idealerweise nur einmal im Quellcode vorkommt, dann kannst Du das auch in dem Feld „Selektor“ eintragen. Wenn Du eine ID „inhalt“ hast schreibst Du #inhalt, wenn es eine Klasse ist, schreibst Du .meineKlasse (also, Punkt davor ). Klicke dann auf „Erstellen“ und kopiere die Elemente in Deine Seite.