SlideShare ist ein Scribd-Unternehmen logo
André Scharf | DigitasLBi | @andrescharf
Responsive Websites
aus 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é Scharf
Director SEO, DigitasLBi AG
andre.scharf@digitaslbi.com
@andrescharf
http://de.slideshare.net/ascharf382
MOBILE IST ÜBERALL
Foto:AndreasEndermann,rp-online.de
Mobile überholt Desktop
Diversifizierte Gerätenutzung
Internetnutzung erfolgt mobil
Suche als Einstiegskanal
Variation im Tagesverlauf
Google empfiehlt RWD
RWD = BESSERE RANKINGS?
☐ JA
Foto:FettesBrot
☐ 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://fav.me/d5c9ck2
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
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 Fragmentation
Foto:https://www.flickr.com/photos/lukew/
NACHTEILE VON RWD
Foto:RoyalNavyofficialphotographer
Umfangreichere Konzeption
Bilder:https://moz.com/blog/seo-of-responsive-web-design
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:MatthewTucker,buzzfeed
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:https://www.flickr.com/photos/ohhsnap_me/13771862765/
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:GoogleDeveloperGuidelines
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:GoogleDeveloperGuidelines
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
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
… 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
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!

Weitere ähnliche Inhalte

Andere mochten auch

Lokale Suchmaschinenoptimierung und Snippet-Optimierung
Lokale Suchmaschinenoptimierung und Snippet-OptimierungLokale Suchmaschinenoptimierung und Snippet-Optimierung
Lokale Suchmaschinenoptimierung und Snippet-Optimierung
XOVI-Suite
 
FlowerNanny
FlowerNannyFlowerNanny
FlowerNanny
FlowerNanny
 
PRECENTACION DE SISTEMAS DE ESTRUCTURA EN LA EDIFICACIO.
PRECENTACION DE SISTEMAS DE ESTRUCTURA EN LA EDIFICACIO.PRECENTACION DE SISTEMAS DE ESTRUCTURA EN LA EDIFICACIO.
PRECENTACION DE SISTEMAS DE ESTRUCTURA EN LA EDIFICACIO.
milo1889
 
Glueckliches.neujahr!
Glueckliches.neujahr!Glueckliches.neujahr!
Glueckliches.neujahr!
Татьяна Галущенко
 
Weihnachtspräsente für kunden 2015
Weihnachtspräsente für kunden  2015Weihnachtspräsente für kunden  2015
Weihnachtspräsente für kunden 2015
Christian Fischer
 
Mit Bildern Geschichten erzählen
Mit Bildern Geschichten erzählenMit Bildern Geschichten erzählen
Mit Bildern Geschichten erzählen
Wir l(i)eben Maschinenbau
 
Im Auge der Zentrifuge 2013
Im Auge der Zentrifuge 2013Im Auge der Zentrifuge 2013
Im Auge der Zentrifuge 2013
Dialogische Ästhetik
 
Kittyfilms Berlin Filmproduktion
Kittyfilms Berlin FilmproduktionKittyfilms Berlin Filmproduktion
Kittyfilms Berlin Filmproduktion
KittyFilms
 
Tablet vs. Mobile
Tablet vs. Mobile Tablet vs. Mobile
Tablet vs. Mobile
Omnimakler360 GmbH
 
Pilzinfektion bei Kindern
Pilzinfektion bei KindernPilzinfektion bei Kindern
Pilzinfektion bei Kindern
Lisa187
 
FlowerNanny
FlowerNannyFlowerNanny
FlowerNanny
FlowerNanny
 
15 Dinge, die man statt einer 18.000€ Apple Watch kaufen kann (DE)
15 Dinge, die man statt einer 18.000€ Apple Watch kaufen kann (DE)15 Dinge, die man statt einer 18.000€ Apple Watch kaufen kann (DE)
15 Dinge, die man statt einer 18.000€ Apple Watch kaufen kann (DE)
Stylight
 
Slideshow running shoes-ch
Slideshow running shoes-chSlideshow running shoes-ch
Slideshow running shoes-chStylight
 
Dresden #1
Dresden #1Dresden #1
15 Dinge, die man statt einer 19.000 chf- Apple Watch kaufen kann (CH)
15 Dinge, die man statt einer 19.000 chf- Apple Watch kaufen kann (CH)15 Dinge, die man statt einer 19.000 chf- Apple Watch kaufen kann (CH)
15 Dinge, die man statt einer 19.000 chf- Apple Watch kaufen kann (CH)
Stylight
 
Identitätsmanagement der nächsten Generation mit der österreichischen Handy-S...
Identitätsmanagement der nächsten Generation mit der österreichischen Handy-S...Identitätsmanagement der nächsten Generation mit der österreichischen Handy-S...
Identitätsmanagement der nächsten Generation mit der österreichischen Handy-S...
egov_egiz
 
Die römische Baukunst
Die römische Baukunst Die römische Baukunst
Die römische Baukunst Jan Gerhards
 
Suzy meets Switzerland - Switzerland meets Silicon Valley
Suzy meets Switzerland - Switzerland meets Silicon ValleySuzy meets Switzerland - Switzerland meets Silicon Valley
Suzy meets Switzerland - Switzerland meets Silicon Valley
Markus Schneeberger Fotografie GmbH
 

Andere mochten auch (20)

Lokale Suchmaschinenoptimierung und Snippet-Optimierung
Lokale Suchmaschinenoptimierung und Snippet-OptimierungLokale Suchmaschinenoptimierung und Snippet-Optimierung
Lokale Suchmaschinenoptimierung und Snippet-Optimierung
 
FlowerNanny
FlowerNannyFlowerNanny
FlowerNanny
 
PRECENTACION DE SISTEMAS DE ESTRUCTURA EN LA EDIFICACIO.
PRECENTACION DE SISTEMAS DE ESTRUCTURA EN LA EDIFICACIO.PRECENTACION DE SISTEMAS DE ESTRUCTURA EN LA EDIFICACIO.
PRECENTACION DE SISTEMAS DE ESTRUCTURA EN LA EDIFICACIO.
 
Glueckliches.neujahr!
Glueckliches.neujahr!Glueckliches.neujahr!
Glueckliches.neujahr!
 
Weihnachtspräsente für kunden 2015
Weihnachtspräsente für kunden  2015Weihnachtspräsente für kunden  2015
Weihnachtspräsente für kunden 2015
 
Dbgecr 2012
Dbgecr 2012Dbgecr 2012
Dbgecr 2012
 
Mit Bildern Geschichten erzählen
Mit Bildern Geschichten erzählenMit Bildern Geschichten erzählen
Mit Bildern Geschichten erzählen
 
Im Auge der Zentrifuge 2013
Im Auge der Zentrifuge 2013Im Auge der Zentrifuge 2013
Im Auge der Zentrifuge 2013
 
Kittyfilms Berlin Filmproduktion
Kittyfilms Berlin FilmproduktionKittyfilms Berlin Filmproduktion
Kittyfilms Berlin Filmproduktion
 
Tablet vs. Mobile
Tablet vs. Mobile Tablet vs. Mobile
Tablet vs. Mobile
 
Pilzinfektion bei Kindern
Pilzinfektion bei KindernPilzinfektion bei Kindern
Pilzinfektion bei Kindern
 
FlowerNanny
FlowerNannyFlowerNanny
FlowerNanny
 
Buter lab - metras
Buter lab - metrasButer lab - metras
Buter lab - metras
 
15 Dinge, die man statt einer 18.000€ Apple Watch kaufen kann (DE)
15 Dinge, die man statt einer 18.000€ Apple Watch kaufen kann (DE)15 Dinge, die man statt einer 18.000€ Apple Watch kaufen kann (DE)
15 Dinge, die man statt einer 18.000€ Apple Watch kaufen kann (DE)
 
Slideshow running shoes-ch
Slideshow running shoes-chSlideshow running shoes-ch
Slideshow running shoes-ch
 
Dresden #1
Dresden #1Dresden #1
Dresden #1
 
15 Dinge, die man statt einer 19.000 chf- Apple Watch kaufen kann (CH)
15 Dinge, die man statt einer 19.000 chf- Apple Watch kaufen kann (CH)15 Dinge, die man statt einer 19.000 chf- Apple Watch kaufen kann (CH)
15 Dinge, die man statt einer 19.000 chf- Apple Watch kaufen kann (CH)
 
Identitätsmanagement der nächsten Generation mit der österreichischen Handy-S...
Identitätsmanagement der nächsten Generation mit der österreichischen Handy-S...Identitätsmanagement der nächsten Generation mit der österreichischen Handy-S...
Identitätsmanagement der nächsten Generation mit der österreichischen Handy-S...
 
Die römische Baukunst
Die römische Baukunst Die römische Baukunst
Die römische Baukunst
 
Suzy meets Switzerland - Switzerland meets Silicon Valley
Suzy meets Switzerland - Switzerland meets Silicon ValleySuzy meets Switzerland - Switzerland meets Silicon Valley
Suzy meets Switzerland - Switzerland meets Silicon Valley
 

Ähnlich wie Responsive Websites aus SEO-Sicht – MobileTechCon 2016

design
designdesign
SEO im Web Development - webinale 2016
SEO im Web Development - webinale 2016SEO im Web Development - webinale 2016
SEO im Web Development - webinale 2016
André Scharf
 
Responsive Mit Irhem Webseiten (German Edition)
Responsive Mit Irhem Webseiten (German Edition)Responsive Mit Irhem Webseiten (German Edition)
Responsive Mit Irhem Webseiten (German Edition)
Koombea
 
Digitale Mobilmachung - Wege zum mobilen Internetangebot
Digitale Mobilmachung - Wege zum mobilen Internetangebot Digitale Mobilmachung - Wege zum mobilen Internetangebot
Digitale Mobilmachung - Wege zum mobilen Internetangebot
Mann beißt Hund Agentur für Kommunikation
 
Responsive design
Responsive designResponsive design
Responsive design
Thomas Bähr
 
Responsive OXID Online Shops by WBL Konzept - Ressourcen sparen, Umsätze stei...
Responsive OXID Online Shops by WBL Konzept - Ressourcen sparen, Umsätze stei...Responsive OXID Online Shops by WBL Konzept - Ressourcen sparen, Umsätze stei...
Responsive OXID Online Shops by WBL Konzept - Ressourcen sparen, Umsätze stei...
WBL-Konzept
 
Was nicht passt wird responsive gemacht
Was nicht passt wird responsive gemachtWas nicht passt wird responsive gemacht
Was nicht passt wird responsive gemacht
Christoph Reinartz
 
Mobile SEO - Basics und wichtige Faktoren für die mobile Suche
Mobile SEO - Basics und wichtige Faktoren für die mobile SucheMobile SEO - Basics und wichtige Faktoren für die mobile Suche
Mobile SEO - Basics und wichtige Faktoren für die mobile Suche
get traction GmbH
 
Welcome to a New Reality - SEO goes Mobile First in 2017
Welcome to a New Reality - SEO goes Mobile First in 2017Welcome to a New Reality - SEO goes Mobile First in 2017
Welcome to a New Reality - SEO goes Mobile First in 2017
Bastian Grimm
 
Size Matters. Responsive-Design-Lösungen mit denkwerk (2013)
Size Matters. Responsive-Design-Lösungen mit denkwerk (2013)Size Matters. Responsive-Design-Lösungen mit denkwerk (2013)
Size Matters. Responsive-Design-Lösungen mit denkwerk (2013)
denkwerk GmbH
 
Google Tools für Fotografen
Google Tools für FotografenGoogle Tools für Fotografen
Google Tools für Fotografen
PARX
 
Welcome to a New Reality - SEO goes Mobile First in 2017
Welcome to a New Reality - SEO goes Mobile First in 2017Welcome to a New Reality - SEO goes Mobile First in 2017
Welcome to a New Reality - SEO goes Mobile First in 2017
Bastian Grimm
 
SEO Frühlingsserie #1
SEO Frühlingsserie #1 SEO Frühlingsserie #1
SEO Frühlingsserie #1
datenwerk innovationsagentur
 
Responsive Web Design - Ein Überblick
Responsive Web Design - Ein ÜberblickResponsive Web Design - Ein Überblick
Responsive Web Design - Ein Überblick
Amazee Labs
 
Mobile Produktentwicklung – wie geht das? Konzeption, Design, Entwicklung, Ve...
Mobile Produktentwicklung – wie geht das? Konzeption, Design, Entwicklung, Ve...Mobile Produktentwicklung – wie geht das? Konzeption, Design, Entwicklung, Ve...
Mobile Produktentwicklung – wie geht das? Konzeption, Design, Entwicklung, Ve...
Bokowsky + Laymann GmbH
 
Going Mobile: Überblick über Mobile Web
Going Mobile: Überblick über Mobile WebGoing Mobile: Überblick über Mobile Web
Going Mobile: Überblick über Mobile Webch.ch
 
SEO Webinar "Alles mobile oder was? So funktioniert Googles Mobile First Index."
SEO Webinar "Alles mobile oder was? So funktioniert Googles Mobile First Index."SEO Webinar "Alles mobile oder was? So funktioniert Googles Mobile First Index."
SEO Webinar "Alles mobile oder was? So funktioniert Googles Mobile First Index."
Namics
 
medien-sprechstunde: 5 Jahre / 5 Themen / 5 Referentinnen
medien-sprechstunde: 5 Jahre / 5 Themen / 5 Referentinnenmedien-sprechstunde: 5 Jahre / 5 Themen / 5 Referentinnen
medien-sprechstunde: 5 Jahre / 5 Themen / 5 Referentinnen
medien-sprechstunde
 
Crawling von CSS, JavaScript & Co. - Ressourcenblockierung & SEO
Crawling von CSS, JavaScript & Co. - Ressourcenblockierung & SEOCrawling von CSS, JavaScript & Co. - Ressourcenblockierung & SEO
Crawling von CSS, JavaScript & Co. - Ressourcenblockierung & SEO
Yourposition AG
 
Hovida design ppt
Hovida design pptHovida design ppt
Hovida design ppt
PatrickN12
 

Ähnlich wie Responsive Websites aus SEO-Sicht – MobileTechCon 2016 (20)

design
designdesign
design
 
SEO im Web Development - webinale 2016
SEO im Web Development - webinale 2016SEO im Web Development - webinale 2016
SEO im Web Development - webinale 2016
 
Responsive Mit Irhem Webseiten (German Edition)
Responsive Mit Irhem Webseiten (German Edition)Responsive Mit Irhem Webseiten (German Edition)
Responsive Mit Irhem Webseiten (German Edition)
 
Digitale Mobilmachung - Wege zum mobilen Internetangebot
Digitale Mobilmachung - Wege zum mobilen Internetangebot Digitale Mobilmachung - Wege zum mobilen Internetangebot
Digitale Mobilmachung - Wege zum mobilen Internetangebot
 
Responsive design
Responsive designResponsive design
Responsive design
 
Responsive OXID Online Shops by WBL Konzept - Ressourcen sparen, Umsätze stei...
Responsive OXID Online Shops by WBL Konzept - Ressourcen sparen, Umsätze stei...Responsive OXID Online Shops by WBL Konzept - Ressourcen sparen, Umsätze stei...
Responsive OXID Online Shops by WBL Konzept - Ressourcen sparen, Umsätze stei...
 
Was nicht passt wird responsive gemacht
Was nicht passt wird responsive gemachtWas nicht passt wird responsive gemacht
Was nicht passt wird responsive gemacht
 
Mobile SEO - Basics und wichtige Faktoren für die mobile Suche
Mobile SEO - Basics und wichtige Faktoren für die mobile SucheMobile SEO - Basics und wichtige Faktoren für die mobile Suche
Mobile SEO - Basics und wichtige Faktoren für die mobile Suche
 
Welcome to a New Reality - SEO goes Mobile First in 2017
Welcome to a New Reality - SEO goes Mobile First in 2017Welcome to a New Reality - SEO goes Mobile First in 2017
Welcome to a New Reality - SEO goes Mobile First in 2017
 
Size Matters. Responsive-Design-Lösungen mit denkwerk (2013)
Size Matters. Responsive-Design-Lösungen mit denkwerk (2013)Size Matters. Responsive-Design-Lösungen mit denkwerk (2013)
Size Matters. Responsive-Design-Lösungen mit denkwerk (2013)
 
Google Tools für Fotografen
Google Tools für FotografenGoogle Tools für Fotografen
Google Tools für Fotografen
 
Welcome to a New Reality - SEO goes Mobile First in 2017
Welcome to a New Reality - SEO goes Mobile First in 2017Welcome to a New Reality - SEO goes Mobile First in 2017
Welcome to a New Reality - SEO goes Mobile First in 2017
 
SEO Frühlingsserie #1
SEO Frühlingsserie #1 SEO Frühlingsserie #1
SEO Frühlingsserie #1
 
Responsive Web Design - Ein Überblick
Responsive Web Design - Ein ÜberblickResponsive Web Design - Ein Überblick
Responsive Web Design - Ein Überblick
 
Mobile Produktentwicklung – wie geht das? Konzeption, Design, Entwicklung, Ve...
Mobile Produktentwicklung – wie geht das? Konzeption, Design, Entwicklung, Ve...Mobile Produktentwicklung – wie geht das? Konzeption, Design, Entwicklung, Ve...
Mobile Produktentwicklung – wie geht das? Konzeption, Design, Entwicklung, Ve...
 
Going Mobile: Überblick über Mobile Web
Going Mobile: Überblick über Mobile WebGoing Mobile: Überblick über Mobile Web
Going Mobile: Überblick über Mobile Web
 
SEO Webinar "Alles mobile oder was? So funktioniert Googles Mobile First Index."
SEO Webinar "Alles mobile oder was? So funktioniert Googles Mobile First Index."SEO Webinar "Alles mobile oder was? So funktioniert Googles Mobile First Index."
SEO Webinar "Alles mobile oder was? So funktioniert Googles Mobile First Index."
 
medien-sprechstunde: 5 Jahre / 5 Themen / 5 Referentinnen
medien-sprechstunde: 5 Jahre / 5 Themen / 5 Referentinnenmedien-sprechstunde: 5 Jahre / 5 Themen / 5 Referentinnen
medien-sprechstunde: 5 Jahre / 5 Themen / 5 Referentinnen
 
Crawling von CSS, JavaScript & Co. - Ressourcenblockierung & SEO
Crawling von CSS, JavaScript & Co. - Ressourcenblockierung & SEOCrawling von CSS, JavaScript & Co. - Ressourcenblockierung & SEO
Crawling von CSS, JavaScript & Co. - Ressourcenblockierung & SEO
 
Hovida design ppt
Hovida design pptHovida design ppt
Hovida design ppt
 

Mehr von André Scharf

SEO for Free - webinale 2017
SEO for Free - webinale 2017SEO for Free - webinale 2017
SEO for Free - webinale 2017
André Scharf
 
Website Relaunch SEO - WebTechCon 2016
Website Relaunch SEO - WebTechCon 2016Website Relaunch SEO - WebTechCon 2016
Website Relaunch SEO - WebTechCon 2016
André Scharf
 
Warum SEO (auch) Deine Aufgabe ist - WebTechCon 2016
Warum SEO (auch) Deine Aufgabe ist - WebTechCon 2016Warum SEO (auch) Deine Aufgabe ist - WebTechCon 2016
Warum SEO (auch) Deine Aufgabe ist - WebTechCon 2016
André Scharf
 
Agile SEO - webinale 2015
Agile SEO - webinale 2015Agile SEO - webinale 2015
Agile SEO - webinale 2015
André Scharf
 
Grundlagen Webanalytics - Gründerszene
Grundlagen Webanalytics - GründerszeneGrundlagen Webanalytics - Gründerszene
Grundlagen Webanalytics - Gründerszene
André Scharf
 
SEO für Überlebende - webinale 2013
SEO für Überlebende - webinale 2013SEO für Überlebende - webinale 2013
SEO für Überlebende - webinale 2013
André Scharf
 

Mehr von André Scharf (6)

SEO for Free - webinale 2017
SEO for Free - webinale 2017SEO for Free - webinale 2017
SEO for Free - webinale 2017
 
Website Relaunch SEO - WebTechCon 2016
Website Relaunch SEO - WebTechCon 2016Website Relaunch SEO - WebTechCon 2016
Website Relaunch SEO - WebTechCon 2016
 
Warum SEO (auch) Deine Aufgabe ist - WebTechCon 2016
Warum SEO (auch) Deine Aufgabe ist - WebTechCon 2016Warum SEO (auch) Deine Aufgabe ist - WebTechCon 2016
Warum SEO (auch) Deine Aufgabe ist - WebTechCon 2016
 
Agile SEO - webinale 2015
Agile SEO - webinale 2015Agile SEO - webinale 2015
Agile SEO - webinale 2015
 
Grundlagen Webanalytics - Gründerszene
Grundlagen Webanalytics - GründerszeneGrundlagen Webanalytics - Gründerszene
Grundlagen Webanalytics - Gründerszene
 
SEO für Überlebende - webinale 2013
SEO für Überlebende - webinale 2013SEO für Überlebende - webinale 2013
SEO für Überlebende - webinale 2013
 

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
  • 10. RWD = BESSERE RANKINGS?
  • 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
  • 24. WAS IST JETZT BESSER? Foto:MatthewTucker,buzzfeed
  • 25. Google Analytics Mobile Overview Report
  • 26. Mobile vs. Desktop Conversions
  • 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
  • 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!

Hinweis der Redaktion

  1. http://techcrunch.com/2014/08/21/majority-of-digital-media-consumption-now-takes-place-in-mobile-apps/
  2. https://www.consumerbarometer.com/en/graph-builder/?question=M1&filter=country:germany&hidden=2,5,6,7,8,9,10,11
  3. http://www.smartinsights.com/marketplace-analysis/customer-analysis/digital-communications-use-statistics-2014/
  4. http://www.thinkwithgoogle.com/research-studies/mobile-path-to-purchase-5-key-findings.html
  5. http://www.smartinsights.com/marketplace-analysis/customer-analysis/new-free-worldwide-digital-media-statistics-reports-starting-with-uk-us-and-europe/
  6. 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."
  7. http://webmasters.stackexchange.com/questions/54054/does-google-serve-different-result-according-to-responsive-design
  8. http://www.kaushik.net/avinash/digital-marketing-analytics-challenges/
  9. http://www.seoclarity.net/google-mobile-update-analysis-part-2-11663/
  10. http://atom.smasher.org/error/?icon=skull&style=xp&title=Error%3A+Mobilegeddon&url=&text=Your+Website+is+not+mobile+friendly!&b1=Go+Responsive&b2=Go+Mobile&b3=Shut+Down
  11. 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
  12. 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
  13. 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
  14. Reports > Audience > Mobile > Devices > Primary Dimension „Screen Resolution"
  15. Auf Landingpage-Ebene
  16. https://developers.google.com/webmasters/mobile-sites/mobile-seo/ https://developers.google.com/webmasters/mobile-sites/mobile-seo/responsive-design
  17. https://developers.google.com/web/fundamentals/design-and-ui/responsive/fundamentals/set-the-viewport?hl=en
  18. https://developers.google.com/web/fundamentals/design-and-ui/media/images/images-in-markup?hl=en https://responsiveimages.org/
  19. https://blog.crazyegg.com/2016/08/11/responsive-website-killing-seo/
  20. https://moz.com/learn/seo/on-page-factors
  21. https://econsultancy.com/blog/68226-23-mobile-ux-mistakes-that-google-doesn-t-like/
  22. http://www.seoclarity.net/google-mobile-update-analysis-part-2-11663/