In den Suchergebnissen ganz oben zu stehen, ist auf kleinen Bildschirmen noch viel wichtiger, als auf dem Desktop. Laut Google wird es schon Ende 2014 mehr Mobile- als Desktop-Suchanfragen geben und kein Unternehmen kann es sich heute noch leisten, die mobilen Nutzer zu ignorieren. Eigentlich, aber immer noch vertagen viele Unternehmen dieses Thema lieber und verlieren als Konsequenz im besten Fall Umsatz, wahrscheinlicher aber den Anschluss an die mobile Zukunft ihrer Nutzer. Wie gut funktionieren etablierte SEO-Strategien für eine mobile Welt, welche Analysemöglichkeiten gibt es? Lernen Sie in dieser Präsentation die Mobile-SEO-Grundlagen für die mobile Suche.

1. © 121WATT - André Goldmann
Mobile SEO
…in 20 Minuten
München, 17.03. - 18.03.2015

2. © 121WATT - André Goldmann
André Goldmann
• Seit 1996 Front-End Entwickler
& Optimierer aus Leidenschaft
• CTO bei der 121WATT
Geschäftsinhaber bei Pixeldreher
• Seminare bei der 121WATT:
Mobile SEO
Technical SEO & OnPage
WordPress Advanced
• Twitter: @pixeldreher
E-Mail: andre.goldmann@121watt.de

3. © 121WATT - André Goldmann
Privates Projekt: nageldesign-galerie.de
3
3.400.000 Sitzungen
25.300.000 Seitenaufrufe
1 TB Traffic im Monat

4. © 121WATT - André Goldmann
Privates Projekt: nageldesign-galerie.de
3
3.400.000 Sitzungen
25.300.000 Seitenaufrufe
1 TB Traffic im Monat
80% Mobile-Traffic

5. © 121WATT - André Goldmann
Desktop- vs. Mobile Ergebnisse

6. © 121WATT - André Goldmann
Desktop- vs. Mobile Ergebnisse

7. © 121WATT - André Goldmann
Desktop- vs. Mobile Ergebnisse

8. © 121WATT - André Goldmann
Desktop- vs. Mobile Ergebnisse

9. © 121WATT - André Goldmann
Desktop- vs. Mobile Ergebnisse

10. © 121WATT - André Goldmann
Die Entwicklung des mobilen Internet

11. © 121WATT - André Goldmann
Die Entwicklung des mobilen Internet
2011 2012 2013 2014 2015

12. © 121WATT - André Goldmann
Die Entwicklung des mobilen Internet
2011 2012 2013 2014 2015
Mobile Googlebot

13. © 121WATT - André Goldmann
Die Entwicklung des mobilen Internet
2011 2012 2013 2014 2015
Veränderung der
mobilen Rankings
Mobile Googlebot

14. © 121WATT - André Goldmann
Die Entwicklung des mobilen Internet
2011 2012 2013 2014 2015
Veränderung der
mobilen Rankings
Mobile Googlebot

15. © 121WATT - André Goldmann
Die Entwicklung des mobilen Internet
2011 2012 2013 2014 2015
Veränderung der
mobilen Rankings
Crawling Fehler
Mobile Googlebot

16. © 121WATT - André Goldmann
Die Entwicklung des mobilen Internet
2011 2012 2013 2014 2015
Veränderung der
mobilen Rankings
Crawling Fehler
Mobile Googlebot

17. © 121WATT - André Goldmann
Die Entwicklung des mobilen Internet
2011 2012 2013 2014 2015
Veränderung der
mobilen Rankings
Crawling Fehler
Mobile Searchquery
Statistiken verfügbar
Mobile Googlebot

18. © 121WATT - André Goldmann
Die Entwicklung des mobilen Internet
2011 2012 2013 2014 2015
Veränderung der
mobilen Rankings
Crawling Fehler
Mobile Searchquery
Statistiken verfügbar
Mobile Googlebot

19. © 121WATT - André Goldmann
Die Entwicklung des mobilen Internet
2011 2012 2013 2014 2015
Veränderung der
mobilen Rankings
Crawling Fehler
PageSpeed Insights
Mobile Searchquery
Statistiken verfügbar
Mobile Googlebot

20. © 121WATT - André Goldmann
Die Entwicklung des mobilen Internet
2011 2012 2013 2014 2015
Veränderung der
mobilen Rankings
Crawling Fehler
PageSpeed Insights
Mobile Searchquery
Statistiken verfügbar
Mobile Googlebot

21. © 121WATT - André Goldmann
Die Entwicklung des mobilen Internet
2011 2012 2013 2014 2015
Veränderung der
mobilen Rankings
Crawling Fehler
PageSpeed Insights
Mobile Searchquery
Statistiken verfügbar
Mobile Googlebot
Warnhinweis

22. © 121WATT - André Goldmann
Die Entwicklung des mobilen Internet
2011 2012 2013 2014 2015
Veränderung der
mobilen Rankings
Crawling Fehler
PageSpeed Insights
Mobile Searchquery
Statistiken verfügbar
Mobile Googlebot
Warnhinweis

23. © 121WATT - André Goldmann
Die Entwicklung des mobilen Internet
2011 2012 2013 2014 2015
Veränderung der
mobilen Rankings
Crawling Fehler
PageSpeed Insights
Mobile Usability
Mobile Searchquery
Statistiken verfügbar
Mobile Googlebot
Warnhinweis

24. © 121WATT - André Goldmann
Die Entwicklung des mobilen Internet
2011 2012 2013 2014 2015
Veränderung der
mobilen Rankings
Crawling Fehler
PageSpeed Insights
Mobile Usability
Mobile Searchquery
Statistiken verfügbar
Mobile Googlebot
Warnhinweis

25. © 121WATT - André Goldmann
Die Entwicklung des mobilen Internet
2011 2012 2013 2014 2015
Veränderung der
mobilen Rankings
Crawling Fehler
„Für Mobilgeräte“
PageSpeed Insights
Mobile Usability
Mobile Searchquery
Statistiken verfügbar
Mobile Googlebot
Warnhinweis

26. © 121WATT - André Goldmann
Die Entwicklung des mobilen Internet
2011 2012 2013 2014 2015
Veränderung der
mobilen Rankings
Crawling Fehler
„Für Mobilgeräte“
PageSpeed Insights
Mobile Usability
Mobile Searchquery
Statistiken verfügbar
Mobile Googlebot
Warnhinweis

27. © 121WATT - André Goldmann
Die Entwicklung des mobilen Internet
2011 2012 2013 2014 2015
Veränderung der
mobilen Rankings
Crawling Fehler
„Für Mobilgeräte“
PageSpeed Insights
Mobile Testing-Tool
Mobile Usability
Mobile Searchquery
Statistiken verfügbar
Mobile Googlebot
Warnhinweis

28. © 121WATT - André Goldmann
Die Entwicklung des mobilen Internet
2011 2012 2013 2014 2015
Veränderung der
mobilen Rankings
Crawling Fehler
„Für Mobilgeräte“
PageSpeed Insights
Mobile Testing-Tool
Google verschickt
Usability Warnungen
Mobile Usability
Mobile Searchquery
Statistiken verfügbar
Mobile Googlebot
Warnhinweis

29. © 121WATT - André Goldmann
Die Entwicklung des mobilen Internet
2011 2012 2013 2014 2015
Veränderung der
mobilen Rankings
Crawling Fehler
„Für Mobilgeräte“
PageSpeed Insights
Mobile Testing-Tool
Google verschickt
Usability Warnungen
Mobile Usability
Mobile Searchquery
Statistiken verfügbar
Mobile Googlebot
Warnhinweis
21.04.: „Für Mobilgeräte“
wird zum Ranking-
signal

30. © 121WATT - André Goldmann
Konfiguration Ihrer mobilen Website
3 Varianten im Vergleich

31. © 121WATT - André Goldmann
1. Responsive Webdesign
Bildquelle: http://www.elezea.com/2013/11/rwd-content-modules/

32. © 121WATT - André Goldmann
1. Responsive Webdesign
Bildquelle: http://www.elezea.com/2013/11/rwd-content-modules/

33. © 121WATT - André Goldmann
Was ist responsives Webdesign?

34. © 121WATT - André Goldmann
Was ist responsives Webdesign?

35. © 121WATT - André Goldmann
Was ist responsives Webdesign?

36. © 121WATT - André Goldmann
Was ist responsives Webdesign?

37. © 121WATT - André Goldmann
Was ist responsives Webdesign?

38. © 121WATT - André Goldmann
Crawlersteuerung mit der robots.txt
Wichtig: Der Crawler muss Zugriff auf die CSS & JS
Dateien haben, um ein responsives Webdesign
erkennen zu können!

39. © 121WATT - André Goldmann
Pro/Contra: Responsive Webdesign
Contra:
Möglicher Relaunch
notwendig
Unterschiedliche Inhalte nicht
möglich (zwischen „Mobile“ &
Desktop oder Tablet)
Optimierung von Mobile UX
schwieriger
Pro:
Keine doppelten Inhalte
möglich
Geringere „Erhaltungskosten“
Keine Weiterleitungen nötig

40. © 121WATT - André Goldmann
2. Dynamische Bereitstellung

41. © 121WATT - André Goldmann
Was ist eine dynamische Bereitstellung?
„Bei der dynamischen Bereitstellung erhalten einzelne
Geräte unter derselben URL unterschiedlichen Code.“

42. © 121WATT - André Goldmann
Vary-HTTP-Header
Der Vary-HTTP-Header ist Teil der Antwort des Servers auf eine Anfrage des
Websitebesuchers. Hier ein Beispiel:
27

43. © 121WATT - André Goldmann
Gleiche URL — unterschiedliche Codebasis

44. © 121WATT - André Goldmann
Pro/Contra: Dynamische Bereitstellung
Contra:
Komplexer Aufwand für die
Integration
Höhere Kosten in der
Wartung/Bereitstellung
Pro:
Keine Gefahr von Duplicate
Content
Unterschiedliche Inhalte je
Endgerät
Bessere Mobile UX

45. © 121WATT - André Goldmann
3. Unterschiedliche URLs

46. © 121WATT - André Goldmann
Unterschiedliche URLs

47. © 121WATT - André Goldmann
Pro/Contra: Unterschiedliche URLs
Contra:
Gefahr von doppelten Inhalten
Link-Popularität wird geteilt
(neues Linkprofil)
Zusätzliches crawlen
notwendig
Höhere Kosten durch separate
Entwicklung
Pro:
Einfache Integration
Unterschiedliche Inhalte
möglich (zwischen m. & www.)
Bessere Mobile UX

48. © 121WATT - André Goldmann
Tipps zu „Unterschiedliche URLs“
Nutze eine identische URL Struktur
www.121watt.de/seminare/mobile-seo-seminar
m.121watt.de/seminare/mobile-seo-seminar
Crawler richtig steuern
rel="alternate" auf Desktop-Version
rel="canonical" auf Mobile-Version
Crossverlinkung zwischen Desktop- & Mobile-Website herstellen
33

49. © 121WATT - André Goldmann
Optimierung der (mobilen) Ladezeit

50. © 121WATT - André Goldmann
Status Quo: Pingdom Tools
35
tools.pingdom.com/fpt/

51. © 121WATT - André Goldmann
Optimierung der mobilen Ladezeit
https://developers.google.com/speed/pagespeed/insights/

52. © 121WATT - André Goldmann
Checklisten für den Einstieg in die Optimierung

53. © 121WATT - André Goldmann
Ladezeit-Optimierung
Server:
38

54. © 121WATT - André Goldmann
Ladezeit-Optimierung
Server:
Caching & GZIP Kompression aktivieren
38

55. © 121WATT - André Goldmann
Ladezeit-Optimierung
Server:
Caching & GZIP Kompression aktivieren
HTTP Requests reduzieren
38

56. © 121WATT - André Goldmann
Ladezeit-Optimierung
Server:
Caching & GZIP Kompression aktivieren
HTTP Requests reduzieren
Weiterleitungen vermeiden & 404 Fehler (bei Bildern, Skripten & Co.)
beseitigen
38

57. © 121WATT - André Goldmann
Ladezeit-Optimierung
Server:
Caching & GZIP Kompression aktivieren
HTTP Requests reduzieren
Weiterleitungen vermeiden & 404 Fehler (bei Bildern, Skripten & Co.)
beseitigen
Weiterleitungsketten auseinandernehmen
38

58. © 121WATT - André Goldmann
Ladezeit-Optimierung
Server:
Caching & GZIP Kompression aktivieren
HTTP Requests reduzieren
Weiterleitungen vermeiden & 404 Fehler (bei Bildern, Skripten & Co.)
beseitigen
Weiterleitungsketten auseinandernehmen
Datenbanken optimieren
38

59. © 121WATT - André Goldmann
Ladezeit-Optimierung
Server:
Caching & GZIP Kompression aktivieren
HTTP Requests reduzieren
Weiterleitungen vermeiden & 404 Fehler (bei Bildern, Skripten & Co.)
beseitigen
Weiterleitungsketten auseinandernehmen
Datenbanken optimieren
Fertige Social Widgets (von Facebook & Co.) bitte nicht nutzen ;)
38

60. © 121WATT - André Goldmann
39
HTML:
Ladezeit Optimierung

61. © 121WATT - André Goldmann
39
HTML:
HTML Kommentare entfernen
Ladezeit Optimierung

62. © 121WATT - André Goldmann
39
HTML:
HTML Kommentare entfernen
HTML Code komprimieren & ungenutztes CSS entfernen
Ladezeit Optimierung

63. © 121WATT - André Goldmann
39
HTML:
HTML Kommentare entfernen
HTML Code komprimieren & ungenutztes CSS entfernen
Inline CSS & JS entfernen und in Dateien ausführen (können gecached werden)
Ladezeit Optimierung

64. © 121WATT - André Goldmann
39
HTML:
HTML Kommentare entfernen
HTML Code komprimieren & ungenutztes CSS entfernen
Inline CSS & JS entfernen und in Dateien ausführen (können gecached werden)
CSS: Nicht per @import neue Dateien „nachladen“
Ladezeit Optimierung

65. © 121WATT - André Goldmann
39
HTML:
HTML Kommentare entfernen
HTML Code komprimieren & ungenutztes CSS entfernen
Inline CSS & JS entfernen und in Dateien ausführen (können gecached werden)
CSS: Nicht per @import neue Dateien „nachladen“
CSS & JavaScript komprimieren und an der richtigen Stelle integrieren (am
besten via CDN oder Subdomain)
Ladezeit Optimierung

66. © 121WATT - André Goldmann
39
HTML:
HTML Kommentare entfernen
HTML Code komprimieren & ungenutztes CSS entfernen
Inline CSS & JS entfernen und in Dateien ausführen (können gecached werden)
CSS: Nicht per @import neue Dateien „nachladen“
CSS & JavaScript komprimieren und an der richtigen Stelle integrieren (am
besten via CDN oder Subdomain)
CSS3 statt Grafiken für Buttons und Co. nutzen
Ladezeit Optimierung

67. © 121WATT - André Goldmann
39
HTML:
HTML Kommentare entfernen
HTML Code komprimieren & ungenutztes CSS entfernen
Inline CSS & JS entfernen und in Dateien ausführen (können gecached werden)
CSS: Nicht per @import neue Dateien „nachladen“
CSS & JavaScript komprimieren und an der richtigen Stelle integrieren (am
besten via CDN oder Subdomain)
CSS3 statt Grafiken für Buttons und Co. nutzen
headjs.com <— kombiniert JS Dateien und lädt sie automatisch asynchron
Ladezeit Optimierung

68. © 121WATT - André Goldmann
39
HTML:
HTML Kommentare entfernen
HTML Code komprimieren & ungenutztes CSS entfernen
Inline CSS & JS entfernen und in Dateien ausführen (können gecached werden)
CSS: Nicht per @import neue Dateien „nachladen“
CSS & JavaScript komprimieren und an der richtigen Stelle integrieren (am
besten via CDN oder Subdomain)
CSS3 statt Grafiken für Buttons und Co. nutzen
headjs.com <— kombiniert JS Dateien und lädt sie automatisch asynchron
Inhalte per AJAX nachladen (gerne auch das, was nicht im Sichtbereich der
Nutzers ist)
Ladezeit Optimierung

69. © 121WATT - André Goldmann
40
Bilder:
Ladezeit Optimierung

70. © 121WATT - André Goldmann
40
Bilder:
Bildgrößen und Datei-Formate richtig wählen (.jpg für Fotos/
Hintergrundgrafiken; .png oder .gif für Layoutgrafiken; Alternativ auch .svg)
Ladezeit Optimierung

71. © 121WATT - André Goldmann
40
Bilder:
Bildgrößen und Datei-Formate richtig wählen (.jpg für Fotos/
Hintergrundgrafiken; .png oder .gif für Layoutgrafiken; Alternativ auch .svg)
Bilder nicht durch CSS- oder HTML-Angaben skalieren
Ladezeit Optimierung

72. © 121WATT - André Goldmann
40
Bilder:
Bildgrößen und Datei-Formate richtig wählen (.jpg für Fotos/
Hintergrundgrafiken; .png oder .gif für Layoutgrafiken; Alternativ auch .svg)
Bilder nicht durch CSS- oder HTML-Angaben skalieren
Bildqualität reduzieren
Ladezeit Optimierung

73. © 121WATT - André Goldmann
40
Bilder:
Bildgrößen und Datei-Formate richtig wählen (.jpg für Fotos/
Hintergrundgrafiken; .png oder .gif für Layoutgrafiken; Alternativ auch .svg)
Bilder nicht durch CSS- oder HTML-Angaben skalieren
Bildqualität reduzieren
Icons als Font laden (http://fontawesome.io/, http://fontello.com/)
Ladezeit Optimierung

74. © 121WATT - André Goldmann
40
Bilder:
Bildgrößen und Datei-Formate richtig wählen (.jpg für Fotos/
Hintergrundgrafiken; .png oder .gif für Layoutgrafiken; Alternativ auch .svg)
Bilder nicht durch CSS- oder HTML-Angaben skalieren
Bildqualität reduzieren
Icons als Font laden (http://fontawesome.io/, http://fontello.com/)
Einsatz vom <picture>-Element überdenken
Ladezeit Optimierung

75. © 121WATT - André Goldmann
40
Bilder:
Bildgrößen und Datei-Formate richtig wählen (.jpg für Fotos/
Hintergrundgrafiken; .png oder .gif für Layoutgrafiken; Alternativ auch .svg)
Bilder nicht durch CSS- oder HTML-Angaben skalieren
Bildqualität reduzieren
Icons als Font laden (http://fontawesome.io/, http://fontello.com/)
Einsatz vom <picture>-Element überdenken
Bilder per CDN laden
Ladezeit Optimierung

76. © 121WATT - André Goldmann
Google empfiehlt: Make the Web faster
https://developers.google.com/speed/

77. © 121WATT - André Goldmann
Bonus
Strukturierte Daten für (mobilen) Content

78. © 121WATT - André Goldmann
Strukturierte Daten für (mobilen) Content

79. © 121WATT - André Goldmann
Strukturierte Daten für (mobilen) Content

80. © 121WATT - André Goldmann
Strukturierte Daten für (mobilen) Content
https://support.google.com/webmasters/answer/99170?hl=de

81. © 121WATT - André Goldmann
Data Highlighter in den Google Webmaster Tools
https://www.google.com/webmasters/tools/data-highlighter?hl=de

82. © 121WATT - André Goldmann
Data Highlighter in den Google Webmaster Tools
https://www.google.com/webmasters/tools/data-highlighter?hl=de

83. © 121WATT - André Goldmann
Strukturierte Daten für (mobilen) Content
http://schema.org/

84. © 121WATT - André Goldmann
„Erfolgskontrolle“ für mobile Sichtbarkeit
https://www.google.com/webmasters/tools/top-search-queries?hl=de

85. © 121WATT - André Goldmann
„Erfolgskontrolle“ für mobile Sichtbarkeit
https://www.google.com/webmasters/tools/top-search-queries?hl=de

86. © 121WATT - André Goldmann
„Erfolgskontrolle“ für mobile Sichtbarkeit
https://www.google.com/webmasters/tools/top-search-queries?hl=de

87. © 121WATT - André Goldmann
„Erfolgskontrolle“ für mobile Sichtbarkeit

88. © 121WATT - André Goldmann
„Erfolgskontrolle“ für mobile Sichtbarkeit

89. © 121WATT - André Goldmann
„Erfolgskontrolle“ für mobile Sichtbarkeit

90. © 121WATT - André Goldmann
„Erfolgskontrolle“ für mobile Sichtbarkeit

91. © 121WATT - André Goldmann
„Erfolgskontrolle“ für mobile Sichtbarkeit

92. © 121WATT - André Goldmann
„Erfolgskontrolle“ für mobile Sichtbarkeit
https://www.google.com/webmasters/tools/crawl-errors?hl=de

93. © 121WATT - André Goldmann
„Erfolgskontrolle“ für mobile Sichtbarkeit
https://www.google.com/webmasters/tools/crawl-errors?hl=de

94. © 121WATT - André Goldmann
„Erfolgskontrolle“ für mobile Sichtbarkeit
https://www.google.com/webmasters/tools/crawl-errors?hl=de

95. © 121WATT - André Goldmann
Was macht eine Website „mobile friendly“?
Eine Website ist mobilfreundlich wenn Sie…
51

96. © 121WATT - André Goldmann
Was macht eine Website „mobile friendly“?
Eine Website ist mobilfreundlich wenn Sie…
• Inhalte auf einem Telefon dem Medium entsprechend darstellen kann
51

97. © 121WATT - André Goldmann
Was macht eine Website „mobile friendly“?
Eine Website ist mobilfreundlich wenn Sie…
• Inhalte auf einem Telefon dem Medium entsprechend darstellen kann
• nicht ständig hin und her gewischt oder gezoomt werden muss
51

98. © 121WATT - André Goldmann
Was macht eine Website „mobile friendly“?
Eine Website ist mobilfreundlich wenn Sie…
• Inhalte auf einem Telefon dem Medium entsprechend darstellen kann
• nicht ständig hin und her gewischt oder gezoomt werden muss
• Inhalte auch auf kleinen Displays gut les- und bedienbar sind
51

99. © 121WATT - André Goldmann
Was macht eine Website „mobile friendly“?
Eine Website ist mobilfreundlich wenn Sie…
• Inhalte auf einem Telefon dem Medium entsprechend darstellen kann
• nicht ständig hin und her gewischt oder gezoomt werden muss
• Inhalte auch auf kleinen Displays gut les- und bedienbar sind
• Google es so empfindet…
51

100. © 121WATT - André Goldmann
Nutzerfreundlichkeit auf Mobilgeräten
52
https://support.google.com/webmasters/answer/6101188

101. © 121WATT - André Goldmann
Test auf Optimierung für Mobilgeräte
53
https://www.google.com/webmasters/tools/mobile-friendly/

102. © 121WATT - André Goldmann
6 wichtige Praxistipps fürs Mobile SEO
Prüfe die Robots.txt. Stelle sicher, dass der Googlebot auch auf die mobile
Version deiner Webseite zugreifen kann und Zugriff auf CSS & JS hat
Prüfe die Google Webmaster Tools auf Crawlingfehler bei Smartphones und
Feature-Phones.
Prüfe deine Website auf fehlerhafte Redirects. Auch hier helfen die Google
Webmaster Tools.
Stelle sicher, dass die Weiterleitungen aufgrund fehlender mobiler Seiten nicht
zu Soft 404ern führen.
Die Ladezeit der Website ist aufgrund der mobilen Funknetze besonders
relevant, hier helfen die Google PageSpeed Insights & Pingdom
Folge der Empfehlung von Google und verlinke deine Desktop-Version,
vermeide dabei aber mögliche Endlosschleifen aufgrund von Weiterleitungen.
54

103. © 121WATT - André Goldmann
SMX Tag 2: 09:00 Uhr // Saal 05 // Technical Track
55

104. © 121WATT - André Goldmann
http://pxdr.de/mobileseo
@pixeldreher
Folien
Folgen

105. © 121WATT - André Goldmann
Fragen zu Mobile- oder technischer SEO?
57
André Goldmann
andre.goldmann@121watt.de
@pixeldreher
XING: http://pxdr.de/xing
121WATT
Luise-Ullrich-Str. 20
80636 München
Tel.: 089 / 416 126 993
@121WATTT | info@121watt.de
www.121watt.de
3fach „T“ ;)