View
187
Download
3
Category
Preview:
Citation preview
André Scharf | DigitasLBi | @andrescharf
Responsive Websitesaus SEO-Sicht
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é ScharfDirector SEO, DigitasLBi AGandre.scharf@digitaslbi.com@andrescharf
http://de.slideshare.net/ascharf382
MOBILE IST ÜBERALL
Foto
: And
reas
End
erm
ann,
rp-o
nlin
e.de
Mobile überholt Desktop
Diversifizierte Gerätenutzung
Internetnutzung erfolgt mobil
Suche als Einstiegskanal
Variation im Tagesverlauf
Google empfiehlt RWD
RWD = BESSERE RANKINGS?
☐ JA
Foto
: Fet
tes
Bro
t
☐ NEIN
☒ JEIN!
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.”
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.”
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.“
☢ 21. April 2015
STÄRKEN VON RWD
Foto
: http
://fa
v.m
e/d5
c9ck
2
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
: Dav
id S
hank
bone
- ht
tps:
//com
mon
s.w
ikim
edia
.org
/w/in
dex.
php?
curid
=149
8545
7
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
Device FragmentationFo
to: h
ttps:
//ww
w.fl
ickr
.com
/pho
tos/
luke
w/
NACHTEILE VON RWD
Foto
: Roy
al N
avy
offic
ial p
hoto
grap
her
Umfangreichere KonzeptionB
ilder
: http
s://m
oz.c
om/b
log/
seo-
of-r
espo
nsiv
e-w
eb-d
esig
n
Beispiel bbc.com
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
WAS IST JETZT BESSER?
Foto
: Mat
thew
Tuc
ker,
buzz
feed
Google Analytics Mobile Overview Report
Mobile vs. Desktop Conversions
Site-Nutzung & -Aussehen prüfen
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.
Absprungraten prüfen
OPTIMALE UMSETZUNG
Foto
: http
s://w
ww
.flic
kr.c
om/p
hoto
s/oh
hsna
p_m
e/13
7718
6276
5/
Google Guidelines
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
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
: Goo
gle
Dev
elop
er G
uide
lines
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
Ladezeiten verringern
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
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
: Goo
gle
Dev
elop
er G
uide
lines
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
: The
Dai
ly E
gg
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
: Ran
d Fi
shki
n, m
oz.c
om
… 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
: Pet
er D
obr,
http
s://d
e.w
ikip
edia
.org
/w/in
dex.
php?
curid
=496
8992
Wer eine schlechte,nicht optimierte Website
responsive macht, erhält eine schlechte Responsive
Website.
Folien gibt’s unter: http://de.slideshare.net/ascharf382
Danke fürs Zuhören!
Recommended