Responsiver Online Shop SEO vs. Design

[HaMa1]

Moin moin,
ich möchte meinen Online Shop derzeit auf ein responsives Design umstellen. Als Basis dafür soll ein gekauftes Template herhalten (Bootsstrap 3.* basierend) das dann angepasst wird.

Das Problem, durch das responsive (mobile first) Konzept gibt es viele große Bilder und große Schriften und damit relativ wenig Texte.
Wenn, dann sind die Texte weiter unten also nicht "above the fold" und damit SEO technisch relativ wertlos.

Wie kriegt man das hin, das man einerseits gute Usability für 4" bis 30" Bildschirme anbietet und gleichzeitig Google seine Texte liefert, damit der Crawler auch versteht was auf der Seite zu finden ist?

Welcher responsive Online Shop ist nach euren Augen gut gestaltet?
Danke!

[smilla]

Deswegen arbeitet man doch bei Schrift mit em und nicht mit px, damit das passt? Bin leider auf dem Gebiet aber auch kein Profi, mich interessiert das aber auch.

Vergiss nicht, dass es auch viele Leute gibt, die mit einem 40 Zoll Monitor arbeiten

[Melegrian]

Das Problem, durch das responsive (mobile first) Konzept gibt es viele große Bilder und große Schriften und damit relativ wenig Texte.
Wenn, dann sind die Texte weiter unten also nicht "above the fold" und damit SEO technisch relativ wertlos.

Ich verstehe nicht, was Du eigentlich meinst. Die Images passen sich doch von der Größe an und werden doch nicht größer als der Screen. Auch blendet man in den einzelnen Seiten keine Images in einer Auflösung ein, wie sie von der Kamera kommen, sondern so, dass sie zur Seite passen und verlinkt dann nur auf eine größere Ansicht. Text und Images bleiben immer zusammen.

Allgemein verwende ich für Images eine Lösung wie diese:

Code: Alles auswählen

<div class="float...links, center oder rechts">
    <img src="bild-01.jpg" alt="Text" width="300" height="200" class="images"><br>
    <span class="Text_zum_Image">© Bildautor<br>
    Notizen zum Bild</span>
</div>

<div class="float...links, center oder rechts">
    <img src="bild-02.jpg" alt="Text" width="300" height="200" class="images"><br>
    <span class="Text_zum_Image">© Bildautor<br>
    Notizen zum Bild</span>
</div

Für eine Galerie auch mal diese:

Code: Alles auswählen

<dl class="gallery">
    <dt>
        <img src="bild-01.jpg" alt="Text" width="300" height="200" class="images">
    </dt>
    <dd class="Text">
        "Text_zum_Image">© Bildautor<br>
         Notizen zum Bild
    </dd>
</dl>
<dl class="gallery">
    <dt>
        <img src="bild-02.jpg" alt="Text" width="300" height="200" class="images">
    </dt>
    <dd class="Text">
        "Text_zum_Image">© Bildautor<br>
         Notizen zum Bild
    </dd>
</dl>

Für class="images" dann Eigenschaften wie diese:

Code: Alles auswählen

{max-width:100%; height:auto}

Bei WordPress erfolgt das zum Beispiel bereits beim Hochladen, dass die Images in drei verschiedenen Größen abgelegt werden, doch auch da halte ich es für besser, die Images gleich in der Größe vorher zuzuschneiden, in der diese verwendet werden sollen.

Frage mich nicht, wie das bei jedem einzelnen Shop gehandhabt wird, doch in den Seiten werden doch da nur Images von bescheidener Größe benötigt.

Was aber bislang nichts an meiner Meinung ändert, dass ich responsives Webdesign nur für eine Notlösung halte, da ein Smartphone nun einmal kein Ergebnis wie auf einem größeren Screen bieten kann.

[nerd]

Sorry leute, jede menge missversaendnisse und irrtuemer hier. Richtig ist, dass die bilder prinzipiell groesser sind, da du fuer jedes bild die groesste sichtbare (=Desktop version) version anbieten musst. Da handies meistens diese aufloesung nicht darstellen koennen, muessen sie das bild trotzdem in voller groesse runterladen, und dann runterskalieren - nicht ganz optimal, aber bei nur 1-2 "grossen" bilder auch nicht zu schlimm. Es gibt auch js-tricks wo der browser nur die "optimale" bildgroesse runterlaedt.
Ich denke mal bei einem shop wird wohl erstmal nur ein grosses produktbild geladen, und die weiteren bilder nur nachgeladen wenn der user tatsaechlich drauf klickt.

Groessen und fonts:

Bitte versuche nicht, bei responsive design irgendwas mit festen pixel groessen beschreiben zu wollen - das funktioniert grundsaetzlich nicht, da du nie weisst welche bildschirmgroesse der user hat. Was du hast sind relative groessen, also Prozent angaben oder - wenn du bootstrap als responsive framework verwendest (habe ich bei meinem letzten 5 projekten getan) ein 12 grid system. Soll heissen dein layout besteht aus "blocks" die z.b. 1/12, 1/6, 1/4, 1/3, 1/2 oder 5/12 BREIT sind. Die HOEHE des blocks richtet sich immer nach dem inhalt des blocks - also entweder text oder bilder/videos!
Was auch nicht klappt ist bei layouts z.b. 2 blocks nebeneinander zu haben, und zu erwarten dass beide die selbe hoehe haben damit es "schoen" aussieht. Das klappt mit 2 bildern, aber nicht wenn einer der blocks text enthaelt. Bilder skalieren immer horizontal und vertikal herrunter (und behalten dabei das seitenverhaeltniss bei), bei texten ist es umgekehrt: je schmaler der textblock ist, umso laenger wird er da der browser immer mehr woerter nach unten schieben muss um horizontale scrollbars zu vermeiden. Du kannst die fontgroesse nicht proportional herrunterskalieren, da diese dann eventuell unleserlich/zu klein werden und sie auch nie im selben verhaeltniss wie das bild runterskalieren.

Grundsaetzlich solltest du nie pixel-perfektes design erwarten wenn du responsive design willst. Du weisst nie, welche aufloesung und pixel dichte der user hat und welches design er auf seinem geraet wirklich zu sehen bekommt. Ich sehe immer wieder dass irgendwelche designer ihr "mobile design" in einem iPhone-bildchen einrahmen. Sieht huebsch aus, ist aber voellig nutzlos da es inzwischen so viele verschiedene iPhone bildschirmgroessen gibt dass mit diesem einen "iPhone" design vielleicht wirklich nur 5% deiner user bediehnt werden.

Wenn du anfaenger oder kein designer bist, suche dir ein responsive template was fuer deinen shop passt und belasse es dabei. versuche nicht, es selbst zu verbessern! Achte darauf, dass alle wesentlichen angaben (preis, bilder, beschreibung) auf allen geraeten sichtbar sind, und das bei handies die wesentlichen informationen so weit wie moeglich oben stehen und ohne viel scrollen sichtbar sind. Wesentliche angaben, die du auf dem desktop zeigst, sollten idealerweise auch auf dem handy irgendwo sichtbar sein.

Idealerweise solltest du den anderen weg gehen: Was MUSS ich ueberall zeigen? Das sind die angaben die du in handy, tablet und desktop version unterbringen musst. Bei tablet und Desktop solltest du dir dann nur ueberlegen, was sinnvoll waere noch zu zeigen um die restlichen platz zu fuellen: aehnliche artikel, tabelle mit lieferkosten usw. usf.
Diese angaben diehnen eher dazu platz sinnvoll zu fuellen, und google relevante links zu liefern dehnen es folgen kann. Trotzdem sollten die "platzfueller" immer auch fuer den user relevant sein. Also bei "kuechenmixer 3000" waere zum beispiel "5 weiter mixer fuer die kueche" relevant, aber nicht "5 zufaellige artikel" die dann eine mischung aus klobuersten, taschenlampen und buchregalen enthalten.

Sorry fuer eventuelle schreibfehler, aber es ist wochenende und ich kam gerade heim aus der bar und sollte im moment auch kein auto mehr fahren oder schwere maschinen bediehnen...

[HaMa1]

Okay danke erstmal. Was ich aber vielmehr meinte, ist allgemein der geringe Anteil von Text in den meisten Starsteiten von responsiven Shop Templates (above the fold).

Hier mal als Beispiel, beliebte Online Shops und ein beliebiges responsives Template für einen Shop.


Zalando Mobil


Zalando Desktop


Otto Mobil


Otto Desktop


responsives Template Mobil


responsives Template Desktop


Wenn man mal so vergleicht, Otto hat den meisten Text. Zalando zeigt sich schon sehr minimalistisch (kann es sich aufgrund des Bekanntheitsgrades auch leisten), aber das responsive Template enthält im Prinzip nur einen Slider und das Menu "above the fold".
Kriegt man so einen Shop jemals auf eine gute Position?

[Melegrian]

Eigentlich meinte ich das im letzten Satz. Du kannst halt 360 x 640 nicht mit 1920 x 1080 oder größer vergleichen, weil auf kleinen Endgeräten der Content zu einem Schlauch wird. Niemand wird von Dir erwarten, dass Du da wirklich viel "above the fold" bekommst. Ein User sollte nur zum Scrollen verleitet werden. Das könnten durchaus entsprechende Images und ein paar Links zum Navigieren sein, da ja Images letztendlich ebenfalls Content sind. Slider und Headergrafiken einmal ausgenommen, die lassen sich ja ausblenden unter einer gewissen Breite.

Unter "above the fold" oder wie immer man das bezeichnen mag, es sollten nicht nur Ads oder andere Werbung im sichtbaren Bereich eingeblendet werden, sondern ein Teil des eigentlichen Contents, der durchaus Images enthalten kann.

[nerd]

Okay danke erstmal. Was ich aber vielmehr meinte, ist allgemein der geringe Anteil von Text in den meisten Starsteiten von responsiven Shop Templates (above the fold).

[...]

Wenn man mal so vergleicht, Otto hat den meisten Text. Zalando zeigt sich schon sehr minimalistisch (kann es sich aufgrund des Bekanntheitsgrades auch leisten), aber das responsive Template enthält im Prinzip nur einen Slider und das Menu "above the fold".
Kriegt man so einen Shop jemals auf eine gute Position?

Hm solche shops wollen primaer verkaufen, und nicht suchmaschinen mit text fuettern. Ich schaetze einfach mal dass diese seiten absichtlich grafisch (und ohne viel text!) gestaltet sind da diese auf kleinen screens fuer besucher leichter zu erfassen sind als lange textlisten.
Bei mobile phones duerfte die verweildauer und page impressions pro besucher auch zwangslaeufig hoeher sein als auf desktops, weswegen man die informationen auch besser auf mehrere seiten aufteilen kann.

Die gute position hat sicher auch noch andere gruende; an der gestaltung der mobile page allein liegt es sicher nicht.

[HaMa1]

Hm solche shops wollen primaer verkaufen, und nicht suchmaschinen mit text fuettern. Ich schaetze einfach mal dass diese seiten absichtlich grafisch (und ohne viel text!) gestaltet sind da diese auf kleinen screens fuer besucher leichter zu erfassen sind als lange textlisten.

Ja verkaufen wollen wohl die meisten Online Shops das ist wohl richtig. Es ist jetzt auch nicht direkt so, dass ich persönlich besonders scharf darauf wäre irgendwelche SEO Texte auf meiner Seit zu platzieren.
Bloß ohne Text und ohne ein bereits bekannter Shop zu sein, bekommt man ohne Texte schwerlich ein gutes Ranking.

Die großen Seiten werden manuell von Menschen geratet (Quality Rater) und erst in zweiter Linie durch den Algortihmus (zumindest bei Google).

[Shady]

Also ich verbaue meine Texte beim Responsive Layout sehr gerne in der Sidebar. Ähnlich wie auch Zalando es macht. Finde den Platz dort sehr geschickt.

Für Mobile verzichte ich dagegen in aller Regel auf diesen Content. Die Sidebar wird dort komplett ausgeschaltet.

[nerd]

Ja verkaufen wollen wohl die meisten Online Shops das ist wohl richtig. Es ist jetzt auch nicht direkt so, dass ich persönlich besonders scharf darauf wäre irgendwelche SEO Texte auf meiner Seit zu platzieren.
Bloß ohne Text und ohne ein bereits bekannter Shop zu sein, bekommt man ohne Texte schwerlich ein gutes Ranking.

Also ich wuesste jetzt spontan nicht, welchen "text"ich als user auf der startseite eines online shops lesen wollte. Ich sehe es immer wieder das irgendwelche "Seos" versuchen unnuetze fuelltexte unterbringen. Besonders beliebt: am ende der kategorie "kuechenmixer" eine 500 wort abhandlung mit keyword-stuffing fuer "kuechenmixer", welche lebensmittel man damit mixen kann, welche kuechenmixer marken es gibt usw. - das ist quatsch.
Deine texte sollen prima und einzigartige produktbeschreibungen sein, ggf. mit kundenmeinungen und ausfuehlichen technischen details (Leistung, groesse, gewicht, garantiezeit usw.) und querverlinkung zu aehnlichen produkten. Ansonsten wuerde ich sinnvolle alt texte verwenden, wenn der shop primaer auf grafische elemente zur navigation setzt.

[HaMa1]

Ich sehe es immer wieder das irgendwelche "Seos" versuchen unnuetze fuelltexte unterbringen.

Ja, weil der Shop damit scheinbar besser rankt.

das ist quatsch.

Deiner Meinung nach, oder vom Effekt her auf die Suchmaschine?

Deine texte sollen prima und einzigartige produktbeschreibungen sein, ggf. mit kundenmeinungen und ausfuehlichen technischen details (Leistung, groesse, gewicht, garantiezeit usw.) und querverlinkung zu aehnlichen produkten.

Auf den einzelnen Aritkelseiten, aber nicht auf der Startseite. Dort hast du eher eine Übersicht der Kategorien der Artikel die im Shop verkauft werden. Vielleicht noch die Bestseller, mit Kurzbeschreibung (die aber genau so in 1000andere Shops steht, weil du nur für ein paar Wörter platzt hast).

Wie beschrieben, ich bin auch nicht scharf darauf solche SEO Texte unterzubringen. Aber wenn Google das mag, dann mach ich es eben. Ob sinnvoll oder nicht.

Beispiel sinnfreier Text auf Zalando Startseite:

Schuhe, Kleider, Accessoires… Der textile Wahnsinn, im Allgemeinen auch Mode oder Fashion genannt, ist unsere Passion. Seit jeher ist die Mode Teil der Identifikation unserer selbst. Mode ist die Kunst, etwas für eine breite Gesellschaft zu erschaffen, das in sich so individuell ist, wie jeder einzelne Mensch. Sie symbolisiert Zugehörigkeit und Gemeinschaft aber auch Einzigartigkeit und die Möglichkeit einen uniquen Look zu erschaffen. Es ist ein stetiger Wechsel von Trend und Flow in dem es gilt, seinen eigenen Weg und seinen eigenen Style zu (er)finden. Liebst du Kleider oder stehst du eher auf eine lässige Stoffhose im Oversized Look?

[nerd]

Wie beschrieben, ich bin auch nicht scharf darauf solche SEO Texte unterzubringen. Aber wenn Google das mag, dann mach ich es eben. Ob sinnvoll oder nicht.

Sieht fuer normale besucher (die, die bei dir geld ausgeben sollen) dann allerdings immer so aus, als haette da ein 2-klaessler die kategoriebeschreibung verfasst da bei sowas immer nur banalitaeten besprochen werden, die der verkaufer im laden dem kunden nie erklaeren muesste.
Ich glaube auch nicht, dass solche belanglosen 3-zeiler extrem bedeutetnd fuers ranking sind. Es gibt viele gute shops die NICHT darauf angewiesen sind und trotzdem sehr gut dastehen.