Successfully reported this slideshow.
We use your LinkedIn profile and activity data to personalize ads and to show you more relevant ads. You can change your ad preferences anytime.

Google - Mobil-First-Index @SEO-Campixx 2018 | Maximilian Bloch

102 views

Published on

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.

  • Be the first to comment

  • Be the first to like this

Google - Mobil-First-Index @SEO-Campixx 2018 | Maximilian Bloch

  1. 1. SEO-Atelier Maximilian Bloch Mobile First Index Campixx 2018 01.03.2018
  2. 2. SEO-Atelier Maximilian Bloch 2 Slides seo-atelier.de/mobile-first.pdf
  3. 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. 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. 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
  6. 6. SEO-Atelier Maximilian Bloch 6 Mobile First v Desktop First?  Check your Logs!
  7. 7. SEO-Atelier Maximilian Bloch Was muss ich beachten? 7
  8. 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. 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. 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. 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
  12. 12. SEO-Atelier Maximilian Bloch Also muss ich gar nichts ändern? 12 Kommt darauf an…
  13. 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. 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
  15. 15. SEO-Atelier Maximilian Bloch Responsive 15
  16. 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. 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)
  18. 18. SEO-Atelier Maximilian Bloch Dynamic Serving 18
  19. 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)
  20. 20. SEO-Atelier Maximilian Bloch Dynamic Serving Serverseitiges A/B- & Split-Testing Achtet auch beim mobilen Testen darauf, Google eine Standard- Variante mit allen relevanten Daten auszuliefern! 20
  21. 21. SEO-Atelier Maximilian Bloch Unterschiedliche URLs 21 Hier wird es (etwas) kritischer…
  22. 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. 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!
  24. 24. SEO-Atelier Maximilian Bloch Unterschiedliche URLs 24 Und Backlinks?
  25. 25. SEO-Atelier Maximilian Bloch Unterschiedliche URLs 25 Erfolgreich angekommen? Kleiner Trick… Wird bei einer Desktop-Suche das Snippet der mobilen oder Desktop-Version ausgespielt?
  26. 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?
  27. 27. SEO-Atelier Maximilian Bloch AMP 27
  28. 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?
  29. 29. SEO-Atelier Maximilian Bloch 29 vs.
  30. 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>
  31. 31. SEO-Atelier Maximilian Bloch Sitespeed 31
  32. 32. SEO-Atelier Maximilian Bloch 32
  33. 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. 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. 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
  36. 36. SEO-Atelier Maximilian Bloch Strukturierte Daten 36
  37. 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. 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. 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
  40. 40. SEO-Atelier Maximilian Bloch Mobile Index 40 Warum?
  41. 41. SEO-Atelier Maximilian Bloch 41 Welche Aussagen bleiben denn hängen? - Strukturierte Daten - Pagespeed – AMP…. (auch in Kombination mit PWA) - Desktop nicht mehr derart aktuell
  42. 42. SEO-Atelier Maximilian Bloch 42 Aber - Strukturierte Daten - Pagespeed – AMP…. (auch in Kombination mit PWA) - Desktop nicht mehr derart aktuell Warum merkt sich Google denn einfach mein Setup?
  43. 43. SEO-Atelier Maximilian Bloch Duplicate Content… https://developers.google.com/search/docs/data-types/article https://developers.google.com/actions/content-actions/news 43
  44. 44. SEO-Atelier Maximilian Bloch
  45. 45. SEO-Atelier Maximilian Bloch
  46. 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. 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. 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. 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
  50. 50. SEO-Atelier Maximilian Bloch 50Quelle: https://mobilemoxie.com/blog/understanding-mobile-first-indexing-23-long-term-impact-seo/
  51. 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
  52. 52. SEO-Atelier Maximilian Bloch  Cross-Device-Tracking?  Alle Nutzerdaten bei Google?  Google Home? Antworten basieren auf Datenströmen ohne URLs – aus der Cloud 52
  53. 53. SEO-Atelier Maximilian Bloch  Google fordert Entwickler auf, Android-Apps auf der Google-Cloud-Plattform zu testen 53
  54. 54. SEO-Atelier Maximilian Bloch 54 Vielen Dank!
  55. 55. SEO-Atelier Maximilian Bloch SEO-Atelier Schelklingerstr. 20 86156 Augsburg Kontakt Maximilian Bloch Tel 0821 80735508 https://seo-atelier.de maximilian.bloch@seo-atelier.de

×