Scroll-up-Buttons: SEO-Nutzen von nofollow und Barrierefreiheit

Jeder kennt ihn, fast jeder nutzt ihn: den Scroll-up-Button. Er ist der stille Küchenhelfer, der unseren Gästen den mühsamen Rückweg vom Ende eines langen 7-Gänge-Menüs (eines ausführlichen Blogartikels) zurück zum Buffet (dem Header-Menü) erspart.

Doch während wir uns über die Usability freuen, stellt sich in der Profi-Küche eine ganz andere Frage: Sollten wir diesem kleinen Link ein „nofollow“-Schild umhängen, damit der Google-Inspektor nicht unnötig Zeit damit verschwendet, im Kreis zu fahren?

Definition: Was ist ein Scroll-up-Button und warum ist er wichtig?

Technisch gesehen ist dieser Button meist ein simpler Anker-Link (z. B. <a href="#top">). Er katapultiert die Ansicht sofort wieder an den „oberen Tellerrand“.

Warum ist er sinnvoll?

In der „Mobile First“-Küche ist er fast unverzichtbar. Auf dem Smartphone mutiert das Zurückscrollen bei langen Artikeln schnell zum Daumensport. Der Button ist eine Abkürzung, die den Gast zufriedenstellt, sobald er gesättigt ist.

Barrierefreiheit: Ein Platz am Tisch für alle

Ein guter Koch achtet darauf, dass jeder Gast Zugang zum Essen hat. Für die Barrierefreiheit ist der Button ein Segen, wenn er richtig umgesetzt wird:

• Tastatur-Nutzer: Wer per Tab-Taste navigiert, freut sich über den schnellen Rücksprung ohne endloses Tippen.
• Screenreader: Mit einer sauberen Beschriftung (z. B. aria-label="Nach oben scrollen") wissen auch blinde Gäste, wohin dieser Lift fährt.
• Fokus-Management: Nach dem Klick sollte der Fokus idealerweise wieder am Anfang der Seite landen, damit der Gast sofort weiter navigieren kann.

SEO-Analyse: Wann ist das nofollow-Attribut bei internen Ankern sinnvoll?

Ist die Auszeichnung rel="nofollow" bei einem so trivialen Element sinnvoll? Die Antwort lautet: Ja, aber die Dosis macht das Gift.

Warum du über die Auszeichnung nachdenken solltest:

1. Steuerung des Crawl-Budgets: Der Google-Bot hat nur begrenzt Zeit für deine Website. Ein Scroll-up-Link führt zu keinem neuen Inhalt. Mit nofollow signalisieren wir: „Hier gibt es nichts Neues zu entdecken, geh weiter zu den wirklich spannenden Gerichten.“
2. Vermeidung von Link-Verwässerung: Stell dir deine interne Linkkraft wie eine feine Reduktionssoße vor. Du möchtest nicht, dass wertvolle Tropfen dieser Soße auf einen rein funktionalen Link verschüttet werden, der lediglich im Kreis fährt.
3. An interne Links gehört kein nofollow-Attribut: Eingeführt wurde der Attributwert, um gegen Spamkommentare vorzugehen. Damit wurden also externe Links ausgezeichnet¹.

Der Realitätscheck: Ist das immer nötig?

Man muss ehrlich bleiben: Bei einer kleinen „Gartenküche“ mit wenigen Unterseiten ist der Effekt homöopathisch bis leicht negativ. Google ist heute schlau genug, funktionale Elemente oft von selbst zu erkennen. Wenn wir die Dosis nicht kennen, kann das gut gemeinte Gewürz das komplette Gericht verwässern. Bei großen News-Portalen mit extrem viel Bot-Traffic ist es jedoch eine strategische Notwendigkeit. Für uns ist es zudem eine Frage des handwerklichen Stolzes: Es zeigt, dass hier mit höchster Präzision gearbeitet wird.

Häufig hängt die Beantwortung der Frage von der Perspektive ab.

• Frontend-Sicht: „Ein Anker ist ein Ziel, also nehme ich <a>. Bots sind schlau genug.“
• SEO-Sicht: „Jedes <a>-Tag ist ein Signal. Warum ein Signal senden, wenn es keine Information trägt? Kill es oder maskiere es.“

Anleitung: nofollow Einstellung in GeneratePress treffen

GeneratePress hat dir die Entscheidung bereits abgenommen und verwendet das „nofollow“-Attribut. Mit diesem Filter überschreibst du die Standardausgabe²:

add_filter( 'generate_back_to_top_output', function() {
    return sprintf(
        '<a title="%1$s" aria-label="%1$s" rel="nofollow" href="#" class="generate-back-to-top" data-scroll-speed="%2$s" data-start-scroll="%3$s">
            <span class="gp-icon icon-arrow-up"></span>
        </a>',
        esc_attr__( 'Scroll back to top', 'generatepress' ),
        absint( apply_filters( 'generate_back_to_top_scroll_speed', 400 ) ),
        absint( apply_filters( 'generate_back_to_top_start_scroll', 300 ) )
    );
} );

Die technisch sauberste Lösung: Das <button>-Tag

Viel entscheidender für deine Strategie ist die Art der Implementierung:

1. Reiner Anker (#top): Hier ist nofollow unbedenklich, aber meist unnötig.
2. Button-Tag (<button>): Ein Button-Tag wird von Crawlern ohnehin nicht als Link gewertet, der Autorität vererbt. Das ist die technisch „sauberste“ Lösung für die Navigation, da sie semantisch korrekt ist und kein Crawling-Signal sendet.³

Wer es technisch absolut rein halten möchte, nutzt statt eines Links (<a>) direkt ein <button>-Tag. Da ein Button semantisch kein Link ist, vererbt er von Natur aus keine Autorität und wird von Crawlern ignoriert. Das ist die „Sterne-Lösung“, erfordert aber zusätzliche CSS-Anpassungen für das Styling. Und das, obwohl semantisch der HTML-Link durchaus korrekt ist.

Bei Websites mit sehr vielen URLs können diese Details größere Auswirkungen haben.

KI-Scraper und Google nutzen immer häufiger Headless Browser, die JavaScript ausführen und Layouts rendern, um Inhalte wie in einem echten Browser zu erfassen. Wenn ein Bot die Seite „rendert“, um beispielsweise die Bedienbarkeit zu prüfen oder CSS-basierte Inhalte zu extrahieren, ist ein <a>-Tag ein Element, das verarbeitet werden muss. Diese Signalklarheit kann bei einem <button>-Tag passender sein. KI-Crawler suchen nach Mustern wie Tabellen, Listen und strukturierten Daten. Je mehr rein funktionale <a>-Tags du im HTML hast, desto unsauberer ist das Verhältnis von führendem Code zu echtem Content (Code-to-Text Ratio).

Fazit: Lohnt sich die Optimierung?

Der Scroll-up-Button mit nofollow ist ein Nischendetail. Bei Websites mit weniger als 1000 URLs halte ich dies für falsch. Bei deutlich größeren Websites, kann eine genauere Steuerung sinnvoll sein. Für die Barrierefreiheit ist der Button Pflicht – für die SEO-Feinschmecker sollte ein Button-Tag verwendet werden. So stellt sich die „nofollow“ Frage gar nicht.