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 Meistenam 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 Ihnen verschiedene Wege wie Sie ein solches Sprungmarkenmenü leicht selbst erstellen können.

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 müssen Sie beim Setzen der IDs, Ankerstellen beachten: Die vergebenen IDs müssen eindeutig sein. Sie dürfen 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 Sie zwei Methoden entwickelt, die Sie dabei unterstützen Ihr Sprungmarkenmenü bequem und aus SEO-Sicht bedenkenlos zu erzeugen.

Sprungmarken mit Javascript erzeugen.

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

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

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

Fügen Sie dieses Javascript in den Footer Ihrer 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>

Rufen Sie Ihre Seite im Browser auf und freuen oder wundern Sie sich. Das Skript erzeugt aus allen H-Tags, die auf Ihrer Seite sind ein entsprechendes Sprungmarkenmenü und fügt auch in die H-Tags die notwendigen IDs (Anker) ein. Wenn Sie alles SEO-konform richtig gemacht haben, sollten nur Überschriften aus Ihrem Text in dem Menü auftauchen. Wenn Sie allerdings noch weitere Überschriften auf der Seite haben, 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 Sie noch eine zweite Methode entwickelt, mit der Sie ein Sprungmarkenmenu für ihre Seite erstellen können. Der einzige Nachteil ist: Sie müssen das Menü anschließend selbst in die Seite kopieren und Sie müssen noch die Ids zu den Überschriften hinzufügen. Die eindeutigen Vorteile dieser Methode sind: Sie ist initial vorhanden und Sie braucht keine weitere Rechenleistung des Browsers.

Fügen Sie in das Feld „URL“ die vollständige Adresse Ihrer Webseite ein. Wenn der Text, für den Sie Sprungmarken brauchen, in einem Div-Tag liegt, das eine ID hat oder eine sehr eindeutige Klasse, die idealerweise nur einmal im Quellcode vorkommt, dann können Sie das auch in dem Feld „Selektor“ eintragen. Wenn Sie eine ID „inhalt“ haben schreiben Sie #inhalt, wenn es eine Klasse ist, schreiben Sie .meineKlasse (also, Punkt davor ). Klicken Sie dann auf „Erstellen“ und kopieren Sie die Elemente in Ihre Seite.