André Scharf von DigitasLBi präsentiert die Herausforderungen und Vorteile von responsivem Webdesign (RWD) aus SEO-Perspektive. Obwohl RWD einige Stärken wie reduzierte Duplicate Content und bessere Usability aufweist, gibt es auch Nachteile wie höhere Ladezeiten bei umfangreichen Inhalten. Letztendlich ist die Implementierung von RWD entscheidend, um eine optimale Nutzererfahrung sicherzustellen, ohne die Grundlagen der SEO zu vernachlässigen.

1. André Scharf | DigitasLBi | @andrescharf
Responsive Websites
aus SEO-Sicht

2. Kurz zu mir…
• Online seit ca. 20 Jahren
• Beruflich im Web seit
13 Jahren
• Ostkind und Wunschbayer
• Kunden:
Marriott, ZDF, AIDA, Telekom,
Langenscheidt, Microsoft, Nissan,
IKEA, Daimler, u.v.m. André Scharf
Director SEO, DigitasLBi AG
andre.scharf@digitaslbi.com
@andrescharf
http://de.slideshare.net/ascharf382

3. MOBILE IST ÜBERALL
Foto:AndreasEndermann,rp-online.de

4. Mobile überholt Desktop

5. Diversifizierte Gerätenutzung

6. Internetnutzung erfolgt mobil

7. Suche als Einstiegskanal

8. Variation im Tagesverlauf

9. Google empfiehlt RWD

10. RWD = BESSERE RANKINGS?

11. ☐ JA
Foto:FettesBrot
☐ NEIN
☒ JEIN!

12. John Mueller (Google), Okt 2013
“You may see indirect effects
(smartphone users liking your
responsive site and recommending it
to others), but we don’t use that as a
ranking factor.”

13. Avinash Kaushik (Google), 2014
“If you have a non-mobile friendly
website, a responsive design website
will certainly suck less. But that’s it.
Suck less.”

14. Gary Illyes (Google), Mrz 2015
“Mobile-responsive sites are ‘easier for
Google’, but there is no difference in how
responsive and m. sites are treated –
meaning, there is no ranking advantage to
having a responsive site. It simply reduces the
chances of errors with setups that are common
with m. sites.“

15. ☢ 21. April 2015

16. STÄRKEN VON RWD
Foto:http://fav.me/d5c9ck2

17. Weniger Duplicate Content
• Eine Domain u. Website
• Gleiche URLs für alle
Nutzer
• Einfacheres Crawling für
die Suchmaschinen
• Bündelung der
Linkstärke
• Einfacheres Tracking
Foto:DavidShankbone-https://commons.wikimedia.org/w/index.php?curid=14985457

18. Bessere Usability
• Optimale Darstellung in allen
Bildschirmgrößen
• Bessere UX = bessere SX
• 61% der Nutzer brechen den
Besuch einer mobilen Seite
ab, wenn sie nicht direkt
finden, was sie suchen
(Google-Studie aus 2012)
• 2015 erfolgten in 10 Ländern
der Welt mehr Google-
Suchen auf mobilen Geräten
als normalen Computern

19. Device Fragmentation
Foto:https://www.flickr.com/photos/lukew/

20. NACHTEILE VON RWD
Foto:RoyalNavyofficialphotographer

21. Umfangreichere Konzeption
Bilder:https://moz.com/blog/seo-of-responsive-web-design

22. Beispiel bbc.com

23. Weitere Limitierungen
Redaktionelle Websites
• Umfangreiche Inhalte =
hohe Ladezeiten
• Langes Scrollen bei
textreichen Seiten
• Besser: mobile Seiten mit
stark reduzierten Inhalten
(Stichwort AMP)
Mobile User Journey
• Mobile Suchen oft anders
intentioniert
• Gleicher Content limitiert
Möglichkeiten
• Separate mobile Seiten
besser an die User
anpassbar

24. WAS IST JETZT BESSER?
Foto:MatthewTucker,buzzfeed

25. Google Analytics Mobile Overview Report

26. Mobile vs. Desktop Conversions

27. Site-Nutzung & -Aussehen prüfen

28. Even if you have a mobile site
that looks great on 50% of mobile
visits, if it looks bad on the other
50%, you should consider
responsive web design.

29. Absprungraten prüfen

30. OPTIMALE UMSETZUNG
Foto:https://www.flickr.com/photos/ohhsnap_me/13771862765/

31. Google Guidelines

32. Alles crawlbar machen
• Betrifft Bilder, CSS- und
JavaScript-Ressourcen
• Ausschlüsse über die
robots.txt vermeiden
• Keine Ausschlüsse auf
Bot-Basis
• Fehlermeldungen in der
Search Console
beachten

33. Viewport Meta Tag verwenden
• <meta name="viewport"
content="width=device-
width, initial-
scale=1.0“> im Head
• Passt Darstellung an die
Browserbreite an
• Vermeidet falsche
Skalierung durch Browser
• Achtung: nur mit relativen
Größenangaben
kombinieren
Foto:GoogleDeveloperGuidelines

34. Bilder richtig einbinden
<picture>
<source media="(min-width: 800px)"
srcset="head.jpg, head-2x.jpg 2x">
<source media="(min-width: 450px)"
srcset="head-small.jpg,
head-small-2x.jpg 2x“>
<img src="head-fb.jpg"
srcset="head-fb-2x.jpg 2x" >
<img src="small.jpg"
srcset="large.jpg 1024w,
medium.jpg 640w, small.jpg 320w"
sizes="(min-width: 36em) 33.3vw,
100vw" alt="A rad wolf">
</picture>
• Relative Größenangaben
• picture-Element zur Angabe
von Bildern für spezielle Device-
Charakteristika
• srcset und x-Descriptor im
img-Element zur Angabe des
besten Bilds für bestimmte
Auflösungen
• Wenn möglich, Inline-Images
verwenden, um Server-
Anfragen zu reduzieren
• Vektorgrafiken (SVG) z.B. für
Logos verwenden

35. Ladezeiten verringern

36. Wie erreicht man <1s?
• Serverantwortzeiten <200ms halten
• Zielseiten-Weiterleitungen vermeiden
• Serveranfragen bis zum ersten Rendern minimieren
• Externe JS- und CSS-Ressourcen nach erstem Rendern laden
• JS und CSS für erstes Rendern inline einbinden
• Nur asynchron ladende und absolut notwendige JavaScript- u/o
CSS-Ressourcen „above the fold“
• Zeit für Browserlayout und Rendering berücksichtigen (200 ms)
• Komprimierung aktivieren

37. Alle Größen berücksichtigen
• Nicht nur eine mobile, eine
Tablet- und eine
Desktopgröße, sondern
wirklich responsive denken
• Designer Stephen Hay:
“Start with the screen small
first, then expand until it
looks like sh*t. Time to
insert a breakpoint!”
Foto:GoogleDeveloperGuidelines

38. Alle relevanten Inhalte zeigen
• Inhalte können nicht einfach
weggelassen werden
• Navigation darf sich visuell
anpassen
• Anzeigen dürfen entfallen
• Alle Verlinkungen müssen
bestehen bleiben
• Bilder z.B. als Galerien
zusammenführen
• „Verdeckten“ Text
verhindern
• Gefahr von Cloaking
Bild:TheDailyEgg

39. Niemals die Basics vergessen
• Passende Keywords
definieren
• Metadaten optimieren
• Optimierte Texte einsetzen
• Überschriftenstruktur
einhalten
• Crawlbarkeit gewährleisten
• Intern verlinken
• Sprechende URLs
• Alt-Attribute für Bilder
Bild:RandFishkin,moz.com

40. … und optimale UX bieten
• Keine Pop-ups oder
Werbe-Interstitials
• Kurze, einfache, präzise
Menüs
• Einfache Rückkehr zur
Startseite
• Einfache On-Site-Suche
• Sharing-Optionen
anbieten
• Kein Flash o.ä.
Bild:PeterDobr,https://de.wikipedia.org/w/index.php?curid=4968992

41. Wer eine schlechte,
nicht optimierte Website
responsive macht, erhält eine
schlechte Responsive
Website.

42. Folien gibt’s unter: http://de.slideshare.net/ascharf382
Danke fürs Zuhören!