Googles Mobile First Index - Was ändert sich und was muss geändert werden? Was steckt eigentlich hinter der Ankündigung - und ist die Ankündigung für Google vielleicht sogar mehr wert als das primär verkaufte Ziel?
Strukturierte Daten, AMP, Cloud und Crawling - die tatsächliche Botschaft hinter dem Mobile First Index.
3. SEO-Atelier
Maximilian Bloch
Vorab
• Mehr Suchanfragen über mobile Endgeräte (seit 2015)
• „Mobile-Friendly“-Update – April 2015
“we will be expanding our use of mobile-friendliness as a ranking signal. This change will affect mobile
searches in all languages worldwide and will have a significant impact in our search results.
Consequently, users will find it easier to get relevant, high quality search results that are optimized for
their devices.”
“We’ve made it easier for users to find mobile-friendly web pages and we’ve introduced App Indexing”
https://webmasters.googleblog.com/2015/02/finding-more-mobile-friendly-search.html
• Mobile Variante war wichtig, um bei der Suche durch mobile Endgeräte gut gefunden zu werden
• Websites ohne mobile Version wurden bei mobilen Suchen benachteiligt
• Rankings richten sich jedoch primär nach der Desktop-Version Desktop-First-Indexing
3
4. SEO-Atelier
Maximilian Bloch
4
Generell - Desktop-First-Indexing Mobile-First-Indexing
• 13.10.16 – Ankündigung des Mobile-First-Index Ankündigung via Gary Illyes
• Ranking wird demnach an der mobilen Verfügbarkeit festgemacht
• Damit reicht es nicht mehr nur eine mobile Version zu haben – sie wird federführend
• Es wird auch weiterhin lediglich EINEN Index geben
• Sofern keine mobilefähige Variante einer Website besteht, wird die Seite weiterhin „Desktop-
First“ behandelt – allerdings ignoriert man damit ca. 55 % allen Traffics…
• Wann?
5. SEO-Atelier
Maximilian Bloch
Generell
Langsam macht Google ganz wirklich vielleicht endlich bald schon ernst
5
In den kommenden Wochen wird sich mehr tun…
Allerdings sollen lt. Google spürbare Effekte vermieden werden
8. SEO-Atelier
Maximilian Bloch
Inhalt – Main Content
8
Relevanter Inhalt muss auf der mobilen Version vorhanden sein!
Quelle: https://www.searchenginejournal.com/googles-mobile-first-indexing-what-it-is-how-you-can-prepare/212104/
Der „Main-Content“ sollte
auf beiden Versionen
vorhanden sein.
Dies gilt ebenfalls für
Headlines, Bilder, Alt-
Attribute & Videos
Check:
Fetch & Render via GSC
9. SEO-Atelier
Maximilian Bloch
Content - Positionierung
Nicht die Positionierung von Inhalt im HTML hat Einfluss auf die Gewichtung, sondern in
der Darstellung
9
Sofern wichtige Inhalte in der Desktop-
Version eine priorisierte Position haben,
sollten sie so auch in der mobilen Version
dargestellt werden
Google rendert die Version und weiß wo
was steht
10. SEO-Atelier
Maximilian Bloch
Content – Hidden Content
Endlich: Keine Angst mehr vor Hidden Content - Tabs, Accordions, etc.
10
Achtung
Wird der versteckte Inhalt erst
mit dem Klick nachgeladen,
sieht ihn Google nicht!
Checkt, ob der Inhalt auch
ohne JS im Quellcode ist
Prüfung mit Google
Chrome Tools
11. SEO-Atelier
Maximilian Bloch
Content – Links, Meta-Daten & mehr
Wichtige Punkte!
11
Möglichst ähnliche interne Linkstruktur
Hreflang-Auszeichnung muss ebenfalls gegeben sein – ggf. angepasst
Meta-Daten werden von „Mobile“ gezogen, müssen aber nicht komplett
identisch sein
Strukturierte Daten sollten zumindest gleichwertig sein & haben eine hohe
Priorität
13. SEO-Atelier
Maximilian Bloch
Unterschiedliche Umsetzungen - Kurze Erklärung
Unterscheidung zwischen Arten mobiler Websites
13
Responsive Web-Design
Dynamic-Serving
Separate URL
Quelle: https://developers.google.com/search/mobile-sites/mobile-seo/
14. SEO-Atelier
Maximilian Bloch
Unterschiede der Unterschiede?
Was bedeuten die Unterschiedlichen Umsetzungen?
14
Anpassung der
Darstellung je nach
Bildschirmbreite des
Clients
Response richtet sich
nach dem User-Agent
Je nach User-Agent
wird auf eine Seite für
mobile Endgeräte
weitergeleitet
16. SEO-Atelier
Maximilian Bloch
Responsive Webdesign
Muss ich was beachten?
• Diese Variante macht tatsächlich am wenigsten Probleme, da das HTML stets
gleich bleibt
• Hreflang, Links, Meta-Daten, Strukturierte-Daten & normalerweise auch der Main-
Content werden damit unabhängig vom User Agent immer ausgespielt
• Probleme bei der Identifizierung von User Agents werden vermieden & Google
kann sehr effizient crawlen
16
17. SEO-Atelier
Maximilian Bloch
Responsive Webdesign
Achtung bei Mischformen & besonderen Setups!
17
Dynamisch bereitgestelltes JS
HTML zwar gleich, allerdings wird je nach User-Agent dynamisch JS-Code nachgeladen
Vary: User-Agent muss in den Response-Header
Kombinierte Erkennung
Mittels JS wird dem Server das Gerät zurückgespielt. Dieser ändert das HTML und
somit das Rendering der Website
Vary: User-Agent muss in den Response-Header
Adaptives JS
Alle Geräte erhalten gleiches HTML, JS, CSS & Bilder. Mit der Ausführung des JS ändert
sich aber das Rendering/Aussehen der Website
Kein Vary-Header nötig
Einsatz hätte hier sogar Nachteile (Proxy-Server)
19. SEO-Atelier
Maximilian Bloch
Dynamic Serving
Je nach User Agent des anfragenden Gerätes wird unterschiedlicher
Inhalt bereitgestellt
19
Vorteile
• Es wird nur der wirklich benötigte Code ausgegeben. Dies kommt der Dateigröße & damit der
Pagespeed zugute
• Bessere Möglichkeiten für individuelle Darstellung auf Mobilgeräten
Nachteile
• User Agent Sniffing ist fehleranfällig (UA wird nicht richtig erkannt, UA-Liste muss gepflegt &
aktuell gehalten werden)
• Da unterschiedlicher Inhalt ausgeliefert wird, muss die Auslieferung der relevanten Inhalte,
Links und Daten hier sichergestellt werden!
Vary: User-Agent muss in den Response-Header (Cloaking + Cache-Server)
22. SEO-Atelier
Maximilian Bloch
Unterschiedliche URLs
Hier ist besondere Vorsicht geboten!
Notwendige Annotationen
Auf Desktop
<link rel="alternate" media="only screen and (max-width: 640px)“ href="https://m.domain.tld/seite2.html">
Auf Mobil
<link rel="canonical" href="https://www.domain.tld/seite2.html ">
22
Achtung: Logik & Richtung nicht umdrehen
Hier muss unbedingt sichergestellt werden, dass die mobile Version alle relevanten
Daten & Auszeichnungen enthält!
23. SEO-Atelier
Maximilian Bloch
Unterschiedliche URLs
23
Bei internationalen Seiten muss die hreflang-Auszeichnung
angepasst werden!
Mobile ↔ Mobile
Desktop ↔ Desktop
Was muss noch beachtet werden?
• Mobile Version in der Search Console anmelden!
• XML-Sitemap muss für mobile Website eingereicht werden!
• Mobile XML-Sitemap am besten auch in der robots.txt hinterlegen!
• Anpassung der internen Verlinkung!
• Paginierung nicht vergessen rel="next" and rel="prev"
• Mit ggf. höherer Serverlast rechnen!
26. SEO-Atelier
Maximilian Bloch
26
Und komplett ohne mobile-friendly Website?
Wenn keine mobilfähige Version Vorhanden:
- Google wird weiterhin nach altem Schema vorgehen
- Desktop-Ergebnisse werden weniger aktuell sein
Warum das?
Auch für Google sind Ressourcen nicht kostenlos… Crawling kostet
Vielleicht auch das ein Punkt, der aus Sicht von Google für AMP spricht?
28. SEO-Atelier
Maximilian Bloch
28
AMP – Aktualität + geringe Kosten?
1 x AMP-Unterseite
Ein Tag
1 x HTML-Startseite
Gleiche Domain - gleicher Tag -
Gleicher HTTP-Response-Header bei 200
AMP – Aus dem Cache – Crawling nur noch bei Aktualisierung?
30. SEO-Atelier
Maximilian Bloch
AMP
Dämliches CMS? Eingreifen schwer? AMP unmöglich?
Wichtigsten Seiten können auch „hardgecoded“ & statisch auf dem FTP ihr Zuhause finden
Empfehlung: Verzeichnis /amp/ im Domain-Root wird von Google ausgeblendet
AMP-Referenz kann auch via Sitemap erfolgen
<?xml version="1.0" encoding="utf-8"?>
<urlset xmlns="http://www.sitemaps.org/schemas/sitemap/0.9">
<url>
<loc> https://tolle-domain.com/wichtiste-seite.html </loc>
<xhtml:link rel="amphtml" href="https://tolle-domain.com/amp/wichtiste-seite.html"/>
<lastmod>2016-01-13T18:30:02Z</lastmod>
</url>
</urlset>
33. SEO-Atelier
Maximilian Bloch
Pagespeed
Bilder machen einen großen Teil der Größe von Seiten aus. Hier kann viel optimiert werden!
Bilder responsive ausliefern
Picture-Tag bzw. SRCSET-Attribut einsetzen um Bilder auch bei Responsive-Websites
lediglich in benötigter Größe auszuliefern
Auslieferung von WebP & Default
33
34. SEO-Atelier
Maximilian Bloch
Pagespeed
Bilder machen einen großen Teil der Größe von Seiten aus. Hier kann viel optimiert werden!
• Bilder komprimieren!
Tipp: Guetzli - Open Source Encoder von Google für JPEG (bis zu 35 % kleiner)
pngquant – PNG Lossy Compressor
34
35. SEO-Atelier
Maximilian Bloch
Pagespeed - Optimierungsmöglichkeiten
- Auslieferung von statischen Ressourcen mit Versionierung in der URL
- Achtung: Relevanz Bildersuche?
- Unset Etags - vermeidet Validierungsrequests, deren Aktualität über Versionierung
sichergestellt wird
- Nutzt Cache-Control-Headers mit hohen Max-Age werten
- Nutzt möglichst seitenweites serverseitiges Caching um Generierung zur Laufzeit zu Verhindern
- deflate-Komprimierung für textbasierte Ressourcen
- Minimierung des Codes – wer braucht schon Leerzeilen, etc.
- HTTP2 – Überlegt euch, ob in diesem Zuge die Reduktion von Requests noch sinnvoll ist
35
Überblick einiger Möglichkeiten
37. SEO-Atelier
Maximilian Bloch
37
“Structured data is important for indexing and search features that users love: it
should be both on the mobile and desktop version of the site. Ensure URLs within
the structured data are updated to the mobile version on the mobile pages.“ -
Gary Illyes – Dez. 18
https://webmasters.googleblog.com/2017/12/getting-your-site-ready-for-mobile.html
38. SEO-Atelier
Maximilian Bloch
Strukturierte Daten –NON-AMP-Artikel
Wo anfangen – wo aufhören? Wichtige Auszeichnungen
Types Article, NewsArticle, blogPosting
Properties headline - Länge: nicht länger als 110 Zeichen
image - Breite: Min. 696 px
- Auflösung: Min. Länge x Breite = 300.000 px
- Formate: 16x9, 4x3, 1x1
- Dateiformate: JPG, PNG oder GIF
38
{ "@context": "https://schema.org",
"@type": "NewsArticle",
"image": [
"https://domain.tld/assets/1x1/image.jpg",
"https://domain.tld/assets/4x3/image.jpg",
"https://domain.tld/assets/16x9/image.jpg" ] }
Pflegeleicht &
Empfohlen: JSON-LD
39. SEO-Atelier
Maximilian Bloch
Strukturierte Daten - Wichtigsten Auszeichnungen auf AMP
Achtung: Auszeichnungen von Artikeln & Videos müssen auf AMP-Sites umfangreicher sein!
Types Article, NewsArticle, blogposting
Notwendige Properties author, author.name, datePublished, headline, image, publisher,
publisher.logo, publisher.ogo.height, publisher.logo.url,
publisher.logo.width, publisher.name
+ weitere empfohlen
Types VideoObject
Notwendige Properties name, description, thumbnailUrl, publisher.logo,
publisher.logo.height, publisher.logo.url
+ weitere empohlen
Mehr, siehe: https://developers.google.com/search/docs/data-types/article
https://builtvisible.com/micro-data-schema-org-guide-generating-rich-snippets/
39
46. SEO-Atelier
Maximilian Bloch
90 % aller Unternehmensdaten wurden in den letzten 2
Jahren geschaffen
Das stellt Google vor enorme Probleme
Crawlingaufwände würden ins Unermessliche steigen
Informationen sind für Google nun auch: Apps, Rezepte,
Bücher, Filme, Lieder, Fernsehshows
46
https://www.datacenter-insider.de/index.cfm?pid=7537&pk=499019&fk=900861&type=article
47. SEO-Atelier
Maximilian Bloch
• Mit dem Mobile First Index mach uns Google klar:
Strukturierte Daten!
• Strukturierte Daten helfen vor allem Google – das Crawling
wird einfacher, algorithmische Aufwände und Overhead
minimiert
• Eine „Vereinheintlichung“ ist die Folge – Website-
Übergreifend
Das LD in JSON-LD
47
48. SEO-Atelier
Maximilian Bloch
• Gleichzeitig können weitere, effiziente Datenströme genutzt
werden: Feeds & APIs
• Feednutzung: AccuWeather, Hotels, Flüge, Shopping, Deeplink-
Listen für App-Indexing
48
49. SEO-Atelier
Maximilian Bloch
• Strukturierte Daten, Nutzung von Feeds und APIs führen
gleichzeitig zu einer weiteren Distanzierung von URLs und
Links
• Wo finden wir denn jetzt schon keine URL mehr? AMP, native
Apps, PWAs, vergessen wir nicht Google Now…
• Stattdessen Cloud
49
51. SEO-Atelier
Maximilian Bloch
So kann Google aggregieren & Schema-Beziehungen auf breiter
ebene verstehen: Sportergebnisse, Nachrichten, Filmzeiten…
In der Cloud kann Google Engagement deutlich besser messen
als durch Links & externe URL
Kosten für Cloud-Hosting sinken – Speicherkapazitäten steigen –
Crawling lässt sich einsparen, eigene Kompressionsmethoden &
Caching Algorithmen steigern Effizienz
Denken wir nur an das AMP-Beispiel
51