Parallax One Pager: SEO Tipps und Lösungen

29. März 16 | ALLGEMEINES | Keine Kommentare| In 16–20 Minuten hast du es durch

Mittlerweile kennt sie jeder: Parallax One Pager. Mehre Ebenen, die sich beim Scrollen unterschiedlich schnell bewegen, haben diese Websites ungemein beliebt gemacht. Weil der optische Effekt so gut ankommt, können zunehmend mehr Seitenbetreiber nicht widerstehen. Zumal die technische Umsetzung leichter nicht sein könnte. Inzwischen gibt es zahlreiche Themes für WordPress, die eine schnelle und unkomplizierte Realisation versprechen.

Hier mal ein sehr schlechtes Beispiel 😉 einer SEO Agentur aus dem 97. Stock.

Vom Kunden geliebt, vom SEO gehasst

Auswertungen zeigen, dass bei der Mehrheit der Parallax One Pager keine Suchmaschinenoptimierung erfolgt ist. Bei den SEOs hält sich die Begeisterung dennoch in Grenzen. Die optisch so toll anmutenden Seiten bringen hinsichtlich der Optimierung einige Stolpersteine mit sich. Zumal diese keineswegs nur von technischer Natur sind. Oft beginnt die Arbeit damit, dem Kunde klar zu machen, dass seine Seite so nicht bleiben kann.

Man sollte meinen, dass Unternehmen gelernt haben und dem Design nicht mehr die höchste Priorität einräumen. Schließlich haben sie diese Erfahrung längst mit Adobe Flash gemacht. SEO hat Flash nahezu vollständig aus dem Web verdrängt. Doch bei den Parallax One Pagern scheint die Verlockung einfach zu groß zu sein.

Natürlich können auch diese Seiten gut ranken. Streng genommen fällt das besondere Scroll-Verhalten in den Bereich des Designs – und ein technisch solide umgesetztes Design kommt der Suchmaschinenoptimierung nicht in die Quere. Entscheidend ist, dass das Design nicht dazwischenfunkt. Doch bevor wir uns näher mit der Optimierung beschäftigen, folgt zunächst ein Blick auf die SEO Probleme, die mit den Parallax One Pagern einhergehen.

Parallax One Pager Optimierung SUMAGO

Nur eine URL

„Echte“ One Pager werden auf Basis von nur einer Url realisiert, was die Optimierung – sofern sie nicht nur auf eine Keyword-Phrase erfolgen soll – maßgeblich erschwert. Für gewöhnlich wird jeder Keyword Phrase eine eigene Unterseite und damit auch Url zugewiesen. Beim One Pager stellt die Limitierung auf eine Url eine erhebliche Einschränkung dar.

Im Web sind einige Seiten zu finden, die zur Lösung dieses Problems mithilfe von Ankern realisiert wurden. Inhalte werden dort nicht Urls, sondern Sprungmarken zugeordnet.

Beispiel

Klassische SEO Variante                               One Pager Lösung

domain.com/keyword1                                  domain.com/#keyword1

domain.com/keyword2                                  domain.com/#keyword2

 

Ideal ist solch eine Lösung jedoch nicht. Anker werden von Google anders als Urls gewertet. Somit bleibt die Url-Limitierung ein kritischer Faktor.

Beschränkungen bei Meta-Daten und Überschriften

Nicht nur die Möglichkeit der Url-Zuweisung entfällt, auch die Nutzung von Meta-Daten ist eingeschränkt. Beim One Pager steht lediglich ein Title zur Verfügung, der letztlich für die gesamte Seite gilt. Besonders diese Einschränkung ist von großer Tragweite. Zumal sie ebenso Überschriften betreffen kann, weil beispielsweise das CMS nur einmal die Verwendung von H1 gestattet.

Lange Ladezeiten

Pagespeed ist schon lange ein Kriterium, dem viele SEOs große Beachtung schenken. Doch beeindruckende Ladezeiten sind im Bereich der Parallax One Pager nicht ganz so leicht zu realisieren. Erfahrungsgemäß performen die meisten Seiten unterdurchschnittlich, was im Regelfall gar nicht so sehr den längeren Textinhalten, sondern vielmehr den Grafik-Elementen und ergänzendem Code geschuldet ist.

Es kommt vor, dass lange Ladezeiten nicht nur Google negativ aufstoßen, sondern auch die Besucher verärgern. Lädt eine Seite zu langsam, bouncen die Nutzer, was ein sehr schlechtes Signal ist und die Rankings zusätzlich bedroht.

Above the Fold Limitierung

Eine weitere Herausforderung besteht darin, entscheidende Inhalte „above the fold“ zu präsentieren. Angesichts der gebotenen Usability sind die Seiten so ausgelegt, den Löwenteil des Contents „below the fold“ darzustellen.

Browser Kompatibilität

Die größte Herausforderung bei der Entwicklung von Websites mit Parallax Scroll-Effekt ist die Browser-Kompatibilität. Die Umsetzung kann ungemein mühsam sein und zugleich besteht immer noch das Restrisiko, dass Seiten auf einzelnen Browsern oder Endgeräten trotzdem nicht korrekt dargestellt werden. Dies kann wiederum die User-Experience schmälern oder im schlimmsten Fall sogar die Bounce-Rate erhöhen.

Ganz nebenbei führt die aufwendige Umsetzung mittels HTML und CSS oftmals zu vergleichsweise viel Code, der sich wiederum negativ auf die Ladezeiten auswirkt.

Erschwerte Mobile Experience

Es gibt gleich zwei Faktoren, welche die Mobile Experience maßgeblich schmälern. Da wäre zunächst die bereits erwähnte Darstellung auf dem Endgerät. Längst nicht immer verhalten sich die Parallax One Pager tatsächlich responsive, einige Geräte können Schwierigkeiten mit der Darstellung haben. Zudem machen sich größere Datenmengen im Code in Sachen Ladezeit umso mehr bemerkbar. Vor allem bei Nutzern, die über Mobilfunknetze zugreifen, drohen hohe Bounce-Rates.

Content für Suchmaschinen sichtbar machen

In Abhängigkeit von der technischen Umsetzung kann das Risiko bestehen, dass Google den Content nicht vollständig erfassen und somit auch nicht in der Websuche berücksichtigen kann. Man stelle sich nur vor, ein Designer realisiert einen Parallax One Pager tatsächlich in Flash – das Erzielen guter Rankings wäre damit nahezu unmöglich.

Eingeschränkte Webanalyse

Daten spielen in der Suchmaschinenoptimierung eine große Rolle. Allerdings kann die Datengewinnung bei One Pagern stark eingeschränkt sein. In diesen Fall ist gar nicht so sehr die eigentliche Integration gemeint – der Google Analytics Code lässt sich unterbringen. Doch je nach Art der Website lässt sich das Nutzerverhalten nicht so erfassen, wie es der Optimalfall vorsieht. Funnels oder ähnliche Formen der Datenauswertungen sind oft nicht nutzbar.

SEO Parallax One Pager

Lösungen für Parallax One Pager SEO

Die Liste an Einschränkungen mag zwar lang sein, doch zum Glück besteht die Möglichkeit, alle Probleme aus dem Weg zu räumen. Lösungsansätze gibt es gleich mehrere.

Lösung 1: Vom Konzept des reinen One Pagers verabschieden

Zur Erinnerung: Die aufgeführten Probleme beziehen sich vorrangig auf Seiten, die komplett als One Pager konzipiert wurden, d.h. über keine Unterseiten verfügen. Einer simpelsten Lösungsansätze besteht darin, sich vom One Pager zu verabschieden und ergänzende Unterseiten anzulegen.

Dies bedeutet übrigens nicht, dass das Parallax Scrolling verschwindet. Es ist möglich, hieran weiterhin festzuhalten – und das sogar in verschiedenen Formen. So wäre es beispielsweise denkbar, alle Seiten mit dem räumlich wirkenden Scroll-Verhalten auszustatten. Ebenso bietet es sich an, nur ausgewählte Seiten so zu gestalten. Man denke nur an die Websites einiger großer Hard- oder Software-Anbieter. Dort wo erklärungsbedürftige Produkte vorgestellt werden, sind Unterseiten mit Parallax Scrolling ausgestattet, die restlichen Seiten hingegen nicht.

Sobald einige Seiten konventionell scrollen und andere wiederum mit Parallax-Effekt, ist ein ganz wichtiger Punkt zu beachten. Unterschiedliche Darstellungen können Verwirrung stiften und somit die Besucher überfordern Es drohen erhöhte Bounce-Rate oder schlechte Conversion-Rates. Umso bedeutsamer ist es, die Menüführung und ähnliche Aspekte der Nutzerführung möglichst einheitlich zu gestalten.

Lösung 2: „Fake One Pager“ mit echten Unterseiten

Sofern eine Umsetzung als One Pager bevorzugt wird, ist massives Tweaking angesagt. Ziel ist es, die Website als One Pager darzustellen, obwohl sie in Wirklichkeit auf der Startseite sowie ergänzenden Unterseiten beruht. Zu diesem Zweck werden die einzelnen Seiten seriell miteinander verknüpft und beim Scrollen „nachgeladen“ – d.h. der Nutzer erlebt, wie er auf dem One Pager von Kapitel zu Kapital scrollt, obwohl er dabei in Wirklichkeit Unterseiten besucht.

Die technische Realisierung erfolgt mithilfe der „pushState“ Funktion in jQuery. Sie erlaubt es, die einzelnen Seiten gezielt miteinander zu verketten und dabei flüssige Übergänge zu gewährleisten.

http://www.winlocal.de/blog/2014/05/parallax-im-webdesign-was-man-bei-der-verwendung-unbedingt-beachten-sollte/

Der Vorteil eines solchen „Fake One Pagers“ gegenüber einem echten One Pager besteht darin, die Einschränkungen hinsichtlich Urls, Meta-Daten und Überschriften zu umgehen. Die Spielwiese für den SEO wird dadurch maßgeblich erweitert, was schlussendlich den Rankings zugute kommt.

Lösung 3: One Pager grundsätzlich in Frage stellen

Unabhängig davon, ob es um die Website eines Kunden oder eine eigene Seite geht: In beiden Fällen sollte man sich fragen, ob ein Parallax One Pager wirklich die beste Lösung ist. Es kommt in der Praxis viel zu häufig vor, dass entsprechende Designformate nur gewählt werden, weil sich einzelne Personen – meist der Chef – davon persönlich angesprochen fühlen. Am Ende zählt jedoch, was für die Nutzer am besten ist. Dies kann bedeuten, dass sich andere Designs viel besser eignen.

Tipps für die erfolgreiche Umsetzung

Die drei gezeigten Lösungen sehen auf den ersten Blick ganz einfach aus, doch die praktische Umsetzung kann einige Hürden mit sich bringen. Die folgenden Tipps helfen dabei, diese Hürden zu erkennen und aus dem Weg zu räumen.

Tipp 1: SEO first

Seit Jahren bläuen wir SEOs unseren Kunden ein, dass erst das Seiten-/Optimierungskonzept erstellt wird und die technische Realisierung im Anschluss erfolgt. Doch gerade beim Parallax One Pager scheint die Verlockung zu groß zu sein. Die Kunden melden sich, wenn sich Seite bereits besteht. Dabei gilt auch hier: SEO comes first!

Tipp 2: Information ist wichtiger als Design

Bei Lösung Nr. 3 wurde verdeutlicht, dass One Pager und Parallax Scrolling nicht verpflichtend sein müssen. Der eigentlichen Information, die dem Besucher zur Verfügung gestellt werden soll, kommt eine höhere Bedeutung als dem Design zu. Das Design ist die Verpackung, die Information hingegen der Inhalt.

Wenn es beispielsweise darum geht, komplexe Produkte mitsamt Anwendungsbeispielen verständlich vorzustellen, kann Parallax Scrolling ein wertvolles Hilfsmittel sein. Geht es hingegen um den Bau einer Landingspage, könnte das Scrollen die Conversion-Rate sogar negativ beeinflussen.

Tipp 3: Entstehung von Duplicate Content bedenken

Beim Loslösen vom One Pager ist es schon einigen SEOs passiert, ungewollt Duplicate Content zu erzeugen. Aufgrund des Parallax Scrollings ist die Verlockung groß, die geschaffenen Unterseiten mit einigen Sätzen oder gar Absätzen auf der Startseite anzuteasern. Hierbei sollte jedoch nicht auf Textinhalte zurückgegriffen werden, die im Wortlaut auf den Unterseiten zu finden sind. Hier ist es erforderlich, die Teaser mit Unique Content auszustatten.

Tipp 4: Macht der interne Verlinkung nutzen

Die interne Verlinkung ist eine Onpage-Maßnahme mit enormer Wirkung. Gerade bei Seiten-Designs mit Parallax Scrolling wird sie oft sträflich vernachlässigt, weil nicht die Verlinkung, sondern das Scrollen im Vordergrund steht. Besonders wenn wie in Lösung Nr. 2 beschrieben, ein „Fake One Pager“ entstehen soll, darf die interne Verlinkung nicht zu kurz kommen. So wäre es beispielsweise denkbar, sie über seitlich mitscrollende Menüs zu realisieren. Ergänzend lassen sich Links in Header und Footer unterbringen.

Tipp 5 : Mobile-Version ohne Parallax Scrolling ausliefern

Auf Mobile-Devices ist das Parallax Scrolling ein echter Knackpunkt. Ladezeiten und Beeinträchtigungen in Sachen Kompatibilität lassen sich hier nicht immer aus dem Weg schaffen. Deshalb tendieren einige SEOs – wie beispielsweise Carla Dawson vom Mozblog – dazu, Inhalte auf Smartphones und Co. lieber ohne Parallax Scrolling auszuliefern.

https://moz.com/blog/parallax-scrolling-websites-and-seo-a-collection-of-solutions-and-examples

Fazit zu SEO mit Parallax One Pager

Parallax One Pager bringen mehr Stolpersteine mit sich, als oft vermutet wird. Die meisten bestehenden Seiten sind suboptimal umgesetzt und bedürfen einer nachträglichen Optimierung. Die einzelnen Stolpersteine lassen sich aus dem Weg räumen, wobei dies unter Umständen bedeutet, nicht länger am Prinzip des One Pagers festzuhalten.

Sollte sich ein Projekt noch in der Konzeptionsphase befinden, hat SEO gegenüber dem Design Vorrang. Dies kann bedeuten, dass die Umsetzung nicht als Parallax One Pager erfolgt. Am Ende entscheidet vor allem der Umfang: Je kleiner das Spektrum an relevanten Keywords, desto eher ist es möglich, ein Projekt als One Pager zu realisieren.

Über den Autor

Marco Janck auf Google +
Marco Janck hat SUMAGO im Jahre 2004 gegründet und betreibt die SEO Agentur seitdem im „Speck-Gürtel“ von Berlin mit großem Erfolg.

Marco Janck – who has written posts on .


Leave a Reply

Kontakt

SUMAGO GmbH
SEO AGENTUR
Tel : +49 (0)3379 201192
Kontaktformular
Marketing Platoon | SEO BERLIN
Partner | Jobs | Blog
Presse | Sitemap | Impressum | Wiki
Deine SEO Agentur in Berlin & Deutschland

Pin It on Pinterest

Du Newsletter wollen? ;-)

Bekommst Du mit dem Newsletter den "Geilen Scheiss"?
Keine Ahnung. Wir schreiben Dir einfach, was uns bewegt oder was Du vielleicht noch nicht gesehen hast. FERTIG! Nimm es oder lass es

You have Successfully Subscribed!