Crawling, Indexing & Ranking in the age of a mobile first world. Meine Präsentation von der OMT 2017 in Wiesbaden rund um das Thema "Mobile First Indexing" inkl. Performance Optimierungen, Responsive Design & vielem mehr.
3. 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. 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:
6. 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. 7 @peakaceag pa.ag
Editorial Integration zur Bundestagswahl (seit 30.08.17)
Ausprobieren: https://www.google.de/#q=martin+schulz / Mehr Info: http://pa.ag/2gqcVxi
12. 12 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
13. 13 pa.ag@peakaceag
Vielleicht wird‘s auch einfach das „Trial & Error“ Prinzip?
Im Mai 2017 wurde es dann wirklich absurd…
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.”
„
14. 14 pa.ag@peakaceag
Googles Mobile First Indexing Roadmap #2
Letztes Update 15/06/17
Quelle: SMX Advanced 2017, Seattle
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
15. 15 pa.ag@peakaceag
Googles Mobile First Indexing Roadmap #3
Letztes Update 15/06/17
Quelle: SMX Advanced 2017, Seattle
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.
16. 16 pa.ag@peakaceag
Googles Mobile First Indexing Roadmap #4
Letztes Update 15/06/17
Quelle: SMX Advanced 2017, Seattle
Für die Ladegeschwindigkeit (Scoring)
wird die mobile Version anstatt der
Desktop Version geprüft.
17. 17 @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?”
„
18. 18 @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.”
„
19. 19 pa.ag@peakaceag
Sh*t just got real! ~4.500 Visibility auf Desktop!
Mobile Subdomain beginnt auf Desktop zu ranken: Real-World Testing!?
20. 20 pa.ag@peakaceag
Aber was ist denn überhaut „Mobile“ (für Google)?
iPhone, iPad oder noch größer? Welche Bildschirmauflösung gilt als Standard?
21. Bedenkt, dass Google beim Rendern (fast) alles abfragt, was zu
einer Seite gehört, JavaScript, CSS, usw.
Bevor wir einsteigen:
22. …aller Seiten nutzen JavaScript – deswegen rendert Google
Websites jetzt auch, anstatt sie nur zu crawlen!
93,7 %
24. 24 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. Die einzelnen Teilbereiche im SEO werden immer komplexer,
Spezialisten im Team sind somit wichtiger denn je.
Spezialisiert eure Teams!
27. 27 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!
28. 28 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.
30. 30 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.
31. 31 @peakaceag pa.ag
Proper Responsive
Aus SEO Gesichtspunkten bietet Responsive Design diverse Vorteile!
32. 32 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>
33. 33 pa.ag@peakaceag
Was bedeutet Responsive Webdesign? #2
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).
34. 34 pa.ag@peakaceag
Was bedeutet Responsive Webdesign? #3
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>
36. 36 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.”
„
38. 38 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
39. HTTPS & HTTP/2! Denn das HTTP Protokoll ist einfach uralt!
Viel spannender als die Basics:
45. 45 pa.ag@peakaceag
Auch wenn du nicht an den Boost glaubst…
Seit Januar 2017 werden Login-/Kreditkarten-Felder auf HTTP als „nicht sicher“ markiert.
Quelle: http://pa.ag/2eh2Trk
46. 46 pa.ag@peakaceag
Chrome mit mehr Warnungen ab Oktober 2017!
Chrome 62 wird jede einzelne HTTP-URL im Inkognito-Modus als unsicher flaggen!
Quelle: http://pa.ag/2rmIAjg
50. 50 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)
51. 51 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
52. 52 pa.ag@peakaceag
…und AMP erhält weiterhin einiges an Aufmerksamkeit:
Quelle: http://pa.ag/2qoc2bh & http://pa.ag/2qoaOwc & http://pa.ag/2rmWGRN
53. 53 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.”
„
54. 54 pa.ag@peakaceag
Aber… AMP ist doch nur für Publisher?!
AMP für Produkte gibt es schon bald in einem SERP in eurer Nähe!
Mehr: https://ampbyexample.com/samples_templates/product/
58. 58 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
59. 59 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
60. 60 pa.ag@peakaceag
#3 Ist eure Website wirklich mobile friendly?
Schnelltest: Prüfe die Kompatibilität mit den Chrome DevTools (Windows: Ctrl+Shift+I)!
61. 61 pa.ag@peakaceag
Hier könnt ihr direkt mehrere URLs gleichzeitig prüfen:
Probiere es aus: https://technicalseo.com/seo-tools/mobile-friendly/
62. 62 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
63. 63 pa.ag@peakaceag
#5 Habt ihr an alle GSC Reports gedacht?
Neben dem Mobile Usability Report vergesst nicht Rich Cards & Structured Data Tests!
64. 64 pa.ag@peakaceag
#6 Extra Check: GSC Fetch & Render für mobile Ansicht!
Details beachten: Identischer Content? Fehlt etwas? Sind Ressourcen geblockt?
65. 65 pa.ag@peakaceag
Schon gesehen? Ein neues Testing Tool von Google:
Probiere es aus: https://testmysite.thinkwithgoogle.com/intl/en-us
66. 66 pa.ag@peakaceag
#7 Macht den Komplettcheck mit Fokus auf mobilen Reports:
DeepCrawl bietet ausführliches Reporting rund um das Thema „Mobile“!
67. 67 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
68. 68 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)!”
„
70. 70 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!