Was ist Above the Fold?
Above the Fold – dieser Begriff findet sich heute hauptsächlich in den Bereichen Online Marketing, Webdesign und spielt ebenfalls bei der Suchmaschinenoptimierung eine Rolle.
Unter Above the Fold ist der Bereich einer Webseite zu verstehen, der ohne scrollen sichtbar ist.
Der Teil einer Webseite, den man scrollen muss, um ihn sichtbar zu machen, bezeichnet man als „Below the fold“.
Bei einer Desktop Monitor Auflösung von 1024×600 ist der folgende Image Bereich „Above the Fold“:
Bei einem iPhone 8 sieht der Bereich „Above the Fold“ 357×667 wie folgt aus:
Durch die Nutzung von Tablets und Smartphones hat sich das Nutzerverhalten im WWW verändert. Webseiten-Besucher scrollen mehr und sie haben gelernt, durch Wischen die Bildschirmansicht zu wechseln.
Webseite in unterschiedlichen Auflösungen ansehen
Im Internet gibt es verschiedene Anbieter, die es ermöglichen, Webseiten in verschiedenen Bildschirmauflösungen anzusehen.
Die im Folgenden aufgeführten Tools laufen allesamt im Browser. Sie sind außerdem kostenlos und können ohne Anmeldung genutzt werden:
- Screenfly
- Responsivepx
- Responsivetool
- Demonstrating Responsive Design
- Responsinator
- Responsivedesign
Wie wichtig sind Inhalte „Above the Fold“?
Nutzer haben sich an das Scrollen gewöhnt. Oftmals sind heute vor allem im mobilen Bereich One-Pager zu finden, die ein Scrollen erforderlich machen.
Nichtsdestoweniger sind sich die meisten Experten einig, dass die Nutzeraufmerksamkeit abnimmt, je weiter der Leser auf einer Seite nach unten scrollt.
Der Position „Above the Fold“ kommt ergo nach wie vor eine große Bedeutung zu.
Als Webmaster sollte man aber nicht den Fehler machen und anstreben, soviel wie möglich in diesem Bereich unterzubringen.
Vielmehr ist es am wichtigsten, die Aufmerksamkeit des Users zu erzeugen.
Der Nutzer sollte „gecatched“ werden, damit er neugierig wird, weiter scrollt, liest, sich auf Unterseiten weiterklickt und damit die Kaufentscheidung erhöht wird.
Im oberen Bildschirmbereich sollten daher stets die wichtigsten Argumente und Informationen platziert werden, damit Webseiten-Besucher solange als möglich auf der Seite bleiben und die Absprungrate gering gehalten wird.
Auf diese Weise lässt sich nicht nur im besten Fall die Conversion Rate maximieren. Auch zählt die Absprungrate zu den Google Rankingfaktoren.
SEO-Experten Tipp:Tipp: Aus seotechnischer Sicht ist es daher von Vorteil, die Absprungrate gering zu halten.
SEO und Above the Fold
Für Google ist die Absprungrate ein Rankingfaktor. Für die Suchmaschine zeichnet sich eine Webseite durch relevanten Webseitencontent aus und eine hohe Usability.
Google bewertet zuviel Werbung im Above the Fold Bereich als negativ. Daher ist es der Regelfall, dass Webseiten, die viel Werbung im oberen Bereich der Seite platzieren, negativ bewertet werden.
Ferner ist es der erste Eindruck, den ein User von einer Seite hat, der wichtig für die Entscheidung ist, ob man auf der Seite bleibt oder zurück zu den SERP-Ergebnissen geht.
SEO-Experten Tipp:Tipp: Die Back-to-SERP- und Bounce Rate haben einen Einfluss auf die Platzierung einer Webseite in den Suchmaschinen.
Wie genau findet man den Above the Fold Bereich?
Im Regelfall ist es Aufgabe des Webdesigners festzulegen, welcher Bereich auf dem Desktop PC / auf mobilen Endgeräten sichtbar ist. Die Angabe erfolgt hier normalerweise in Pixel.
Für einen Tablet-User wird die Seite auf 1024 x 768 px angepasst. Für den PC liegt der Bereich bei 1280 x 720 px.
Zudem ist es möglich, durch gestalterische Elemente die Blickführung zu beeinflussen.
Hierbei sind es vor allem Formen, Bewegung und Farben, die User dazu bringen, ganz gezielt ein Augenmerk auf bestimmte Inhalte zu legen.
SEO-Experten Tipp:Tipp: Wie Nutzer eine Seite wahrnehmen und ob bestimmte Elemente tatsächlich die Aufmerksamkeit erhöhen, ist nur durch Testen zu ermitteln.
Testverfahren
Um herauszufinden, wie Nutzer auf verschiedene Elemente Above the Fold reagieren, gibt es verschiedene Testverfahren:
Scrollmaps: Bei einer Scrollmap wird farblich dargestellt, wie sich das Scrollverhalten von Nutzern auf einer Seite verhält. Bei der Analyse der Scrollmap kann festgestellt werden, welche Inhalte besonderes Interesse erwecken und z.B. nach oben verschoben werden sollten.
Im Umkehrschluss lassen sich auch Bereiche ermitteln, bei denen Optimierungsbedarf besteht.
SEO-Experten Tipp:Tipp: Scrollmaps und andere Tools zur Messung des Nutzerverhaltens bietet Microsoft’s Tool Clarify.
Heatmaps: Heatmaps bzw. Clickmaps sind ähnlich der Scrollmap. Auch hier erfolgt eine farbliche Darstellung, aus der hervorgeht, an welchen Stellen die Maus bewegt oder geklickt wird.
Nachdem es keine Seltenheit ist, dass User die Maus unwillkürlich bewegen, ist die Aussagekraft der Heatmap und die Interpretation der Daten schwierig.
Die Nutzung einer Heatmap / Clickmap ist hilfreich, um festzustellen, wo ein User z.B. einen Button erwartet oder fälschlicherweise davon ausgeht, dass an einer bestimmten Position ein Button platziert ist.
SEO-Experten Tipp:Tipp: Ein kostenloses Heatmap Tool bietet beispielsweise Hotjar.
Eyetracking: Eyetracking bietet einen hohen Aufschluss darüber, wie die Augenbewegung eines Besuchers beim Besuch einer Webseite verläuft.
So lässt sich erkennen, was ein User wie lange betrachtet und wie der Blick verläuft.
Die Methode bietet zwar sehr gute Ergebnisse, ist aber deutlich schwerer zu implementieren als Heatmaps oder Scrollmaps.
Beispiel einer Heatmap
Wissen muss man, dass sämtliche Verfahren zur Webseitennutzung zahllose Herausforderungen mit sich bringen.
Das fängt bei der richtigen Implementierung an, geht über die Einhaltung von Datenschutzbestimmungen und reicht hin zur korrekten Interpretation der Daten.
Neben den weiter oben genannten Anbietern Hotjar und Clarify haben sich auch andere Unternehmen auf die Messung von Nutzerdaten spezialisiert, wie Mouseflow oder CrazyEGG.
Was ist beim Webdesign zu beachten?
Heute ist die Zahl der verschiedenen Endgeräte groß. Damit ist es schwierig, auf allen Endgeräten eine optimale Darstellung des Above the Fold Bereichs zu erreichen.
Bei jedem Endgerät erscheint durch die Bildschirmgröße und das Responsive Design der Bereich an anderer Stelle.
Eine Herausforderung für Webdesigner, für die es keine Musterlösung gibt.
Was gilt es für den Above the Fold Bereich zu beachten?
Insgesamt sollte beim Design des Abolve the Fold Bereichs folgendes beachtet werden:
- Der Bereich sollte nicht mit Information überladen werden
- Das Relevanteste sollte präsentiert werden
- Alle Inhalte sollten sofort geladen werden -> Reduzierung der User Absprungrate
- Um die Ladezeiten für den oberen Bereich der Webseite gering zu halten, sollte auf Java-Script und CSS soweit als möglich verzichtet werden -> ist dies nicht möglich, sollte CSS und Java-Script im Hintergrund nachgeladen werden
- keinesfalls Platzierung von zuviel Werbung (Beispiel: Google Ads)
Nachdem es letztlich auf das Endgerät ankommt, welcher Bereich genau als „Above the Fold“ erscheint, ist es wichtig, dass auf die relevantesten Ansichten und Bildschirmauflösungen optimiert wird.
SEO-Experten Tipp:Tipp: Hierbei hilft ein Blick in Google Analytics. Hier wird offengelegt, mit welchen Endgeräten und Bildschirmauflösungen die Webseite am häufigsten besucht wird.
Wo findet man Informationen in Google Analytics?
- Loggen Sie sich in Google Analytics ein
- Wählen Sie in der Kategorie “Besucher” “Zielgruppe” aus. Klicken Sie auf “Browser und Betriebssystem”
- Unter „Bildschirmauflösung“ finden Sie die entsprechenden Daten
Was sollte Above the Fold stehen? – Beispiele
Im Above the Fold Bereich sollte zu finden sein:
- Die Navigation (Hauptmenu)
- Kurze, informative Texte
- Call to Action
Hinweis auf das, was auf der Seite folgt: Mit zum Beispiel Pfeilen kann ein Nutzer dazu animiert werden, weiter zu scrollen. Sie geben klaren Aufschluss darüber, dass auf der Seite weitere Inhalte zu finden sind.
Anchor Buttons / Inhaltsverzeichnis: Im oberen Bereich der Seite hat sich ebenso der Einsatz von Anchor Buttons oder einem Inhaltsverzeichnis bewährt, die zu Webseiteninhalten below the fold führen.
Besonders zu empfehlen ist dies für One-Pager. Auf diesen werden die genannten Elemente verwendet, um durch die Navigation am Seitenanfang Webseiten-Besucher per Knopfdruck auf die unterschiedlichen Seitenbereiche zu führen.
Überlappende Inhalte: Bei überlappenden Inhalten handelt es sich um Content, der in den below the fold – Bereich reicht. Dem Nutzer wird deutlich gemacht, dass noch weitere Webseiteninhalte vorhanden sind.
Ziel ist es, ein Scrollen zu erreichen.
Im besten Fall wird hierfür Webseitencontent verwendet, der den Nutzer neugierig macht.
Als Beispiel zu nennen ist ein Foto, das über den Fold reicht. Eine wichtige Bildaussage ist erst below the fold zu finden.
Auch Texte, die in den below the fold übergehen, können den Leser zum Scrollen anregen.
Spalten: Oftmals finden sich zudem Spalten, die versetzt angeordnet sind, mit dem Ziel, den User zum Scrollen zu bewegen.
Wenn Sie Fragen haben, uns die SEO für Ihre Seite übergeben wollen oder die Neugestaltung / Erstellung einer Webseite benötigen, dann kontaktieren Sie uns!
Kostenlose SEO Erstberatung! – Hier klicken
Quellen:
https://de.ryte.com/magazine/above-the-fold-webseiten-richtig-aufbauen
https://www.quicksprout.com/above-the-fold/
http://googlewebmastercentral.blogspot.de/2012/01/page-layout-algorithm-improvement.html
http://moz.com/blog/life-above-and-beyond-the-fold
Zum SEO Lexikon
[sexy_author_bio]