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

Responsive Websites aus SEO-Sicht – MobileTechCon 2016

Embed Size (px)

Citation preview

Page 1: Responsive Websites aus SEO-Sicht – MobileTechCon 2016

André Scharf | DigitasLBi | @andrescharf

Responsive Websitesaus SEO-Sicht

Page 2: Responsive Websites aus SEO-Sicht – MobileTechCon 2016

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 [email protected]@andrescharf

http://de.slideshare.net/ascharf382

Page 3: Responsive Websites aus SEO-Sicht – MobileTechCon 2016

MOBILE IST ÜBERALL

Foto

: And

reas

End

erm

ann,

rp-o

nlin

e.de

Page 4: Responsive Websites aus SEO-Sicht – MobileTechCon 2016

Mobile überholt Desktop

Page 5: Responsive Websites aus SEO-Sicht – MobileTechCon 2016

Diversifizierte Gerätenutzung

Page 6: Responsive Websites aus SEO-Sicht – MobileTechCon 2016

Internetnutzung erfolgt mobil

Page 7: Responsive Websites aus SEO-Sicht – MobileTechCon 2016

Suche als Einstiegskanal

Page 8: Responsive Websites aus SEO-Sicht – MobileTechCon 2016

Variation im Tagesverlauf

Page 9: Responsive Websites aus SEO-Sicht – MobileTechCon 2016

Google empfiehlt RWD

Page 10: Responsive Websites aus SEO-Sicht – MobileTechCon 2016

RWD = BESSERE RANKINGS?

Page 11: Responsive Websites aus SEO-Sicht – MobileTechCon 2016

☐ JA

Foto

: Fet

tes

Bro

t

☐ NEIN

☒ JEIN!

Page 12: Responsive Websites aus SEO-Sicht – MobileTechCon 2016

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.”

Page 13: Responsive Websites aus SEO-Sicht – MobileTechCon 2016

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.”

Page 14: Responsive Websites aus SEO-Sicht – MobileTechCon 2016

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.“

Page 15: Responsive Websites aus SEO-Sicht – MobileTechCon 2016

☢ 21. April 2015

Page 16: Responsive Websites aus SEO-Sicht – MobileTechCon 2016

STÄRKEN VON RWD

Foto

: http

://fa

v.m

e/d5

c9ck

2

Page 17: Responsive Websites aus SEO-Sicht – MobileTechCon 2016

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

Page 18: Responsive Websites aus SEO-Sicht – MobileTechCon 2016

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

Page 19: Responsive Websites aus SEO-Sicht – MobileTechCon 2016

Device FragmentationFo

to: h

ttps:

//ww

w.fl

ickr

.com

/pho

tos/

luke

w/

Page 20: Responsive Websites aus SEO-Sicht – MobileTechCon 2016

NACHTEILE VON RWD

Foto

: Roy

al N

avy

offic

ial p

hoto

grap

her

Page 21: Responsive Websites aus SEO-Sicht – MobileTechCon 2016

Umfangreichere KonzeptionB

ilder

: http

s://m

oz.c

om/b

log/

seo-

of-r

espo

nsiv

e-w

eb-d

esig

n

Page 22: Responsive Websites aus SEO-Sicht – MobileTechCon 2016

Beispiel bbc.com

Page 23: Responsive Websites aus SEO-Sicht – MobileTechCon 2016

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

Page 24: Responsive Websites aus SEO-Sicht – MobileTechCon 2016

WAS IST JETZT BESSER?

Foto

: Mat

thew

Tuc

ker,

buzz

feed

Page 25: Responsive Websites aus SEO-Sicht – MobileTechCon 2016

Google Analytics Mobile Overview Report

Page 26: Responsive Websites aus SEO-Sicht – MobileTechCon 2016

Mobile vs. Desktop Conversions

Page 27: Responsive Websites aus SEO-Sicht – MobileTechCon 2016

Site-Nutzung & -Aussehen prüfen

Page 28: Responsive Websites aus SEO-Sicht – MobileTechCon 2016

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.

Page 29: Responsive Websites aus SEO-Sicht – MobileTechCon 2016

Absprungraten prüfen

Page 30: Responsive Websites aus SEO-Sicht – MobileTechCon 2016

OPTIMALE UMSETZUNG

Foto

: http

s://w

ww

.flic

kr.c

om/p

hoto

s/oh

hsna

p_m

e/13

7718

6276

5/

Page 31: Responsive Websites aus SEO-Sicht – MobileTechCon 2016

Google Guidelines

Page 32: Responsive Websites aus SEO-Sicht – MobileTechCon 2016

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

Page 33: Responsive Websites aus SEO-Sicht – MobileTechCon 2016

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

Page 34: Responsive Websites aus SEO-Sicht – MobileTechCon 2016

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

Page 35: Responsive Websites aus SEO-Sicht – MobileTechCon 2016

Ladezeiten verringern

Page 36: Responsive Websites aus SEO-Sicht – MobileTechCon 2016

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

Page 37: Responsive Websites aus SEO-Sicht – MobileTechCon 2016

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

Page 38: Responsive Websites aus SEO-Sicht – MobileTechCon 2016

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

Page 39: Responsive Websites aus SEO-Sicht – MobileTechCon 2016

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

Page 40: Responsive Websites aus SEO-Sicht – MobileTechCon 2016

… 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

Page 41: Responsive Websites aus SEO-Sicht – MobileTechCon 2016

Wer eine schlechte,nicht optimierte Website

responsive macht, erhält eine schlechte Responsive

Website.

Page 42: Responsive Websites aus SEO-Sicht – MobileTechCon 2016

Folien gibt’s unter: http://de.slideshare.net/ascharf382

Danke fürs Zuhören!