Gut 50 Prozent der Internetnutzer sind laut AGOF vorwiegend mobil unterwegs – und das auf vielfältigen Endgeräten mit den unterschiedlichsten Auflösungen. Kein Wunder, dass selbst Google eine Mobile-First-Prämisse proklamiert und Responsive Websites als erstes Mittel der Wahl nennt. Trotzdem stehen SEO-Experten, Entwickler und auch Marketingentscheider nicht immer voll hinter dieser Aussage. Wieso eigentlich? Liegt es an der Performance oder an den Inhalten, die bei Responsive Websites immer gewissen Kompromissen unterliegen? Müssen sie das überhaupt? Werfen wir einen Blick auf Responsive Websites aus SEO-Sicht und klären die wichtigsten Fragen, um die eigene Website auf allen Endgeräten möglichst optimiert zu präsentieren!
Responsive Websites aus SEO-Sicht – MobileTechCon 2016
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
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.“
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
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
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.
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
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
John Mueller Google+-Post (https://plus.google.com/+JohnMueller/posts/FE6U8jMVxJj)"A good way to make it [a site] work in both worlds [mobile & desktop] would be to have a site that uses responsive web-design techniques to adjust to the size of the user’s device/settings."
Google, Sterling Research and SmithGeiger, What Users Want Most From Mobile Sites Today, July 2012. The report surveyed 1,088 US adult smartphone Internet users.
https://www.thinkwithgoogle.com/research-studies/what-users-want-most-from-mobile-sites-today.html
https://adwords.googleblog.com/2015/05/building-for-next-moment.html
benötigt umfassende Planung des Grids (https://moz.com/blog/seo-of-responsive-web-design) und des Contents
Was bliebt beim Verkleinern, was nicht?
spezielle Methoden um Ladezeiten gering zu halten
Bsp. Mobile User Journey:
„Hotels near me“ eigentlich nur mobil
Code-Scanner für Shops
In-store Maps für Geschäfte
Weiteres Problem: RWD funktioniert nicht für Feature Phones