Welcome to a New Reality - SEO goes Mobile First in 2017

Bastian Grimm, Peak Ace AG | @basgr
Crawling, Indexing & Ranking in the age of a mobile first world.
Welcome to a New Reality!

2 pa.ag@peakaceag
Keine Lust mitzuschreiben?
https://pa.ag/mobidx

3 pa.ag@peakaceag
Zusammengefasst geht es beim Mobile First Indexing darum, dass Google Cross
Device kompatiblen Content vorziehen wird und so organisiert, dass er von vielen
verschiedenen Geräten möglichst einfach abgefragt und angezeigt werden kann.
Crawling Indexing Ranking Mobile
Was ist Mobile First Indexing?

4 pa.ag@peakaceag
Warum macht Google das? Mobile schlägt Desktop!
Seit 2015 gibt es mehr mobile Suchanfragen als über Desktop. Hitwise berichtete in
08/2016, dass fast 60 Prozent aller Anfragen von mobilen Geräten ausgehen.
Quellen: Hitwise (http://pa.ag/2qofNNV) & SearchEngineLand (http://pa.ag/2pT2OA7)
Anteil der Online Suchanfragen ausgehend von mobilen Geräten, nach Industrie:

5 pa.ag@peakaceag
Unterschiedliche Nutzererfahrung je nach Suchanfrage

6 @peakaceag pa.ag
Mobile Suchergebnisse zu “Game of Thrones” (US)
Source: Google US, Mobile SERP on iPhone6 – 24/08/2017
Klassische, organische Suchergebnisse? Fehlanzeige!

7 pa.ag@peakaceag
Fragen werden im mobilen Chrome direkt beantwortet
Via Twitter: http://pa.ag/2tQfXA9

Zukünftig werdet ihr auf der Basis eurer mobilen Seite gerankt
Von Desktop zu Mobile

9 pa.ag@peakaceag
Google kündigte Mobile First Indexing im Nov. 2016 an
Wie und Wann? Sogar Google weiß vieles noch nicht sicher! Chaos pur…

10 pa.ag@peakaceag
Google bestätigt: Weiterhin nur einen Suchindex!
Quelle: http://pa.ag/2fVfl5q

11 pa.ag@peakaceag
Googles Mobile First Indexing Roadmap #1
Letztes Update 15/06/17
Quelle: SMX Advanced 2017, Seattle
Die Änderung wird global durchgeführt, nicht
schrittweise nach Sprachen oder Ländern.
Zeitrahmen: „Wir sind noch einige Zeit davon
entfernt“, Umsetzung also nicht vor 2018 „Es könnte
noch vier bis fünf Jahre dauern, bis es einen
kompletten Mobile First Index geben wird” so Illyes.
3
12
6
9

12 pa.ag@peakaceag
Vielleicht wird‘s auch einfach das „Trial & Error“ Prinzip?
Quelle: http://pa.ag/2rmNU6m
It's also possible that we'll say
well this batch of sites works
perfectly fine on mobile first
indexing so we'll just switch
that over and wait with the
next batch.”
„

13 pa.ag@peakaceag
Für Desktop-Seiten bleibt die Indexierung gleich;
doch gecrawlt wird per mobilem User Agent:
„Wir indexieren mobile Inhalte, wenn es keine gibt
werden die Desktop-Inhalte herangezogen. Niemand
rutscht also aus dem Index!“
Kann ich Accordion Tabs, Hidden Tabs, usw. auf
meiner mobilen Website nutzen?
Google wird diese genauso wie Non-Hidden Content
bewerten. Illyes: „Google is going to ensure that
hidden content is not valued less on a mobile site.“
+
-
+
Lorem Ipsum dolor
Lorem Ipsum dolor
Lorem Ipsum dolor
Lorem Ipsum dolor
Lorem Ipsum dolor
Lorem Ipsum dolor

14 pa.ag@peakaceag
Was ist, wenn die mobile Website weniger Content
aufweist als die Desktop Page?
Das Ranking wird auf „kürzerem“ Content basieren!
Somit muss sichergestellt werden, dass die Inhalte, die
gerankt werden sollen, auf der mobilen Seite zu finden
sind.
Mobile Ranking Faktoren
Diese bleiben generell unverändert, inklusive des
Mobile-Friendly-Testings.

15 @peakaceag pa.ag
Mobile First Indexing – Die Herausforderungen #1
Quelle: Gary Illyes @ SMX Advanced Seattle 2017
Figuring out for 18-year-old desktop
signals: How can this be used for the
mobile web? E.g. the link graph/PR is
different and totally messed up; how
can Google make this work?”
„

16 @peakaceag pa.ag
Mobile First Indexing – Die Herausforderungen #2
Quelle: Gary Illyes @ SMX Advanced Seattle 2017
Google never had to swap over an
entire index to something new, this is
completely new and doing that without
experimentation is not possible. And sites
should not be hurt, therefore large scale
indexing experiments will be conducted.”
„

17 pa.ag@peakaceag
Sh*t just got real! ~4.500 Visibility auf Desktop!
Mobile Subdomain beginnt auf Desktop zu ranken: Real-World Testing!?

18 @peakaceag pa.ag
Erste Seiten wurden bereits umgestellt:
Quelle: Gary Illyes @ International Search Summit 2017, Barcelona
I don’t believe we will be giving you
any type of notification once you have
been switched to mobile-first indexing.
„

19 pa.ag@peakaceag
Aber was ist denn überhaut „Mobile“ (für Google)?
iPhone, iPad oder noch größer? Welche Bildschirmauflösung gilt als Standard?

Bedenkt, dass Google beim Rendern (fast) alles abfragt, was zu
einer Seite gehört, JavaScript, CSS, usw.
Bevor wir einsteigen:

…aller Seiten nutzen JavaScript – deswegen rendert Google
Websites jetzt auch, anstatt sie nur zu crawlen!
93,7 %

22 pa.ag@peakaceag
Die Zeiten von „View Source“ sind endgültig vorbei:
Rendered
Un-rendered

23 pa.ag@peakaceag
JS Frameworks und deren Kompatibilität für SEO?
Schaut euch Bartosz‘ umfangreiches Experiment zu Crawlability und Indexability an!
Mehr erfahren: http://pa.ag/2qLqlqH

25 pa.ag@peakaceag
1024 x 768 = (noch) Desktop!
Warum ist das so wichtig? Achtet auf responsive Breakpoints, Portrait vs. Landscape,
usw. – alles Wichtige muss richtig gerendert werden!

26 pa.ag@peakaceag
Bonus > GSC Fetch & Render für (fast) alles, was ihr wollt!
Mit dem 100 Prozent iFrame seht ihr, wie Google eine (beliebige) Website rendert.

Auflösung ist nicht das Wichtigste…

28 pa.ag@peakaceag
Der durchschnittliche Konsument nutzt fünf Devices!
Du kannst nicht für alle Geräte perfekt angepasste Websites bauen und pflegen, z.B.
eine für das iPad und verschiedene Seiten für alle Smartphone Bildschirmauflösungen!
Quelle: http://pa.ag/2ffuGNp & http://pa.ag/2fHvLhz
90 % aller User beginnen
Online Tasks auf einem
Gerät und beenden diese
auf einem anderen.

29 @peakaceag pa.ag
Proper Responsive
Aus SEO Gesichtspunkten bietet Responsive Design diverse Vorteile!

30 pa.ag@peakaceag
Was bedeutet Responsive Webdesign? #1
▪ Vor allem: Content auf verschiedene Arten anzeigen,
je nach Auflösung (Gerät). Designt das kleinste
Ansichtsfenster zuerst, arbeitet euch dann nach oben;
achtet auch auf Quer- und Hochformate.
▪ Bilder: Bestmögliche Größe, Auflösung & Format. Das
neue <picture> Element ist perfekter Ausgangspunkt,
aber es gibt noch viele andere Lösungen. Denkt an
„Fluid Images“, die sich an ihren Container anpassen.
<picture>

31 pa.ag@peakaceag
▪ Critical Rendering Path: Optimiere für ein
schnellstmögliches „Time to meaningful Paint“.
Round Trips beachten; offloading von JS & Inline CSS
für all Breakpoints (je nach Auflösung).
▪ Conditional Loading von Komponenten (bspw.
nur wenn sichtbar), kombiniert mit Pre-Fetching
und Pre-Rendering (bei hohen Auflösungen).

32 pa.ag@peakaceag
▪ Optimiert Paint und Re-Paint, besonders für
niedrige Auflösungen/Breakpoints. CSS Media
Queries können eine große Hilfe sein.
▪ Haltet euren DOM sauber (Versteckte Elemente
sind nur die halbe Wahrheit bzw. keine gute Idee!).
1
2
3
4
5
6
7
8
9
10
11
<!DOCTYPE html>
<html>
<head>
<title>Page Title</title>
</head>
<body>
<h1>Heading</h1>
<p>Paragraph</p>
</body>
</html>

33 pa.ag@peakaceag
Für die Ladegeschwindigkeit (Scoring)
wird die mobile Version anstatt der
Desktop Version geprüft.

Insbesondere Mobil! Effizienteres Crawling ist als netter Nebeneffekt…
Performance = User Experience

35 pa.ag@peakaceag
Die Erwartungshaltung eurer Besucher ist klar:
Langsame Ladezeiten sind der meistgenannte Grund, eine Seite zu verlassen!
According to a Nielsen report, 47 % of people
expect a website to load within two seconds,
and 40 % will leave a website if it does not
load fully within three seconds.”
„

36 @peakaceag pa.ag
Google forciert das Thema Site Speed immer wieder:
Quelle: http://pa.ag/1cWFCtY

37 pa.ag@peakaceag
Die Basics sind natürlich (weiterhin) super wichtig:
▪ Bildoptimierung: Reduziert Overheads für JPGs & PNGs
(Metadaten, usw.), beachtet neue Formate (WebP)
▪ Effektives Caching und HTTP Komprimierung sollten
impementiert werden
▪ Wenn möglich, nutzt asynchrone Requests
▪ Verkleinert CSS und JavaScript Dateien (minify)
▪ Nutzt ein Content Distribution Network (CDN) oder einen
Asset Server (sowie cookie-less Domains) um parallele
Requests zu optimieren
▪ Lean Markup (Keine Kommentare, nutzt Inline CSS/JS nur
wenn unbedingt notwendig)
▪ Optimiert den Critical Rendering Path (Google
interessiert hauptsächlich „Above The Fold“ Content)
Alle Folien auf SlideShare: http://pa.ag/iss17speed

HTTPS & HTTP/2! Denn das HTTP Protokoll ist einfach uralt!
Viel spannender als die Basics:

39 @peakaceag pa.ag
Die Top-3 der High Volume Keywords: >60 % HTTPS!
Quelle: SEMrush Ranking Factors 2017 - https://semrush.com/ranking-factors

40 @peakaceag pa.ag
Meine Prognose für dieses Jahr:
Wir werden bis Ende 2017
mehr als 90 Prozent aller Top
10 Ergebnisse auf HTTPS
sehen!”
„

41 @peakaceag pa.ag
HTTPS Ranking „Boost?“ Vielleicht…vielleicht auch nicht!
Quelle: http://pa.ag/2ekj4Gi & http://pa.ag/2pRq0PS

42 pa.ag@peakaceag
Chrome mit (noch) mehr Warnungen ab Oktober 2017!
Chrome 62 wird jede einzelne HTTP-URL im Inkognito-Modus als unsicher flaggen!
Quelle: http://pa.ag/2rmIAjg

43 @peakaceag pa.ag
Für alle, die das (immer noch) nicht verstanden haben:
Nutzt HTTPS nicht ohne
HTTP/2 (SPDY)!”
„

Eine weitere „Neuheit“ in den mobilen SERPs
Accelerated Mobile Pages (AMP)

45 pa.ag@peakaceag
AMP: Kastriertes HTML für maximale Performance
Google ist Geschwindigkeit deutlich wichtiger als (HTML-) Features
Nicht erlaubt:
▪ externes CSS
▪ JavaScript (außer Async JS)
▪ Flash, Java & Co.
Maximale mobile Performance:
▪ weniger CPU und Memory
▪ geringere Bandbreite
▪ niedrigerer Batterieverbrauch
▪ verbesserte Usererfahrung
Beachte:
▪ nur Text und Bilder, alles andere ist limitiert
▪ CSS nur inline (non-blocking)
▪ CSS mit Größenlimitierung
▪ benötigt Breiten- und Höhenangaben (z.B. Bilder)

46 pa.ag@peakaceag
AMP ist zwar sehr schnell…
…aber bietet eine komplett andere UX, derzeit landen nur 3 % der AMP Besucher auf
der non-AMP URL.
Quelle: http://pa.ag/2fkyXLJ
6231
929
Regular AMP
Ladezeit der mobilen Seite
0 2000 4000 6000 8000
(ms)
Real-World Data: Mobile Ladezeiten
5,7 x schneller

47 pa.ag@peakaceag
…und AMP erhält weiterhin einiges an Aufmerksamkeit:
Quelle: http://pa.ag/2qoc2bh & http://pa.ag/2qoaOwc & http://pa.ag/2rmWGRN

48 pa.ag@peakaceag
WSJ: Publisher trotzdem nicht 100 % zufrieden
AMP Seitenaufrufe generieren nur halb so viel Erträge wie „echte“ mobile Websites
Quelle: http://pa.ag/2fzOWK3
Diverse Zeitungen verkünden,
dass ein AMP Seitenaufruf
momentan nur etwa halb so
viel Revenue generiert wie der
Seitenaufruf einer vollständig
mobilen Website.”
„

49 pa.ag@peakaceag
Aber… AMP ist doch nur für Publisher?!
Hervorragende Präsentation zu Advanced AMP von @fighto – don‘t miss it!
Mehr: http://pa.ag/2xWPD5q

51 pa.ag@peakaceag
Google konvertiert non-mobile-friendly Websites
(wieder) automatisch:
Quelle: http://pa.ag/2sorYbC

10 Tipps, um eure Websiten
vorzubereiten:

53 pa.ag@peakaceag
#1 Erkennt die Stärken & Schwächen eures mobilen Setups
Was wird genutzt und wieso? Ist die Website richtig konfiguriert?
www.example.com x www.example.com x www.example.com x m.example.com x
Responsive Web Design Dynamic Serving Independent Mobile Site
Vermeidet es, Bilder, CSS & JS
zu blockieren
Beachtet die Variable: HTTP-User-
Agent-Header
Identifikation und Zuordnung der
relevanten Web Version anhand des
richtigen User Agent
Implementiert Rel-Alternate & Canonical Tags
zwischen mobilen & Desktop URLs.
Nutzt 301-Redirects zwischen mobiler Ansicht &
Desktop um den User Agent der relevanten Web
Version zuzuordnen
Responsive Web Design Dynamic Serving Independent Mobile Site

54 pa.ag@peakaceag
#2 Nutzt ihr die richtigen Keywords für Mobile?
Prüft welche Suchbegriffe für verschiedene Devices passen!
Selling
(transactional)
Buying
(transactional)
VS

55 pa.ag@peakaceag
#3 Ist eure Website wirklich mobile friendly?
Schnelltest: Prüfe die Kompatibilität mit den Chrome DevTools (Windows: Ctrl+Shift+I)!

56 pa.ag@peakaceag
Hier könnt ihr direkt mehrere URLs gleichzeitig prüfen:
Probiere es aus: https://technicalseo.com/seo-tools/mobile-friendly/

57 pa.ag@peakaceag
#4 Interstitials können mobile Zugriffe verhindern
Auch andere Overlay/Pop-Ups wirken sich negativ auf die User Erfahrung aus!
Quelle: http://pa.ag/2tPmhIi
Beispiele für Unterbrecherwerbung (Interstitials), die
Content schwer zugänglich machen
Beispiel:
Intrusives Popup
Beispiel:
Intrusives,
alleinstehendes
Interstitial
Beispiel:
Intrusives,
alleinstehendes
Interstitial
Beispiel:
Interstitials für
Cookie Nutzung
Beispiel:
Interstitials für
Altersverifikation
Beispiel:
Banner, der nur einen
Teil des Bildschirms
nutzt
Beispiele für Interstitials, die bei richtiger Nutzung
keine negativen Auswirkungen haben

58 pa.ag@peakaceag
#5 Habt ihr an alle GSC Reports gedacht?
Neben dem Mobile Usability Report vergesst nicht Rich Cards & Structured Data Tests!

59 pa.ag@peakaceag
#6 Extra Check: GSC Fetch & Render für mobile Ansicht!
Details beachten: Identischer Content? Fehlt etwas? Sind Ressourcen geblockt?

60 pa.ag@peakaceag
Schon gesehen? Ein neues Testing Tool von Google:
Probiere es aus: https://testmysite.thinkwithgoogle.com/intl/en-us

61 pa.ag@peakaceag
#7 Macht den Komplettcheck mit Fokus auf mobilen Reports:
DeepCrawl bietet ausführliches Reporting rund um das Thema „Mobile“!

62 pa.ag@peakaceag
#8 Simuliert Googlebot für mobile mit JS Rendering!
Mit ScreamingFrog geht das ganz leicht – Achtung bei gerendertem Output!
Auch hilfreich: Extract > Xpath > //head/link[@rel="amphtml"]/@href

63 pa.ag@peakaceag
#9 Prüft den gesamten Content eurer mobilen Website!
Ist das schema.org Markup auch auf der mobilen Seite verfügbar? Was ist mit
Indexierungsregeln, Canonical Tags, usw.?
Usually, rel-canonicals, structured data,
hreflang, other annotations and even
images are missing! Copy everything you
want to rank for over to mobile (for now)!”
„

65 pa.ag@peakaceag
Wir wachsen: 25+ Performance Marketing Jobs in Berlin!
Sprecht mich gerne jederzeit an - oder meldet euch via jobs.pa.ag. Wir freuen uns!

66 pa.ag@peakaceag
Bastian Grimm
bg@pa.ag
twitter.com/peakaceag
facebook.com/peakaceag
www.pa.ag
Fragen? Let‘s go!
Always looking for talent! Check out jobs.pa.ag
https://pa.ag/mobidx

Welcome to a New Reality - SEO goes Mobile First in 2017

Recommended

Recommended

More Related Content

What's hot

What's hot (20)

Similar to Welcome to a New Reality - SEO goes Mobile First in 2017

Similar to Welcome to a New Reality - SEO goes Mobile First in 2017 (20)

More from Bastian Grimm

More from Bastian Grimm (20)

Welcome to a New Reality - SEO goes Mobile First in 2017