SEO-Atelier

Maximilian Bloch

Mobile First Index

Campixx 2018

01.03.2018

SEO-Atelier

Maximilian Bloch

2

Slides

seo-atelier.de/mobile-first.pdf

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

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?

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

SEO-Atelier

Maximilian Bloch

6

Mobile First v Desktop First?

Check your Logs!

SEO-Atelier

Maximilian Bloch

Was muss ich beachten?

7

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

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

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

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

SEO-Atelier

Maximilian Bloch

Also muss ich gar nichts ändern?

12

Kommt darauf an…

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/

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

SEO-Atelier

Maximilian Bloch

Responsive

15

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

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)

SEO-Atelier

Maximilian Bloch

Dynamic Serving

18

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)

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

SEO-Atelier

Maximilian Bloch

Unterschiedliche URLs

21

Hier wird es (etwas) kritischer…

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!

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!

SEO-Atelier

Maximilian Bloch

Unterschiedliche URLs

24

Und Backlinks?

SEO-Atelier

Maximilian Bloch

Unterschiedliche URLs

25

Erfolgreich angekommen? Kleiner Trick…

Wird bei einer Desktop-Suche das Snippet der mobilen oder Desktop-Version ausgespielt?

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?

SEO-Atelier

Maximilian Bloch

AMP

27

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?

SEO-Atelier

Maximilian Bloch

29

vs.

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>

SEO-Atelier

Maximilian Bloch

Sitespeed

31

SEO-Atelier

Maximilian Bloch

32

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

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

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

SEO-Atelier

Maximilian Bloch

Strukturierte Daten

36

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

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

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

SEO-Atelier

Maximilian Bloch

Mobile Index

40

Warum?

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

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?

SEO-Atelier

Maximilian Bloch

Duplicate Content…

https://developers.google.com/search/docs/data-types/article

https://developers.google.com/actions/content-actions/news

43

SEO-Atelier

Maximilian Bloch

SEO-Atelier

Maximilian Bloch

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

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

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

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

SEO-Atelier

Maximilian Bloch

50 Quelle: https://mobilemoxie.com/blog/understanding-mobile-first-indexing-23-long-term-impact-seo/

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

SEO-Atelier

Maximilian Bloch

Cross-Device-Tracking?

Alle Nutzerdaten bei Google?

Google Home? Antworten basieren auf Datenströmen ohne URLs – aus der Cloud

52

SEO-Atelier

Maximilian Bloch

Google fordert Entwickler auf, Android-Apps auf der Google-Cloud-Plattform zu testen

53

SEO-Atelier

Maximilian Bloch

54

Vielen Dank!

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