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, Z...
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 recommendi...
Avinash Kaushik (Google), 2014
“If you have a non-mobile friendly
website, a responsive design website
will certainly suck...
Gary Illyes (Google), Mrz 2015
“Mobile-responsive sites are ‘easier for
Google’, but there is no difference in how
respons...
☢ 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 Suchmasch...
Bessere Usability
• Optimale Darstellung in allen
Bildschirmgrößen
• Bessere UX = bessere SX
• 61% der Nutzer brechen den
...
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 Se...
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 cons...
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
• Kein...
Viewport Meta Tag verwenden
• <meta name="viewport"
content="width=device-
width, initial-
scale=1.0“> im Head
• Passt Dar...
Bilder richtig einbinden
<picture>
<source media="(min-width: 800px)"
srcset="head.jpg, head-2x.jpg 2x">
<source media="(m...
Ladezeiten verringern
Wie erreicht man <1s?
• Serverantwortzeiten <200ms halten
• Zielseiten-Weiterleitungen vermeiden
• Serveranfragen bis zum ...
Alle Größen berücksichtigen
• Nicht nur eine mobile, eine
Tablet- und eine
Desktopgröße, sondern
wirklich responsive denke...
Alle relevanten Inhalte zeigen
• Inhalte können nicht einfach
weggelassen werden
• Navigation darf sich visuell
anpassen
•...
Niemals die Basics vergessen
• Passende Keywords
definieren
• Metadaten optimieren
• Optimierte Texte einsetzen
• Überschr...
… und optimale UX bieten
• Keine Pop-ups oder
Werbe-Interstitials
• Kurze, einfache, präzise
Menüs
• Einfache Rückkehr zur...
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!
Nächste SlideShare
Wird geladen in …5
×

Responsive Websites aus SEO-Sicht – MobileTechCon 2016

174 Aufrufe

Veröffentlicht am

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!

Veröffentlicht in: Marketing
0 Kommentare
0 Gefällt mir
Statistik
Notizen
  • Als Erste(r) kommentieren

  • Gehören Sie zu den Ersten, denen das gefällt!

Keine Downloads
Aufrufe
Aufrufe insgesamt
174
Auf SlideShare
0
Aus Einbettungen
0
Anzahl an Einbettungen
1
Aktionen
Geteilt
0
Downloads
1
Kommentare
0
Gefällt mir
0
Einbettungen 0
Keine Einbettungen

Keine Notizen für die Folie
  • http://techcrunch.com/2014/08/21/majority-of-digital-media-consumption-now-takes-place-in-mobile-apps/
  • https://www.consumerbarometer.com/en/graph-builder/?question=M1&filter=country:germany&hidden=2,5,6,7,8,9,10,11
  • http://www.smartinsights.com/marketplace-analysis/customer-analysis/digital-communications-use-statistics-2014/
  • http://www.thinkwithgoogle.com/research-studies/mobile-path-to-purchase-5-key-findings.html
  • http://www.smartinsights.com/marketplace-analysis/customer-analysis/new-free-worldwide-digital-media-statistics-reports-starting-with-uk-us-and-europe/
  • 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."
  • http://webmasters.stackexchange.com/questions/54054/does-google-serve-different-result-according-to-responsive-design
  • http://www.kaushik.net/avinash/digital-marketing-analytics-challenges/
  • http://www.seoclarity.net/google-mobile-update-analysis-part-2-11663/
  • 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
  • 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
  • Reports > Audience > Mobile > Devices > Primary Dimension „Screen Resolution"
  • Auf Landingpage-Ebene
  • https://developers.google.com/webmasters/mobile-sites/mobile-seo/
    https://developers.google.com/webmasters/mobile-sites/mobile-seo/responsive-design
  • https://developers.google.com/web/fundamentals/design-and-ui/responsive/fundamentals/set-the-viewport?hl=en
  • https://developers.google.com/web/fundamentals/design-and-ui/media/images/images-in-markup?hl=en
    https://responsiveimages.org/
  • https://blog.crazyegg.com/2016/08/11/responsive-website-killing-seo/
  • https://moz.com/learn/seo/on-page-factors
  • https://econsultancy.com/blog/68226-23-mobile-ux-mistakes-that-google-doesn-t-like/
  • http://www.seoclarity.net/google-mobile-update-analysis-part-2-11663/
  • Responsive Websites aus SEO-Sicht – MobileTechCon 2016

    1. 1. André Scharf | DigitasLBi | @andrescharf Responsive Websites aus SEO-Sicht
    2. 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. 3. MOBILE IST ÜBERALL Foto:AndreasEndermann,rp-online.de
    4. 4. Mobile überholt Desktop
    5. 5. Diversifizierte Gerätenutzung
    6. 6. Internetnutzung erfolgt mobil
    7. 7. Suche als Einstiegskanal
    8. 8. Variation im Tagesverlauf
    9. 9. Google empfiehlt RWD
    10. 10. RWD = BESSERE RANKINGS?
    11. 11. ☐ JA Foto:FettesBrot ☐ NEIN ☒ JEIN!
    12. 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. 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. 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. 15. ☢ 21. April 2015
    16. 16. STÄRKEN VON RWD Foto:http://fav.me/d5c9ck2
    17. 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. 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. 19. Device Fragmentation Foto:https://www.flickr.com/photos/lukew/
    20. 20. NACHTEILE VON RWD Foto:RoyalNavyofficialphotographer
    21. 21. Umfangreichere Konzeption Bilder:https://moz.com/blog/seo-of-responsive-web-design
    22. 22. Beispiel bbc.com
    23. 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. 24. WAS IST JETZT BESSER? Foto:MatthewTucker,buzzfeed
    25. 25. Google Analytics Mobile Overview Report
    26. 26. Mobile vs. Desktop Conversions
    27. 27. Site-Nutzung & -Aussehen prüfen
    28. 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. 29. Absprungraten prüfen
    30. 30. OPTIMALE UMSETZUNG Foto:https://www.flickr.com/photos/ohhsnap_me/13771862765/
    31. 31. Google Guidelines
    32. 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. 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. 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. 35. Ladezeiten verringern
    36. 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. 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. 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. 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. 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. 41. Wer eine schlechte, nicht optimierte Website responsive macht, erhält eine schlechte Responsive Website.
    42. 42. Folien gibt’s unter: http://de.slideshare.net/ascharf382 Danke fürs Zuhören!

    ×