Mobile SEO Grundlagen

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

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

Privates Projekt: nageldesign-galerie.de
3
3.400.000 Sitzungen
25.300.000 Seitenaufrufe
1 TB Trafﬁc im Monat

Privates Projekt: nageldesign-galerie.de
3
3.400.000 Sitzungen
25.300.000 Seitenaufrufe
1 TB Trafﬁc im Monat
80% Mobile-Traffic

Desktop- vs. Mobile Ergebnisse

Die Entwicklung des mobilen Internet

2011 2012 2013 2014 2015

2011 2012 2013 2014 2015
Mobile Googlebot

2011 2012 2013 2014 2015
Veränderung der 
mobilen Rankings
Mobile Googlebot

2011 2012 2013 2014 2015
Veränderung der 
mobilen Rankings
Crawling Fehler
Mobile Googlebot

2011 2012 2013 2014 2015
Veränderung der 
mobilen Rankings
Crawling Fehler
Mobile Searchquery 
Statistiken verfügbar
Mobile Googlebot

2011 2012 2013 2014 2015
Veränderung der 
mobilen Rankings
Crawling Fehler
PageSpeed Insights
Mobile Googlebot

2011 2012 2013 2014 2015
Veränderung der 
mobilen Rankings
Crawling Fehler
PageSpeed Insights
Mobile Googlebot
Warnhinweis

2011 2012 2013 2014 2015
Veränderung der 
mobilen Rankings
Crawling Fehler
PageSpeed Insights
Mobile Usability
Mobile Googlebot
Warnhinweis

2011 2012 2013 2014 2015
Veränderung der 
mobilen Rankings
Crawling Fehler
„Für Mobilgeräte“
PageSpeed Insights
Mobile Usability
Mobile Googlebot
Warnhinweis

2011 2012 2013 2014 2015
Veränderung der 
mobilen Rankings
Crawling Fehler
PageSpeed Insights
Mobile Testing-Tool
Mobile Usability
Mobile Googlebot
Warnhinweis

2011 2012 2013 2014 2015
Veränderung der 
mobilen Rankings
Crawling Fehler
PageSpeed Insights
Mobile Testing-Tool
Google verschickt 
Usability Warnungen
Mobile Usability
Mobile Googlebot
Warnhinweis

2011 2012 2013 2014 2015
Veränderung der 
mobilen Rankings
Crawling Fehler
PageSpeed Insights
Mobile Testing-Tool
Google verschickt 
Usability Warnungen
Mobile Usability
Mobile Googlebot
Warnhinweis
21.04.: „Für Mobilgeräte“ 
wird zum Ranking- 
signal

Konﬁguration Ihrer mobilen Website
3 Varianten im Vergleich

1. Responsive Webdesign
Bildquelle: http://www.elezea.com/2013/11/rwd-content-modules/

Was ist responsives Webdesign?

Crawlersteuerung mit der robots.txt
Wichtig: Der Crawler muss Zugriff auf die CSS & JS
Dateien haben, um ein responsives Webdesign
erkennen zu können!

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

2. Dynamische Bereitstellung

Was ist eine dynamische Bereitstellung?
„Bei der dynamischen Bereitstellung erhalten einzelne
Geräte unter derselben URL unterschiedlichen Code.“

Vary-HTTP-Header
Der Vary-HTTP-Header ist Teil der Antwort des Servers auf eine Anfrage des
Websitebesuchers. Hier ein Beispiel:
27

Gleiche URL — unterschiedliche Codebasis

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

3. Unterschiedliche URLs

Unterschiedliche URLs

Pro/Contra: Unterschiedliche URLs
Contra:
Gefahr von doppelten Inhalten
Link-Popularität wird geteilt
(neues Linkproﬁl)
Zusätzliches crawlen
notwendig
Höhere Kosten durch separate
Entwicklung
Pro:
Einfache Integration
Unterschiedliche Inhalte
möglich (zwischen m. & www.)
Bessere Mobile UX

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

Optimierung der (mobilen) Ladezeit

Status Quo: Pingdom Tools
35
tools.pingdom.com/fpt/

Optimierung der mobilen Ladezeit
https://developers.google.com/speed/pagespeed/insights/

Checklisten für den Einstieg in die Optimierung

Ladezeit-Optimierung
Server:
38

Server:
Caching & GZIP Kompression aktivieren
38

Server:
HTTP Requests reduzieren
38

Server:
Weiterleitungen vermeiden & 404 Fehler (bei Bildern, Skripten & Co.)
beseitigen
38

Server:
beseitigen
Weiterleitungsketten auseinandernehmen
38

Server:
beseitigen
Datenbanken optimieren
38

Server:
beseitigen
Datenbanken optimieren
Fertige Social Widgets (von Facebook & Co.) bitte nicht nutzen ;)
38

39
HTML:
Ladezeit Optimierung

39
HTML:
HTML Kommentare entfernen

39
HTML:
HTML Code komprimieren & ungenutztes CSS entfernen

39
HTML:
Inline CSS & JS entfernen und in Dateien ausführen (können gecached werden)

39
HTML:
CSS: Nicht per @import neue Dateien „nachladen“

39
HTML:
CSS & JavaScript komprimieren und an der richtigen Stelle integrieren (am
besten via CDN oder Subdomain)

39
HTML:
CSS3 statt Graﬁken für Buttons und Co. nutzen

39
HTML:
headjs.com <— kombiniert JS Dateien und lädt sie automatisch asynchron

39
HTML:
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)

40
Bilder:

40
Bilder:
Bildgrößen und Datei-Formate richtig wählen (.jpg für Fotos/
Hintergrundgraﬁken; .png oder .gif für Layoutgraﬁken; Alternativ auch .svg)

40
Bilder:
Bilder nicht durch CSS- oder HTML-Angaben skalieren

40
Bilder:
Bildqualität reduzieren

40
Bilder:
Icons als Font laden (http://fontawesome.io/, http://fontello.com/)

40
Bilder:
Einsatz vom <picture>-Element überdenken

40
Bilder:
Einsatz vom <picture>-Element überdenken
Bilder per CDN laden

Google empﬁehlt: Make the Web faster
https://developers.google.com/speed/

Bonus
Strukturierte Daten für (mobilen) Content

https://support.google.com/webmasters/answer/99170?hl=de

Data Highlighter in den Google Webmaster Tools
https://www.google.com/webmasters/tools/data-highlighter?hl=de

http://schema.org/

„Erfolgskontrolle“ für mobile Sichtbarkeit
https://www.google.com/webmasters/tools/top-search-queries?hl=de

https://www.google.com/webmasters/tools/crawl-errors?hl=de

Was macht eine Website „mobile friendly“?
Eine Website ist mobilfreundlich wenn Sie…
51

• Inhalte auf einem Telefon dem Medium entsprechend darstellen kann
51

• nicht ständig hin und her gewischt oder gezoomt werden muss
51

• Inhalte auch auf kleinen Displays gut les- und bedienbar sind
51

• Inhalte auch auf kleinen Displays gut les- und bedienbar sind
• Google es so empﬁndet…
51

Nutzerfreundlichkeit auf Mobilgeräten
52
https://support.google.com/webmasters/answer/6101188

Test auf Optimierung für Mobilgeräte
53
https://www.google.com/webmasters/tools/mobile-friendly/

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

SMX Tag 2: 09:00 Uhr // Saal 05 // Technical Track
55

http://pxdr.de/mobileseo
@pixeldreher
Folien
Folgen

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“ ;)

Mobile SEO Grundlagen

Weitere ähnliche Inhalte

Was ist angesagt?

Ähnlich wie Mobile SEO Grundlagen

Mobile SEO Grundlagen