Parallax Scrolling Websites und SEO – Eine Sammlung von Lösungen und Beispielen

WEBDESIGN, INTERNET, SEO / AUGUST 2018 / 6 MINUTEN LESEN

Parallaxen-Scrolling ist einer der neuesten Trends im Webdesign, doch die meisten Parallaxen-Scrolling Websites sind nicht SEO-freundlich. Ich habe diesen Trend auf vielen Websites beobachtet. Ich habe auch beobachtet, dass es viele Artikel gibt, die sagen, dass das Parallaxen-Scrolling nicht ideal für Suchmaschinen ist. Das Parallaxen-Scrolling ist eine Designtechnik, und es ist ideal für Suchmaschinen, wenn man weiss, wie man sie anwendet. Ich habe eine Liste von grossartigen Tutorials und wirklich SEO-freundlichen Parallaxen-Websites zusammengestellt, um der Gemeinschaft zu helfen, die gemeinsame Anwendung beider Techniken zu erlernen. Es scheint eine Menge Verwirrung in der Gemeinschaft zu geben, und ich möchte diese aufklären.

Parallaxen-Scrolling – seine Ursprünge und Definition

Das Parallaxen-Scrolling wurde ursprünglich für die Videospielindustrie als eine „Spezialeffekt“-Technik entwickelt, um dem Publikum eine Illusion von Tiefe zu vermitteln.

Laut Wikipedia ist das Parallaxen-Scrolling

Der Parallaxen-Scrolling ist eine spezielle Scrolltechnik in der Computergrafik, bei der sich die Hintergrundbilder durch die Kamera langsamer bewegen als die Vordergrundbilder, wodurch eine Illusion von Tiefe entsteht.

Die Webdesign-Branche definiert das Parallaxen-Scrolling wie folgt: Ein grosser Webdesign-Trend des Augenblicks ist das Parallaxen-Scrolling, bei dem sich der Hintergrund langsamer in den Vordergrund bewegt, wodurch beim Herunterscrollen der Seite ein 3D-Effekt entsteht. Es kann manchmal überwältigend sein, aber wenn es sparsam eingesetzt wird, kann es ein schönes, subtiles Element der Tiefe bieten.

Beobachtungen

• Sie wird als eine Designtechnik oder ein Trend definiert.
• Die Definition des Parallaxen-Scrollings spricht von einer Technik, die versucht, 3D-ähnliche Effekte zu erzielen.
• Es geht um die Bewegung von Schichten mit unterschiedlichen Geschwindigkeiten.
• Es geht nicht um ein einseitiges Webdesign oder eine Webstruktur.

Parallaxen-Scrolling und Webdesign – aktuelle Branchentrends

Das Parallaxen-Scrolling ist heutzutage in Mode. Der Trend begann im Jahr 2011, als die allererste Parallaxen-Website für Nike „Nike Better World“ erschien. Es gibt im Internet einige Artikel, wo das Parallaxen-Scrolling erwähnt wird. Beachten Sie auch, dass der Trend im Jahr 2013 sehr stark war.

Wie man eine Website mit parallaxem Scrollen für Suchmaschinen erstellt?

Vor der Gestaltung einer Website mit parallaxem Scrolling und für Suchmaschinen ist es wichtig, die folgenden Dinge zu beachten;

• Das Parallaxen-Scrolling ist eine Designtechnik, die verschiedene Ebenen von Inhalten, Bildern oder Hintergründen mit unterschiedlicher Geschwindigkeit bewegt.
• Regelmässige SEO-Anforderungen vor Ort wie Schema, Adresse in der Fusszeile, etc. gelten weiterhin. Denken Sie daran, beginnen Sie mit einer SEO-Architektur und wenden Sie dann das Design auf die Architektur an.
• Das Parallaxen-Scrolling ist nicht ideal für die mobile Version. Es macht die Website zu schwer. Entfernen Sie das Parallaxen-Scrolling für mobile Ansichten.

Es gibt drei Haupttechniken. Hier sind einige reale Beispiele für Parallaxen-Scrolling-Websites, die SEO-freundlich oder fast SEO-freundlich sind.

Technik #1 – „Eine Seite“ Webdesign mit Parallaxen-Scrolling mit Jquery

SEO-Spezialist Kevin hat das folgende Tutorial erstellt – „Parallax-Scrolling und SEO“ Wie man JQuery zur Suchmaschinenoptimierung Ihrer Website verwendet.

Diese Technik befasst sich mit dem Problem von einseitigen Web-Designs, die Parallaxen-Scrolling verwenden, und optimiert es im Wesentlichen für Suchmaschinen. Ich erwähne diese Technik zuerst, da es so viele Webseiten mit einseitigem Parallaxen-Scrolling auf dem Markt gibt. Bitte beachten Sie, dass Kevins Beispielseite nicht wirklich parallaxisch ist, da sie verschiedene Elemente nicht mit unterschiedlichen Geschwindigkeiten bewegt, aber ich erwähne sie, weil seine Technik leicht auf die meisten einseitig parallaxenscrollenden Websites auf dem Markt angewendet werden kann.

Die Lösung verwendet die Hilfe der ‚pushState‘-Funktionalität von jQuery. Damit kann eine parallaxisch scrollende Seite in verschiedene Abschnitte ‚geschnitten‘ werden, die in den SERPs identifiziert werden können, jeder mit seiner einzigartigen URL und Metadaten. Als Ergebnis kann eine einzelne Seite mehrfach für verschiedene Inhalte indiziert werden.

Vorteile – Es ist eine gute Lösung für eine bestehende, einseitig parallaxisch scrollende Website, die SEO benötigt. Es ist eine gute Technik für kleine Websites, die nicht an Hard-Core-Analysen interessiert sind.

Nachteile – Schlecht für die Analyse. Ich vermute, dass die Absprungraten bei dieser Art von Websites höher sein könnten, da das Scrollen durch die Website ziemlich schnell erfolgen kann und es einem Softwareprogramm als ein schnelles Eingeben und Verlassen pro URL erscheinen würde.

Wenn die Website nicht der technischen Definition von Parallaxen-Scrolling entspricht, aber sie verwendet die JQuery /Unendlich-Scrolling-Technik, dann ermöglicht es dem Benutzer, durch die gesamte Website und durch mehrere URLs zu scrollen. Es wird nicht als Parallaxen-Scrolling klassifiziert, da es nicht mit Ebenen und Geschwindigkeiten spielt. Ich erwähne es, weil es eine gewisse Sichtbarkeit erhalten hat. Es handelt sich nicht um eine Website mit parallaxem Scrollen, da sie nicht über mehrere Ebenen verfügt, die sich mit unterschiedlichen Geschwindigkeiten bewegen.

Technik Nr. 2 – Mehrseitige, parallaxenscrollende Website zur SEO-Architektur

Diese Technik ist sehr einfach und leicht zu verstehen. Sie beginnen mit einer SEO-Webarchitektur und platzieren dann die parallaxenscrollenden Designeffekte auf jeder SEO-URL. Wanda hat ein Tutorial über diese Technik geschrieben. Ich habe keine anderen Tutorials finden können, in denen diese Technik erwähnt wird. Wenn Sie sie finden, lassen Sie es mich bitte wissen.

Sie erreichte die Bewegung der Ebenen mit unterschiedlichen Geschwindigkeiten, jedoch nicht die „Illusion von Tiefe“ oder das „Erzählen einer Geschichte“. Obwohl es als Parallaxen-Scrolling bezeichnet werden kann, wird das Parallaxen-Scrolling nicht verwendet, wie es heute der Trend ist.

Vorteile – Gut für die Analytik, da jede URL einen eigenen Inhalt hat, der leicht zu implementieren ist

Nachteil – Die Ladezeiten können bei dieser Technik ein Problem darstellen, da zu viel Parallaxen-Scrolling die Ladezeit des Browsers länger werden kann, als sie sein sollte. Es kann ein wenig zu „interaktiv“ sein. Das Design für jede URL kann teuer sein und hält das Design starr.

Empfehlungen – Verwenden Sie den Parallaxen-Scrolling sparsam auf der gesamten Website statt auf jeder URL. Reduziert die Ladezeit und macht die Website natürlicher. Außerdem werden dadurch die Design-Kosten reduziert und die Website etwas flexibler.

Diese Website hat das Parallaxen-Scrolling auf ihrer Homepage und auf einer internen Seite platziert. Beachten Sie, dass die Homepage und die Serviceseite Parallaxen-Scrolling haben.

Vorteile – Gut für die Analyse und einfach zu entwerfen und zu implementieren

Nachteile – Hat keine 100%ige SEO-Architektur. Beachten Sie, dass die Services-Seite die Themen SEO, PPC, SMM und Content-Marketing nicht auf eindeutige URLs mit eindeutigen Titel- und Meta-Beschreibungen aufgeteilt hat.

Empfehlungen – Teilen Sie den Inhalt auf der Dienstleistungsseite auf oder verwenden Sie Jquery fix (siehe Technik #2). Fügen Sie eindeutige Titel und Meta-Beschreibungen hinzu.

Technik #3 – Parallaxen-Scrolling auf der Homepage und der regulären SEO-Architektur

Eine andere Technik besteht darin, das Parallaxen-Scrolling auf der Homepage zu platzieren und dann andere URL’s einzubinden, die SEO-freundlich sind, aber kein Parallaxen-Scrolling haben.

Vorteile – Hält die Website leicht und flexibel. Sie ist einfach zu gestalten und erschwinglicher als Technik #1.

Nachteil – Keine Maximierung der Kreativität oder eine super „interaktive“ Website.

Lösen die obigen Lösungen den Konflikt der parallaxenbildenden SEO?

Ich glaube natürlich, dass sie es tun, aber ich bin daran interessiert, Ihre Meinung zu diesem Thema zu hören. Ich liebe die Parallaxen-Scrolling-Designtechnik und glaube fest daran, Websites schön und kreativ, aber auch SEO-freundlich zu gestalten. Ich hoffe, dass diese Sammlung von SEO-Parallaxen-Websites und Tutorials Ihnen dabei helfen, beide Techniken zusammen anzuwenden. Und denken Sie daran, dass das Parallaxen-Scrolling nur eine Designtechnik ist, die auf verschiedenen Arten von Web-Architekturen eingesetzt werden kann.